:root {
  --blue: #1b4fd8;
  --blue-dark: #123a9e;
  --blue-light: #e8f0ff;
  --green: #22a24a;
  --green-dark: #1a8a3d;
  --red: #e23b3b;
  --gold: #f4b400;
  --ink: #16233d;
  --muted: #64748b;
  --bg: #f2f6ff;
  --card: #ffffff;
  --card-2: #f6f9ff;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(20,40,90,.10);
  --font-display: 'Baloo 2', 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ===== DESIGNTEMAER (skins pr. skole) - overskriver farve/font-variabler + få effekter ===== */
/* Studie = standard (bruger :root ovenfor). Akademi = elegant CVI. Prestige (mørk) tilføjes. */
body.theme-akademi {
  --bg:#ece6da; --card:#fdfbf7; --ink:#0e1b29; --muted:#7c7060; --gold:#bd8f53;
  --green:#5f8f4a; --green-dark:#4a7439;   /* varm, afdaempet oliven der passer paletten - skolens eget valg vinder */
  --font-display:'Fraunces', Georgia, serif; --font-body:'Mulish', -apple-system, sans-serif;
  --shadow:0 14px 38px rgba(35,26,12,.13);
}
body.theme-akademi .card, body.theme-akademi .side-card, body.theme-akademi .main-card { border:1px solid rgba(14,27,41,.07); }
body.theme-akademi h1, body.theme-akademi h2, body.theme-akademi h3 { letter-spacing:-.01em; }

/* Prestige = mørkt premium (navy-flader, guld-accent, Playfair/Inter). Lys tekst overalt. */
body.theme-prestige {
  --bg:#0c1a34; --card:#16315b; --card-2:#102a50; --ink:#e7eefb; --muted:#a6bad9; --gold:#e6ad57; --blue-light:#1c3a68;
  --green:#2fa06d; --green-dark:#217a52;   /* raffineret handlings-standard der passer navy - skolens eget valg vinder */
  --font-display:'Playfair Display', Georgia, serif; --font-body:'Inter', -apple-system, sans-serif;
  --shadow:0 18px 45px rgba(2,8,22,.55);
}
body.theme-prestige .pack-row { background:#102a50; border-color:rgba(150,180,230,.16); }
body.theme-prestige .pack-row.cust { background:#13315e; }
body.theme-prestige .pack-glabel { color:#cbb488; }
body.theme-prestige .games-table td { border-bottom-color:rgba(150,180,230,.14); }
body.theme-prestige .games-table th { color:var(--muted); }
body.theme-prestige .ed-h, body.theme-prestige .bg-sec-label { color:var(--ink); }
body.theme-prestige .card, body.theme-prestige .side-card, body.theme-prestige .main-card { border:1px solid rgba(150,180,230,.16); }
body.theme-prestige input[type=text], body.theme-prestige input[type=password], body.theme-prestige input[type=number], body.theme-prestige textarea, body.theme-prestige select { background-color:#0f2547; color:var(--ink); border-color:rgba(150,180,230,.24); }
body.theme-prestige input.locked, body.theme-prestige textarea.locked { background:#0b1d3a; color:var(--ink); border-color:rgba(150,180,230,.18); }
body.theme-prestige .btn.secondary { background:rgba(255,255,255,.08); color:var(--ink); }
body.theme-prestige .btn.secondary:hover { background:rgba(255,255,255,.14); }
body.theme-prestige .popup { background:linear-gradient(180deg,#16315b,#0e2445); color:var(--ink); border-color:rgba(150,180,230,.2); }
body.theme-prestige .popup .sub { color:#b9c8e6; }
body.theme-prestige .bg-zone { background:#102a50; border-color:rgba(150,180,230,.18); color:var(--ink); }
body.theme-prestige .plate-choice button, body.theme-prestige .theme-opt { background:#102a50; border-color:rgba(150,180,230,.2); color:var(--ink); }
body.theme-prestige .drop-zone { background:#102a50; border-color:rgba(150,180,230,.28); }
body.theme-prestige .acc-head:hover { background:rgba(255,255,255,.05); }
body.theme-prestige .pill { background:rgba(230,173,87,.16); color:#f0c886; }
body.theme-prestige .topbar { background:#0a1730; }

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}
h1, h2, h3, .brand { font-family: var(--font-display); letter-spacing: .2px; }
/* Skolens eget baggrundsbillede: fast fuldskaerms-lag (regner ALTID ud fra skaermen, ikke sidens hoejde -
   undgaar Safaris background-attachment:fixed+cover zoom-fejl). Cover = altid én fuld dimension med.
   --cbg = url, --cbg-pos = fokuspunkt. */
.cbg::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: var(--cbg);
  background-size: cover;
  background-position: var(--cbg-pos, center);
  background-repeat: no-repeat;
}

/* fuldskaerms-baggrund naar man er inde i spillet */
body.ingame {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* overskrifter der ligger direkte oven paa et baggrundsbillede */
#mapView h1, #areaView h1 { color:#fff; text-shadow:0 2px 10px rgba(0,20,50,.6); }
#mapView .sub { color:#eaf1ff; text-shadow:0 1px 8px rgba(0,20,50,.6); }
.wrap { max-width: 1400px; margin: 0 auto; padding: 24px 24px 60px; }
.wrap.wide { max-width: none; padding-top: 12px; }   /* lærer-panel + editor: hele skærmens bredde, trukket op */
/* Login-/vente-kort holdes i læsbar bredde selv når siden er fuld-bredde */
#joinCard, #lobbyCard, #endCard { max-width: 560px; margin-left: auto; margin-right: auto; }
#taskCard { max-width: 860px; margin-left: auto; margin-right: auto; }

/* ---- skole-kontrolpanel ---- */
/* Logoet sidder centreret øverst i det hvide kort (main-card), så venstre søjle kan starte helt oppe. */
.panel-logo { display:block; height:104px; max-width:100%; width:auto; object-fit:contain; object-position:center; margin:0 auto; justify-self:center; }
@media (max-width:760px){
  #panelView .school-head { flex-direction:column !important; text-align:center; gap:12px !important; }
  #panelView .school-head > div { flex:none !important; justify-content:center !important; }
  #panelView .school-head > div:last-child { text-align:center !important; max-width:none !important; }
}
/* Plade bag logo (ingen/lys/mørk) - så logoet er tydeligt på enhver baggrund */
.logo-plate-light { background:rgba(255,255,255,.40); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:10px 18px; border-radius:16px; box-shadow:0 5px 16px rgba(0,0,0,.12); }
.logo-plate-dark { background:rgba(13,22,52,.38); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:10px 18px; border-radius:16px; box-shadow:0 5px 16px rgba(0,0,0,.22); }
/* .logo-plate-none = ingen ekstra styling */
.plate-choice { display:flex; gap:6px; }
.plate-choice button { flex:1; padding:8px 6px; border:1px solid #d7deec; background:#fff; color:var(--ink); border-radius:9px; font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; }
.plate-choice button:hover { border-color:var(--blue); }
.plate-choice button.active { background:var(--blue); color:var(--on-blue,#fff); border-color:var(--blue); }
/* Hint-valg i editoren: lodrette kort med titel + forklaring */
.hint-choice { display:flex; flex-direction:column; gap:8px; }
.hint-choice button { text-align:left; padding:11px 13px; border:2px solid #d7deec; background:#fff; color:var(--ink); border-radius:12px; font-family:inherit; cursor:pointer; display:block; transition:border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.hint-choice button b { display:block; font-size:14.5px; font-weight:800; margin-bottom:2px; }
.hint-choice button span { display:block; font-size:12.5px; color:var(--muted); line-height:1.4; font-weight:500; }
.hint-choice button:hover { border-color:var(--blue); transform:translateY(-1px); }
.hint-choice button.active { border-color:var(--blue); background:color-mix(in srgb, var(--blue) 8%, #fff); box-shadow:var(--hi), 0 4px 12px color-mix(in srgb, var(--blue) 20%, transparent); }
.hint-choice button.active b { color:var(--blue-dark); }
body.theme-prestige .hint-choice button { background:#102a50; border-color:rgba(150,180,230,.2); color:var(--ink); }
body.theme-prestige .hint-choice button.active { border-color:var(--blue); background:color-mix(in srgb, var(--blue) 22%, #102a50); }
.panel-head { margin-bottom: 8px; }
.page-tab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 300px; max-width: 100%; box-sizing: border-box;   /* samme bredde som sidebar-kortet under */
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--on-blue, #fff);
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 80%, #fff) 0%, var(--blue) 55%, var(--blue-dark) 100%);
  padding: 15px 32px; border-radius: 5px; border:1px solid rgba(0,0,0,.16);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--blue) 38%, transparent), inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -4px 8px rgba(0,0,0,.18);
  position: relative; overflow: hidden;
}
/* diskret blank glans-stribe henover */
.page-tab::after {
  content:''; position:absolute; top:0; left:0; right:0; height:48%;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events:none;
}
@media (max-width:640px){ .panel-logo { height:80px; } }
.panel-grid { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.sidebar { display: flex; flex-direction: column; gap: 16px; }
.side-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.side-card h3 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
/* En knap, der endnu ikke goer noget, skal SE ud som om den ikke goer noget. Den er
   `disabled`, saa den hverken kan klikkes eller naas med tabulator - og den er tonet
   ned, saa ingen staar og trykker forgaeves. */
.side-btn-snart { opacity:.45; cursor:default; box-shadow:none; filter:grayscale(.35); }
.side-btn-snart:hover { transform:none; }
/* Harmonika (foldbare bokse i editor-sidebaren) */
.side-card.acc { padding: 0; overflow: hidden; }
.acc-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 15px 18px; font-family: inherit; }
.acc-head:hover { background: #f6f9ff; }
.acc-titlewrap { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acc-title { font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); white-space: nowrap; }
.acc-desc { font-size: 12px; font-weight: 600; color: #97a4b8; line-height: 1.35; }
.acc-status { font-size: 12px; color: var(--muted); font-weight: 700; white-space: normal; text-align: right; min-width: 0; max-width: 55%; line-height: 1.3; }
.acc-chev { color: var(--blue); font-size: 32px; line-height: 1; transition: transform .2s; }
.side-card.acc.open .acc-chev { transform: rotate(180deg); }
.acc-body { padding: 0 18px 18px; display: none; }
.side-card.acc.open .acc-body { display: block; animation: accOpen .22s ease; }
@keyframes accOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.side-btn {
  display: block; width: 100%; text-align: center; text-decoration: none;
  background: var(--blue); color: var(--on-blue, #fff); font-weight: 700; font-size: 15px;
  padding: 12px 14px; border-radius: 10px; border: none; cursor: pointer; margin-bottom: 10px; font-family: inherit;
}
.side-btn:last-child { margin-bottom: 0; }
.side-btn:hover { background: var(--blue-dark); }

.drop-zone {
  display: block; text-align: center; cursor: pointer;
  border: 2px dashed #c3d0e8; border-radius: 14px; background: #f7faff;
  padding: 18px 14px; transition: border-color .15s, background .15s, transform .15s;
}
.drop-zone:hover { border-color: var(--blue); background: #eef4ff; }
.drop-zone.drag { border-color: var(--blue); background: var(--blue-light); border-style: solid; transform: scale(1.02); }
.drop-zone .drop-cta { font-weight: 800; color: var(--blue); font-size: 15px; }
.drop-zone .drop-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.drop-zone.drag * { pointer-events: none; }

.bg-sec-label { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--ink); margin: 0 0 8px; }
.theme-choice { display: flex; flex-direction: column; gap: 8px; }
.theme-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border: 2px solid #e0e5ee; border-radius: 12px; background: #fff; cursor: pointer; font-family: inherit; }
.theme-opt:hover { border-color: var(--blue); }
.theme-opt.active { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.theme-opt-sw { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.theme-opt-txt { display: flex; flex-direction: column; }
.theme-opt-name { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); }
.theme-opt-desc { font-size: 12.5px; color: var(--muted); }
/* Farve-roller (primær/accent/handling) med farvevælger */
.brand-role { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--card-2); }
.brand-role:last-of-type { border-bottom: none; }
.br-name { font-weight: 800; font-size: 14px; color: var(--ink); }
.br-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.br-txt { flex: 1; min-width: 0; }   /* labelen giver plads, så farve-prøve + hex aldrig klippes af */
/* Farve-prøven står ude til HØJRE for teksten (klik = farvevælgeren), og hex-feltet er en
   lille diskret boks UNDER den. I en smal sidebar er der ikke plads til begge dele på
   samme linje - så blev teksten mast til nul bredde og lå under farve-prøven. */
.br-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
/* FEJL VI RETTEDE: den generelle regel input[type=text] { width:100% } har HØJERE
   specificitet end .br-hex (attribut tæller som en klasse), så feltets bredde blev
   aldrig brugt - det voksede til 255 px og skubbede alt andet ud af rækken.
   .brand-role .br-hex vinder, uden at vi skal bruge !important. */
.brand-role .br-hex { width: 92px; height: 30px; padding: 0 6px; border: 1.5px solid #dbe1ec; border-radius: 8px;
  background: #f7f9fd; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; text-align: center; }
.brand-role .br-hex:focus { outline: none; border-color: var(--blue); color: var(--ink); background:#fff; }
.br-input { width: 48px; height: 40px; padding: 0; border: 2px solid #d7deec; border-radius: 10px; background: none; cursor: pointer; flex: 0 0 auto; box-shadow: 0 2px 6px rgba(20,50,120,.14); }
.br-input:hover { border-color: var(--blue); }
.br-input::-webkit-color-swatch-wrapper { padding: 3px; }
.br-input::-webkit-color-swatch { border: none; border-radius: 6px; }
/* Musik-kontrol: højttaler-knap + lydstyrke-skyder (venteskærm + pointtavle) */
.music-ctrl { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); background: var(--card); }
.mc-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; border: none; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.mc-btn.on { background: color-mix(in srgb, var(--green) 14%, var(--card)); color: var(--green-dark); }
.vol-range { width: 104px; height: 6px; cursor: pointer; accent-color: var(--green); }
.lb-music { background: var(--card); }
.snd-group { display: inline-flex; align-items: center; gap: 8px; }
.snd-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--card-2); }

/* Editor: musikvælger med lyt-eksempel */
.music-opt { display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.music-opt .mo-pick { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border: 2px solid var(--card-2); border-radius: 11px; background: var(--card); cursor: pointer; font-family: inherit; }
.music-opt.active .mo-pick { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--card)); }
.mo-name { font-weight: 800; font-size: 14px; color: var(--ink); }
.mo-vibe { font-size: 12px; color: var(--muted); line-height: 1.35; }
.mo-prev { flex: 0 0 auto; width: 44px; border: 2px solid var(--card-2); border-radius: 11px; background: var(--card); font-size: 16px; cursor: pointer; color: var(--blue); }
.mo-prev:hover { border-color: var(--blue); }
.theme-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.theme-swatches button { aspect-ratio: 1; border-radius: 10px; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 -3px 6px rgba(0,0,0,.18), 0 2px 5px rgba(0,20,60,.15); transition: transform .08s; }
.theme-swatches button:hover { transform: scale(1.08); }
.theme-swatches button.active { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset, inset 0 -3px 6px rgba(0,0,0,.18), 0 2px 6px rgba(0,20,60,.25); }
.bg-preview { width: 100%; height: 90px; border-radius: 10px; margin: 0 auto 12px; background-size: cover; background-position: center; background-color: #e6ecf6; }
/* Grundbillede-vaelger: klikbare thumbnails */
.grund-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grund-thumb { position: relative; height: 78px; border-radius: 10px; border: 2px solid #e6ecf6; background-size: cover; background-position: center; cursor: pointer; padding: 0; overflow: hidden; }
.grund-thumb.active { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.grund-thumb .gt-lbl { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 11px; font-weight: 800; color: #fff; text-align: center; background: linear-gradient(180deg, rgba(9,20,50,0), rgba(9,20,50,.72)); }
.grund-thumb.active .gt-lbl::after { content: ' ✓'; }
.bg-preview.empty { background-image: none; }
.bg-zones { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.bg-zone { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); background: #f7faff; border: 1px solid #e6ecf6; border-radius: 9px; padding: 8px 11px; cursor: pointer; }
.bg-zone.off { opacity: .5; cursor: default; }
.bg-zone input { flex: 0 0 auto; }

.main-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; }
.school-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.logo-circle { width: 64px; height: 64px; border-radius: 16px; background: var(--blue-light); color: var(--blue-dark); display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 900; flex: 0 0 auto; }
.counters { display: flex; gap: 30px; justify-content: center; margin: 4px 0 20px; }
.counter { text-align: center; }
.counter .cnum { display: block; font-size: 30px; font-weight: 900; color: var(--blue-dark); }
.counter .clbl { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
/* Live "spiller lige nu"-tæller */
.counter.live .cnum { color: #9aa4b2; display: flex; justify-content: center; align-items: center; gap: 8px; }
.counter.live .live-dot { width: 11px; height: 11px; border-radius: 50%; background: #c3ccd8; flex: 0 0 auto; }
.counter.live.active .cnum { color: #1a9d4e; }
.counter.live.active .live-dot { background: #21c065; box-shadow: 0 0 0 0 rgba(33,192,101,.6); animation: livePulse 1.4s ease-out infinite; }
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(33,192,101,.55); }
  70% { box-shadow: 0 0 0 11px rgba(33,192,101,0); }
  100% { box-shadow: 0 0 0 0 rgba(33,192,101,0); }
}

.games-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.games-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid #e6ecf6; }
.games-table td { padding: 12px 10px; border-bottom: 1px solid #eef2f8; vertical-align: middle; }
.games-table .gname { font-weight: 700; }
.games-table .gcode { font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: 1px; color: var(--blue-dark); }
.btn-mini { background: var(--blue-light); color: var(--blue-dark); border: none; border-radius: 8px; padding: 8px 16px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 14px; }
.btn-mini:hover { background: #d7e3fb; }
.btn-x { background: none; border: none; color: #b23; font-size: 18px; cursor: pointer; font-weight: 700; border-radius: 8px; padding: 4px 10px; }
.btn-x:hover { background: #fdeaea; }
.tag { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.tag.lobby { background: #eaf0ff; color: #2b4ea3; }
.tag.live { background: #e6f7ec; color: #1a8a3d; }
.tag.done { background: #eef1f6; color: #64748b; }
@media (max-width: 760px) { .panel-grid { grid-template-columns: 1fr; } }

/* spillaengde i lobby */
.len-row { display:flex; align-items:center; gap:12px; margin-top:14px; font-weight:600; }
.tadj { background:linear-gradient(180deg,#f6f9ff,#e6edfb); color:var(--blue-dark); border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); border-radius:10px; padding:8px 13px; font-weight:800; cursor:pointer; font-size:15px; box-shadow:var(--hi), var(--e1); }
.tadj:hover { background:#dde8ff; }
.tadj.dark { background:rgba(255,255,255,.92); }

/* ---- RUNDVISNING (guided tour) ---- */
#tourBlocker { position:fixed; inset:0; z-index:9000; }
#tourHole {
  position:fixed; z-index:9001; border-radius:16px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(8,18,44,.66); border:3px solid #ffd75e;
  transition:all .25s ease;
}
#tourTip {
  position:fixed; z-index:9002;
  background:linear-gradient(180deg,#fdfbf7,#f4eee2);
  border-radius:18px; box-shadow:0 26px 64px rgba(40,30,18,.42);
  border:1px solid #e5dbc7;
  padding:20px 22px; font-family:var(--font-body); color:#4a4638;
}
#tourTip .tt-step { font-family:'Nunito',sans-serif; font-size:12px; font-weight:800; color:#9c3f4d; letter-spacing:1.5px; text-transform:uppercase; }
#tourTip h3 { font-family:'Fraunces',serif; font-weight:700; margin:7px 0 9px; font-size:22px; color:#231a1c; line-height:1.15; }
#tourTip p { margin:0 0 14px; font-size:14.5px; line-height:1.6; color:#6b5f5a; white-space:pre-line; }
#tourTip .tt-dots { display:flex; gap:6px; margin:0 0 15px; }
#tourTip .tt-dots i { width:7px; height:7px; border-radius:50%; background:rgba(60,50,30,.2); transition:all .22s; }
#tourTip .tt-dots i.on { background:#9c3f4d; width:20px; border-radius:4px; }
#tourTip .tt-btns { display:flex; align-items:center; gap:8px; }
#tourTip .tt-btns #ttSkip { background:none; border:none; box-shadow:none; border-radius:0; color:#8a8270; text-decoration:underline; cursor:pointer; font-family:inherit; font-size:14px; padding:6px 4px; }
#tourTip .tt-btns #ttSkip:hover { color:#5b5647; }
#tourTip .tt-btns #ttPrev { background:#efe7d9; color:#3b3a34; }
#tourTip .tt-btns .btn-mini#ttNext { background:#9c3f4d; color:#fff; border:1px solid #9c3f4d; font-weight:700; box-shadow:0 6px 18px rgba(156,63,77,.32); padding:11px 22px; transition:transform .2s, box-shadow .2s, background .2s; }
#tourTip .tt-btns .btn-mini#ttNext:hover { transform:translateY(-1px); background:#8a3646; border-color:#8a3646; box-shadow:0 9px 24px rgba(156,63,77,.4); }

/* ---- LIVE-SKAERM (immersiv) ---- */
#liveScreen {
  position:fixed; inset:0; z-index:30; display:flex; flex-direction:column; color:#fff;
  background:url('img/baggrund-omraadekort.png') center/cover fixed;
}
/* Mørk scrim i toppen, saa hvid tekst forbliver laesbar ogsaa paa meget lyse baggrunde */
.live-head { display:flex; align-items:center; justify-content:space-between; padding:16px 26px 34px; gap:22px; background:linear-gradient(180deg, rgba(8,20,48,.55) 0%, rgba(8,20,48,.2) 55%, transparent 100%); }
.lh-brand { font-weight:900; font-size:19px; background:var(--blue); padding:10px 20px; border-radius:999px; box-shadow:var(--shadow); flex-shrink:0; }
/* Midterfeltet er en egen bane mellem badgen og timeren: det tager kun pladsen der er
   tilovers, saa logoet forbliver stort naar der er plads, men shrinker foer det NOGENSINDE
   naar ind over HTX-badgen eller timeren. overflow:hidden er et sidste sikkerhedsnet. */
.lh-center { display:flex; align-items:center; justify-content:center; gap:14px; min-width:0; flex:1 1 0; overflow:hidden; }
.lh-logo { display:block; height:104px; max-width:min(32vw,360px); width:auto; min-width:0; object-fit:contain; margin:0; filter:drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
/* Skolens navn i toppen, naar de ikke har lagt et logo ind. Logoet ved siden af
   er 104 px hoejt, saa 25 px tekst virkede spinkel. Skalerer med skaermen som
   alt andet paa live-skaermen, saa den ogsaa kan laeses bagfra i lokalet. */
.lh-school { font-size:clamp(28px,4.2vh,46px); font-weight:900; letter-spacing:.5px;
  text-shadow:0 2px 10px rgba(0,0,0,.55); }
.lh-code { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 12px; font-weight:800; font-size:20px; letter-spacing:1.5px; text-shadow:0 1px 6px rgba(0,0,0,.55); flex-shrink:0; }
.codepill2 { background:#fff; color:var(--blue-dark); padding:8px 30px; border-radius:999px; border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); font-family:ui-monospace,Menlo,monospace; font-weight:900; letter-spacing:10px; text-indent:10px; font-size:52px; line-height:1.05; box-shadow:0 6px 20px rgba(0,0,0,.28); }
.lh-timer { display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* Mellemrummet skal kunne rumme puls-effekten. Kortene skaleres 8% op, saa et
   kort paa 158 px vokser 12,6 px i alt - 6,3 til hver side. Med 5 px mellemrum
   voksede de ind i hinanden i de sidste fem minutter. Aendres skalaen i
   @keyframes pulse, skal mellemrummene her regnes efter igen. */
.fliptimer { display:flex; align-items:center; gap:8px; }
.fliptimer .d { background:#fff; color:#16233d; font-weight:900; font-size:62px; width:76px; height:100px; border-radius:14px; border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); display:flex; align-items:center; justify-content:center; box-shadow:0 5px 14px rgba(0,0,0,.28); }
.fliptimer .sep { font-weight:900; font-size:54px; padding:0 4px; }
.fliptimer.low .d { background:var(--red); color:#fff; animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }

.live-stage { flex:1; display:flex; align-items:center; justify-content:center; padding:10px 20px; overflow:auto; }
/* Kortene paa live-scenen laegges fast i toppen og vokser NEDAD, i stedet for
   at vaere lodret centreret. Med fire grupper flød pointtavlen ellers midt paa
   skaermen og flyttede sig, hver gang en gruppe kom til. Samme afstand som
   slut-menuen, saa de to ligger samme sted. */
.lb-card { width:min(780px,94%); background:#fff; color:var(--ink); border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.4); overflow:hidden;
  align-self:flex-start; margin-top:clamp(10px, 4vh, 46px); }
.lb-head { background:var(--blue); color:var(--on-blue,#fff); padding:16px 24px; font-weight:900; font-size:20px; letter-spacing:1px; }
.lb-list { list-style:none; margin:0; padding:14px; max-height:60vh; overflow:auto; }
.lb-empty { list-style:none; text-align:center; color:var(--muted); padding:34px; }
/* Pointtavlens raekker.
   Ikke ens kasser paa stribe. Podiet er KORT med dybde og metalfarve; fra
   fjerdepladsen og ned bliver de flade og lette, saa de tre oeverste traeder
   frem af sig selv. Placeringstallet er en rund medalje - ligesom i spillet -
   ikke en firkant, for firkanter laeses som bokse. */
.lb-row { display:flex; align-items:center; gap:14px;
  padding:clamp(5px,0.7vh,11px) 16px; margin-bottom:clamp(3px,0.45vh,6px);
  border-radius:999px; background:rgba(232,239,250,.55); will-change:transform;
  transition:background .2s ease; }
.lb-rank { width:clamp(28px,3.6vh,44px); height:clamp(28px,3.6vh,44px); flex:0 0 auto; border-radius:50%;
  background:linear-gradient(160deg,#e8eefa,#c9d6ea); display:flex; align-items:center;
  justify-content:center; box-shadow:inset 0 1px 2px rgba(255,255,255,.9); }
.lb-rank-in { width:75%; height:75%; border-radius:50%; background:#fff; color:#5a7093;
  font-weight:900; font-size:clamp(12px,1.6vh,17px); display:flex; align-items:center; justify-content:center; }
.lb-name { flex:1; font-weight:800; font-size:19px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Fast bredde, saa pokalen ikke flytter tallene. Guld er stoerst, men alle
   tre - og den tomme plads paa 4. og ned - fylder det samme vandret. */
.lb-tro { display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:2.4em; }
/* Pokalen bliver mindre ned ad podiet - guld staerkest, bronze mest beskeden.
   Forskellen ses paa afstand, ogsaa foer man har laest tallet. */
.lb-tro-ic { width:1.6em; height:1.6em; }
.lb-row.p1 .lb-tro-ic { width:2.1em; height:2.1em; }
.lb-row.p2 .lb-tro-ic { width:1.75em; height:1.75em; }
.lb-row.p3 .lb-tro-ic { width:1.45em; height:1.45em; }
.lb-tro-ic .tk { fill:currentColor; }
.lb-tro-ic .tg { fill:#fff; opacity:.55; }
.lb-pts { font-weight:900; font-size:22px; color:var(--blue-dark); min-width:90px; text-align:right; }

/* --- podiet: kort med dybde, egen metalfarve og stoerre medalje --- */
/* Podiet er en anelse stoerre end resten - men skalerer med, saa de tre plus
   syv altid kan vaere paa skaermen. Maalt: 10 raekker passer fra 768 px op. */
.lb-row.p1, .lb-row.p2, .lb-row.p3 { border-radius:20px;
  padding:clamp(4px,0.7vh,14px) 18px; margin-bottom:clamp(2px,0.45vh,9px); }
.lb-row.p1 .lb-rank, .lb-row.p2 .lb-rank, .lb-row.p3 .lb-rank {
  width:clamp(30px,4vh,52px); height:clamp(30px,4vh,52px); }
.lb-row.p1 .lb-rank-in, .lb-row.p2 .lb-rank-in, .lb-row.p3 .lb-rank-in { font-size:clamp(13px,1.8vh,19px); }

.lb-row.p1 { background:linear-gradient(100deg,#fff7e0,#ffe9b0 55%,#ffdf93);
  box-shadow:0 12px 28px rgba(190,140,20,.32), inset 0 1px 0 rgba(255,255,255,.9); }
.lb-row.p1 .lb-rank { background:linear-gradient(160deg,#ffe9a8,#f0ac00 60%,#c07f00); }
.lb-row.p1 .lb-rank-in { background:radial-gradient(circle at 38% 28%,#fffdf3,#ffeeb8); color:#7a5500; }
.lb-row.p1 .lb-tro-ic { color:#d59300; }
.lb-row.p1 .lb-pts, .lb-row.p1 .lb-name { color:#6b4a00; }

.lb-row.p2 { background:linear-gradient(100deg,#f4f7fb,#d9e2ee 55%,#c9d4e4);
  box-shadow:0 10px 24px rgba(70,95,130,.26), inset 0 1px 0 rgba(255,255,255,.9); }
.lb-row.p2 .lb-rank { background:linear-gradient(160deg,#f2f6fb,#aab8ca 60%,#7f8ea3); }
.lb-row.p2 .lb-rank-in { background:radial-gradient(circle at 38% 28%,#ffffff,#e6ecf4); color:#465a75; }
.lb-row.p2 .lb-tro-ic { color:#8b9bb0; }
.lb-row.p2 .lb-pts, .lb-row.p2 .lb-name { color:#3b4d66; }

.lb-row.p3 { background:linear-gradient(100deg,#fdf1e5,#f3d8bd 55%,#eccaa6);
  box-shadow:0 10px 24px rgba(150,95,45,.26), inset 0 1px 0 rgba(255,255,255,.9); }
.lb-row.p3 .lb-rank { background:linear-gradient(160deg,#f7dcbf,#cf9155 60%,#a4682f); }
.lb-row.p3 .lb-rank-in { background:radial-gradient(circle at 38% 28%,#fffaf4,#f6e0c8); color:#7a4d1c; }
.lb-row.p3 .lb-tro-ic { color:#c07c3e; }
.lb-row.p3 .lb-pts, .lb-row.p3 .lb-name { color:#6f4519; }

/* Overskriftens pokal + knappen til at folde alle grupper ud */
/* Titlen skal staa i midten - ogsaa naar "vis alle"-knappen er fremme. Derfor
   ligger knappen ovenpaa i hoejre side i stedet for at dele pladsen, saa den
   ikke skubber titlen ud af centrum. */
.lb-head { position:relative; display:flex; align-items:center; justify-content:center;
  gap:14px; font-size:clamp(20px,2.7vh,30px); letter-spacing:1.2px; padding:clamp(12px,1.9vh,20px) 24px; }
.lb-alle { position:absolute; right:18px; top:50%; transform:translateY(-50%); }
.lb-head-tit { display:inline-flex; align-items:center; gap:12px; }
.lb-head-tro { width:1.25em; height:1.25em; }
.lb-head-tro { color:#ffd873; }
.lb-alle { background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.34);
  border-radius:999px; padding:7px 15px; font-family:inherit; font-weight:800; font-size:13.5px;
  cursor:pointer; flex:0 0 auto; }
.lb-alle:hover { background:rgba(255,255,255,.28); }
/* Foldet ud: listen faar lov at rulle, men kun her */
.lb-list.lb-rul { max-height:calc(100vh - 300px); overflow:auto; }


/* Stor countdown: centreret praecis midt paa siden (fixed), uafhaengigt af top/bund */
.big-clock { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; }
/* Blød mørk glorie bag den centrerede timer, saa tekst er laesbar paa baade lyse og moerke baggrunde */
.big-clock::before { content:''; position:absolute; inset:-90px -130px; z-index:-1; background:radial-gradient(ellipse at center, rgba(8,20,48,.5) 0%, rgba(8,20,48,.28) 45%, rgba(8,20,48,0) 72%); pointer-events:none; }
.bc-label { font-size:34px; font-weight:800; letter-spacing:7px; text-shadow:0 2px 6px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.7); }
.bc-row { display:flex; align-items:center; gap:30px; }
.bc-adj { font-size:26px; padding:18px 26px; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.3); }
.fliptimer.huge { gap:18px; }
.fliptimer.huge .d { width:158px; height:216px; font-size:158px; border-radius:22px; box-shadow:0 12px 34px rgba(0,0,0,.4); }
.fliptimer.huge .sep { font-size:120px; }

/* Bundbjaelken. FOERST proevede vi tre lige brede spalter for at faa midten
   PRAECIS i midten - men det tvinger begge sider til samme bredde, og venstre
   side (to knapper + lydpanelet) fylder 632 px mens den kun fik 490-550 paa en
   almindelig skaerm. Saa braekkede bjaelken om i to raekker midt i en time.
   Nu faar siderne den plads de har brug for, og midten centreres i det, der er
   tilbage. Med et kompakt lydpanel ligger den under 100 px fra skaermens midte,
   og bjaelken kan ikke gaa i stykker. En knap lidt ude af centrum er bedre end
   en bjaelke der vaelter foran en klasse. */
.live-bottom { display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:12px; padding:16px 26px; background:transparent; }
.lb-left, .lb-mid, .lb-right { display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:nowrap; }
/* Under 1400 px kan de to sider ikke vaere lige brede uden at klemme venstre
   gruppe. Saa dropper vi den praecise midte og lader bjaelken bryde i to
   raekker i stedet - det er grimmere end en centreret knap, men langt bedre
   end en knap der bliver klippet af i kanten. Maalt: venstre gruppe fylder
   494 px med det kompakte lydpanel, og under ca. 1290 faar hver side mindre. */
@media (max-width:1289px){
  .live-bottom { display:flex; flex-wrap:wrap; justify-content:center; }
  .lb-left, .lb-mid, .lb-right { justify-content:center; flex-wrap:wrap; }
}
.lb-left  { justify-content:flex-start; }
.lb-mid   { justify-content:center; position:relative; }
.lb-right { justify-content:flex-end; }
/* De to alvorlige knapper ligger nu ved siden af hinanden, og begge er roede.
   Ekstra luft mellem dem, saa "Afslut spil" ikke rammes af et hurtigt klik,
   der var ment som "Akut hjaelp" - den ene kan ikke fortrydes. */
.lb-right #endBtn2 { margin-left:14px; }

/* SAMME pille som appens standardknapper (fx .tinfo/.top-logout): glossy hvid + tema-kant + indre glans */
.lb-btn { background:linear-gradient(180deg,#ffffff,#dbe4f4); color:var(--ink); border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); border-radius:999px; padding:14px 26px; font-family:var(--font-display); font-weight:700; font-size:16px; cursor:pointer; box-shadow:0 7px 16px rgba(0,20,60,.26), inset 0 2px 0 rgba(255,255,255,1), inset 0 -7px 11px rgba(0,20,60,.16); }
.lb-btn:hover { filter:brightness(1.03); box-shadow:0 10px 22px rgba(0,20,60,.32), inset 0 2px 0 rgba(255,255,255,1), inset 0 -7px 11px rgba(0,20,60,.16); }
/* Knappen skifter tekst mellem "Countdown timer" (ca. 207 px) og "Pointtavle"
   (ca. 170 px). Uden en fast bredde aendrer den stoerrelse, og fordi bjaelken
   fordeler pladsen jaevnt, rykker ALLE de andre knapper med. Bredden foelger
   den LAENGSTE tekst i midterspalten - "Vaelg hvad der skal ske" (ca. 250 px).
   Skiftes en af teksterne, skal tallet maales efter igen. */
/* Midterknapperne er samme standardpille - kun fast bredde + centreret tekst */
.lb-btn.center { min-width:224px; text-align:center; }
/* Røde knapper: samme pille, men rød tekst + lys rød kant (som standardknappen "Afslut prøve") */
.lb-btn.danger { color:#c0392b; border-color:color-mix(in srgb, #c0392b 32%, #ffffff); }
@media (max-width:640px){ .fliptimer.huge .d{ width:64px;height:94px;font-size:56px;} .lh-center{display:none;} .lb-btn{padding:12px 16px;font-size:14px;} }
.topbar {
  background: var(--blue);
  color: var(--on-blue, #fff);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  font-weight: 800; letter-spacing: .5px;
}
.topbar .brand { font-size: 20px; }
.topbar .topleft { display:flex; align-items:center; gap:12px; min-width:0; }
.top-logout { background:linear-gradient(180deg,#ffffff,#fde9e9); color:#b2352f; border:1px solid rgba(180,60,50,.34); border-radius:999px; padding:9px 16px; font-family:inherit; font-weight:800; font-size:14px; cursor:pointer; margin-left:4px; box-shadow:0 4px 12px rgba(0,20,60,.20), inset 0 1px 0 #fff; transition:background .15s ease; }
.top-logout:hover { background:linear-gradient(180deg,#fdeaea,#f9d6d6); }
/* Rød "Log ud" konsekvent i hele appen (fx underviser-panelet) */
.btn-logout { background:linear-gradient(180deg,#ffffff,#fde9e9) !important; color:#b2352f !important; border:1px solid rgba(180,60,50,.34) !important; font-weight:800 !important; box-shadow:var(--hi), 0 5px 13px rgba(150,60,50,.22) !important; }
.btn-logout:hover { background:linear-gradient(180deg,#fdeaea,#f9d6d6) !important; color:#9e2f2a !important; }
.btn-logout svg, .btn-logout .ic { stroke:#b2352f; }
.top-logo { height:34px; max-width:150px; width:auto; object-fit:contain; display:block; }   /* ingen fast boks - rammen styres af skolens plade-valg (logo-plate-*) */
@media (max-width:640px){ .top-logo { height:28px; max-width:104px; } .topbar .topleft { gap:8px; } }
.topbar .score { background: rgba(255,255,255,.15); padding: 6px 14px; border-radius: 999px; font-size: 16px; }

h1 { font-size: 26px; margin: 8px 0 4px; }
h2 { font-size: 20px; margin: 0 0 12px; }
.sub { color: var(--muted); margin: 0 0 22px; line-height: 1.5; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  margin-bottom: 18px;
}

label { display:block; font-weight:600; margin: 14px 0 6px; font-size: 14px; }
input[type=text], input[type=password], input[type=number], textarea {
  width: 100%; padding: 14px 16px; font-size: 16px; font-family: inherit;
  border: 2px solid #dbe4f5; border-radius: 12px; outline: none; background:#fafcff;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus { border-color: var(--blue); }
/* appearance:none slaar styresystemets egen knap fra, saa feltet foelger resten
   af appen. Pilen er vores egen SVG. BEMAERK: den UDFOLDEDE liste tegnes af
   styresystemet og kan ikke styles - den ser forskellig ud paa Mac og Windows.
   Skal den ogsaa matche, kraever det en egen komponent i stedet for <select>. */
select {
  width: 100%; padding: 14px 44px 14px 16px; font-size: 16px; font-family: inherit;
  border: 2px solid #dbe4f5; border-radius: 12px; outline: none; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: #fafcff;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%3E%3Cpath%20d=%22M3.2%205.8%208%2010.6l4.8-4.8%22%20fill=%22none%22%20stroke=%22%238aa0c0%22%20stroke-width=%222.1%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 15px;
}
select:hover { border-color: #b9cbe9; }
select:focus { border-color: var(--blue); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--blue); color: var(--on-blue, #fff); border:none; cursor:pointer;
  padding: 15px 26px; font-size:17px; font-weight:700; border-radius: 12px;
  width:100%; margin-top: 18px; transition: transform .05s, background .15s;
}
.btn:hover { background: var(--blue-dark); }
.btn:active { transform: scale(.98); }
.btn.secondary { background:#eef3ff; color: var(--blue-dark); }
.btn.secondary:hover { background:#e0e9ff; }
.btn.green { background: var(--green); color: var(--on-green, #fff); }
.btn.green:hover { background: var(--green-dark); }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.error { color: var(--red); font-weight:600; margin-top:12px; min-height: 20px; }
.sgap { display:block; height:.5em; }   /* lille luft mellem saetninger (efter punktum) */
@keyframes ryst { 0%,100%{transform:translateX(0);} 15%{transform:translateX(-8px);} 30%{transform:translateX(7px);} 45%{transform:translateX(-5px);} 60%{transform:translateX(4px);} 78%{transform:translateX(-2px);} }
.error.ryst { animation: ryst .5s cubic-bezier(.36,.07,.19,.97); font-weight:800; font-size:1.12em; }
.hint { color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.55; }
/* "I kan vælge flere" - ren tekst under svarene, tydelig via vaegt + let dybde (ingen boks) */
.multi-hint { margin:10px 2px 2px; color:var(--blue-dark); font-size:15px; font-weight:800; letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(27,63,134,.20); }
input.locked, textarea.locked { background: #eef1f6; color: var(--ink); cursor: default; border-color: #e0e5ee; }

/* role picker */
.roles { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px; margin-top: 20px; }
.role {
  display:block; text-decoration:none; color: var(--ink);
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 20px; text-align:center; border: 2px solid transparent; transition: border .15s, transform .1s;
}
.role:hover { border-color: var(--blue); transform: translateY(-3px); }
.role .ico { font-size: 42px; }
.role .t { font-weight:800; margin-top:10px; font-size: 18px; }
.role .d { color: var(--muted); font-size: 13px; margin-top:6px; }

/* code display */
.codebox { text-align:center; padding: 24px; background: var(--blue-light); border-radius: var(--radius); }
.codebox .code { font-size: 56px; font-weight: 900; letter-spacing: 10px; color: var(--blue-dark); }
.codebox .lbl { color: var(--muted); font-weight:600; text-transform:uppercase; font-size:12px; letter-spacing:2px; }

/* group chips */
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; min-height: 20px; }
#lobbyView .chips { gap:12px; }
.chip { background: var(--blue-light); color: var(--blue-dark); font-weight:800; padding:11px 20px; border-radius: 999px; font-size:18px; }

/* options */
.opt {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:linear-gradient(180deg,#ffffff,#eef3fb); border:1.5px solid #d3ddef; border-radius:14px;
  padding: 16px 18px; font-size:17px; font-weight:600; color:#22314e; cursor:pointer; margin-bottom:11px;
  box-shadow:0 3px 8px rgba(25,50,110,.09), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.opt:hover { transform:translateY(-1px); border-color:#9fb8e6; box-shadow:0 8px 16px rgba(25,50,110,.16), inset 0 1px 0 rgba(255,255,255,.7); }
.opt:active { transform:translateY(0); }
.opt.selected { border-color:#1b4fd8; background:linear-gradient(180deg,#3f72e3,#1b4fd8); color:#fff; box-shadow:0 6px 14px rgba(20,50,120,.28), inset 0 1.5px 0 rgba(255,255,255,.32), inset 0 -4px 7px rgba(0,0,0,.20); }
.opt .box { width:22px; height:22px; border-radius:6px; border:2px solid #b9c8e6; background:#fff; flex:0 0 auto; position:relative; transition:background .12s, border-color .12s; }
.opt.selected .box::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#1b4fd8; font-size:14px; font-weight:900; line-height:1; }
.opt.correct { border-color: var(--green); background:#e6f7ec; color: var(--green-dark); }
.opt.wrong { border-color: var(--red); background:#fdeaea; color: var(--red); }
.opt.locked, .img-opt.locked { pointer-events:none; }
.opt.locked { background: linear-gradient(180deg,#ff5b5b,#e23b3b); border-color:#c92f2f; color:#fff; box-shadow:0 3px 0 rgba(150,20,20,.35), inset 0 1.5px 0 rgba(255,255,255,.28), inset 0 -3px 6px rgba(0,0,0,.20); transform:translateY(1px); }
.opt.locked .box { border-color:#fff; background:transparent; position:relative; }
.opt.locked .box::after { content:'✕'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:800; line-height:1; }
.opt.locked > span:last-child { text-decoration:none; }
.img-opt.locked { outline:3px solid #e23b3b; outline-offset:-3px; filter:saturate(.6) brightness(.85); }
/* Accepteret rigtigt valg (flere-svars): grønt + låst, overtrumfer den røde laaste-stil */
.opt.correct.locked { background:linear-gradient(180deg,#43cf70,#22a24a); border-color:#1c7a43; color:#fff; box-shadow:0 3px 0 rgba(20,120,50,.32), inset 0 1.5px 0 rgba(255,255,255,.30), inset 0 -3px 6px rgba(0,0,0,.20); }
.opt.correct.locked .box { border-color:#fff; background:transparent; }
.opt.correct.locked .box::after { content:'✓'; }
.img-opt.correct.locked { border-color:var(--green); box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 34%, transparent); outline:none; filter:none; }
.opt.selected .box { background:#fff; border-color:#fff; }

/* drag lists */
.draglist { list-style:none; margin: 8px 0; padding:0; }
/* Finger-træk: pressen paa en brik trækker den (i stedet for at scrolle siden) - kun relevant paa touch */
.order-item, .dragitem { touch-action:none; }
.dragitem {
  background:linear-gradient(180deg,#3f72e3,#1b4fd8); color:#fff; border:none; border-radius:13px; padding:12px 16px;
  font-size:15.5px; font-weight:700; cursor:grab; display:inline-flex; flex:0 1 auto; align-items:center; gap:10px; user-select:none;
  max-width:100%; white-space:normal; overflow-wrap:break-word; word-break:break-word; line-height:1.3;
  box-shadow:0 5px 12px rgba(20,50,120,.26), inset 0 1.5px 0 rgba(255,255,255,.30), inset 0 -4px 7px rgba(0,0,0,.20); border:1px solid rgba(0,0,0,.16); transition:transform .12s ease, box-shadow .12s ease;
}
.dragitem:hover { transform:translateY(-1px); box-shadow:0 9px 18px rgba(20,50,120,.32), inset 0 1px 0 rgba(255,255,255,.3); }
.dragitem:active { cursor:grabbing; transform:translateY(0); }
.dragitem.correct { background:linear-gradient(180deg,#43cf70,#22a24a); box-shadow:0 5px 12px rgba(34,162,74,.3), inset 0 1px 0 rgba(255,255,255,.28); cursor:default; }
.dragitem.wrong { background:linear-gradient(180deg,#ff6a6a,#e23b3b); box-shadow:0 5px 12px rgba(200,40,40,.3), inset 0 1px 0 rgba(255,255,255,.24); animation:shake .4s; }
.dragitem.dragging { opacity:.5; box-shadow:0 12px 24px rgba(20,50,120,.35); }
/* enkelt-emoji-brikker: store, på ren hvid (ikke blå), med grøn/rød ring som feedback */
.dragitem.emoji-brik { background:#fff; color:inherit; border:1px solid rgba(30,55,110,.18); font-size:42px; line-height:1; padding:8px 12px; letter-spacing:0; box-shadow:0 3px 8px rgba(20,50,120,.12), inset 0 1px 0 rgba(255,255,255,.7); }
.dragitem.emoji-brik:hover { transform:translateY(-2px); box-shadow:0 9px 18px rgba(20,50,120,.2); }
.dragitem.emoji-brik.correct { background:#fff; border:2px solid #22a24a; box-shadow:0 0 0 3px rgba(34,162,74,.25); }
.dragitem.emoji-brik.wrong { background:#fff; border:2px solid #e23b3b; box-shadow:0 0 0 3px rgba(226,59,59,.25); }
/* Billed-brik i "sorter i kategorier billede": lille billede, plain hvid brik (ingen effekter) */
.dragitem.img-brik { background:#fff; color:inherit; border:1px solid rgba(30,55,110,.18); padding:6px; letter-spacing:0; box-shadow:0 3px 8px rgba(20,50,120,.12); }
.dragitem.img-brik img { width:62px; height:62px; object-fit:contain; display:block; border-radius:6px; -webkit-user-drag:none; }
.dragitem.img-brik:hover { transform:translateY(-2px); box-shadow:0 9px 18px rgba(20,50,120,.2); }
.dragitem.img-brik.correct { background:#fff; border:2px solid #22a24a; box-shadow:0 0 0 3px rgba(34,162,74,.25); cursor:default; }
.dragitem.img-brik.wrong { background:#fff; border:2px solid #e23b3b; box-shadow:0 0 0 3px rgba(226,59,59,.25); animation:shake .4s; }

/* PLACE: billed-brikker der trækkes op på brune hylder (ikke i skolernes editor) */
.pool.place-pool { justify-content:center; gap:12px; }
.dragitem.place-item {
  background:transparent; color:inherit; border:none; border-radius:14px; padding:6px;
  position:relative; box-shadow:none;
}
.dragitem.place-item img { width:120px; height:120px; object-fit:contain; display:block; pointer-events:none; -webkit-user-drag:none; filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.dragitem.place-item:hover { transform:translateY(-3px); box-shadow:none; }
.dragitem.place-item.correct { background:transparent; border:none; box-shadow:none; }
.dragitem.place-item.correct img { filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)) drop-shadow(0 0 5px rgba(34,162,74,.55)); }
.dragitem.place-item.wrong { background:transparent; border:none; box-shadow:none; animation:shake .4s; }
.dragitem.place-item.correct::after, .dragitem.place-item.wrong::after {
  position:absolute; top:-9px; right:-9px; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:900; color:#fff; box-shadow:0 2px 5px rgba(0,0,0,.32);
}
.dragitem.place-item.correct::after { content:'✓'; background:#22a24a; }
.dragitem.place-item.wrong::after { content:'✗'; background:#e23b3b; }
.shelves { display:flex; flex-direction:column; gap:15px; margin-top:8px; }
.cat.shelf {
  background:linear-gradient(180deg,#c1894f 0%,#a4703d 55%,#8b5b2c 100%);
  border:1px solid rgba(60,35,10,.55); border-radius:13px; min-height:122px; padding:14px 16px 16px;
  justify-content:center; align-content:center; gap:12px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22), inset 0 -10px 16px rgba(60,30,8,.30), 0 8px 16px rgba(80,45,15,.26);
}
.cat.shelf h3 { color:#fff3e2; text-shadow:0 1px 2px rgba(60,30,8,.55); }

/* premium baggrund paa elev-siden (join + lobby) */
body.play { background:url('img/baggrund-omraadekort.png') center/cover fixed; }
/* Elev-siden bruger hele skærmens bredde (små margener) - kort holdes dog centreret/smalle */
body.play .wrap { max-width:none; padding:14px 30px 40px; }
body.play #joinCard { max-width:520px; margin-left:auto; margin-right:auto; }
/* Trinnet hvor grupperne vælger navn: bredere kort, så der er plads til 4 navne pr. række */
/* BEMAERK: ingen overgang paa bredden. At animere bredden tvinger browseren til at
   omregne placeringen af alle 100 navnefelter paa hvert eneste billede i animationen. */
body.play #joinCard.bred { max-width:1040px; }
/* Navnelisten laases til 4 kolonner - ellers afhaenger antallet af vinduets bredde.
   Lange navne ombrydes i stedet for at presse en kolonne vaek. */
#joinCard.bred .name-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:660px){ #joinCard.bred .name-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
#joinCard.bred .name-tile { font-size:14px; padding:13px 13px; hyphens:auto; }

/* Kortet centreres lodret mens eleverne er ved at komme ind i spillet */
body.play.joining .wrap { min-height:calc(100vh - 78px); display:flex; flex-direction:column; justify-content:center; }

/* ---- Join-kortet: lidt liv i den hvide flade i stedet for en flad baggrund ---- */
body.play #joinCard { position:relative; overflow:hidden; }
body.play #joinCard::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 12% -10%, color-mix(in srgb, var(--blue) 16%, transparent) 0%, transparent 62%),
    radial-gradient(90% 70% at 108% 8%, color-mix(in srgb, var(--gold) 20%, transparent) 0%, transparent 58%),
    radial-gradient(110% 70% at 50% 118%, color-mix(in srgb, var(--blue) 10%, transparent) 0%, transparent 60%);
}
body.play #joinCard > * { position:relative; z-index:1; }

/* Gruppenavnet praesenteres som en plade i stedet for en almindelig overskrift */
.group-plate {
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  margin:2px 0 22px; padding:18px 22px 20px; border-radius:20px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 92%, #fff) 0%, var(--blue-dark) 100%);
  box-shadow:0 14px 32px color-mix(in srgb, var(--blue) 34%, transparent), inset 0 1px 0 rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.22);
}
.gp-label { font-size:12px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,255,255,.72); }
.gp-name {
  font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3.4vw,34px); line-height:1.15; color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.28);
}

/* Stoerre, tydeligere labels paa join-trinene */
body.play #joinCard label { font-size:17px; font-weight:700; color:#1a2b47; margin:18px 0 8px; }

/* Drop-down i spillets stil i stedet for styresystemets standard */
.game-select {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; padding:15px 46px 15px 16px; font-size:17px; font-family:inherit; font-weight:700; color:#16305e;
  background-color:#fbfdff; border:2px solid #dbe4f5; border-radius:14px; cursor:pointer;
  box-shadow:0 4px 12px rgba(20,50,120,.10), inset 0 1px 0 #fff;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316305e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:19px;
  transition:border-color .14s, box-shadow .14s, transform .14s;
}
.game-select:hover { border-color:#b9cbe9; transform:translateY(-1px); }
.game-select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 22%, transparent), inset 0 1px 0 #fff; }
body.play #taskCard, body.play #endCard { max-width:720px; margin-left:auto; margin-right:auto; }
/* Spoergerunden kan rumme mange spoergsmaal. Bredere ramme giver 4 spalter paa en
   klasseskaerm og falder selv til 3 og 2 paa smallere skaerme (auto-fill i .q-grid). */
body.play #qRound { width:100%; max-width:1180px; margin-left:auto; margin-right:auto; box-sizing:border-box; }
body.play #qMine { max-width:760px; margin:10px auto 0; }
/* Spoergerunden staar som en scene for sig selv - alt paa midteraksen. */
body.play #qRound { text-align:center; }
body.play #qRound .q-card { text-align:left; }
/* Spørgeskemaet i en behagelig centreret kolonne (ikke hele skærmens bredde på laptop) */
body.play #survey { max-width:760px; margin-left:auto; margin-right:auto; }
/* Skolens logo + velkomst-tekst i toppen af spørgeskemaet (står frit på baggrunden) */
.sv-logo { display:block; max-width:min(72%,300px); max-height:100px; width:auto; height:auto; object-fit:contain; margin:0 auto 14px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.sv-intro { padding:2px 4px 8px; margin-bottom:16px; font-size:17px; line-height:1.55; color:var(--ink); text-align:center; }
body.play .sv-intro { color:#eef3ff; text-shadow:0 2px 8px rgba(0,0,0,.55); }
/* Forhåndsvisningen får mørk baggrund så den ligner elevernes immersive skærm */
/* Forhaandsvisningen foelger skolens tema (lyst/moerkt) - ingen tvunget baggrund her. */
body.play #joinCard {
  background:linear-gradient(180deg,#ffffff,#f2f7ff); border-radius:26px;
  box-shadow:0 34px 80px rgba(4,12,40,.55); border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); padding:30px 30px 26px;
}
body.play #joinCard h1 { font-size:30px; color:#16305e; }

/* legende hint-boks i stedet for kedelig gra tekst */
.game-hint {
  display:block; background:linear-gradient(180deg,#eaf1ff,#dfe9ff); color:#274690;
  border:1px solid rgba(120,150,210,.35); border-radius:14px; padding:13px 16px; margin:0 0 18px;
  font-weight:700; font-size:14.5px; line-height:1.45; box-shadow:inset 0 1px 0 #fff;
}
.game-hint b { color:#16305e; }

/* Knappen til et spil der er KLAR. Samme groenne udtryk og puls som "Spiller lige nu"-taelleren.
   FAST groen (#21c065) - bevidst IKKE var(--green), som skolen kan aendre med sit farvevalg. */
.btn-mini.pulse {
  background:#e6f7ec; color:#127a3d;
  box-shadow:0 0 0 0 rgba(33,192,101,.55);
  animation:knapPuls 1.6s ease-out infinite;
}
.btn-mini.pulse:hover { background:#d3f0de; animation:none; box-shadow:0 0 0 3px rgba(33,192,101,.30); }
@keyframes knapPuls {
  0%   { box-shadow:0 0 0 0 rgba(33,192,101,.55); }
  70%  { box-shadow:0 0 0 10px rgba(33,192,101,0); }
  100% { box-shadow:0 0 0 0 rgba(33,192,101,0); }
}
/* Respekterer indstillingen "reducér bevaegelse" - knappen er stadig groen */
@media (prefers-reduced-motion: reduce){ .btn-mini.pulse { animation:none; box-shadow:0 0 0 3px rgba(33,192,101,.30); } }

/* Fire smaa knapper hvor én altid er valgt (fx antal gruppenavne) */
.pick-row { display:flex; gap:10px; }
.pick { flex:1; font-family:var(--font-display); font-weight:800; font-size:17px; padding:13px 0; cursor:pointer;
  color:var(--ink); background:var(--card-2,#f2f6fd); border:2px solid transparent; border-radius:13px; transition:all .14s; }
.pick:hover { border-color:color-mix(in srgb, var(--blue) 40%, transparent); }
.pick.sel { background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #fff), var(--blue-dark)); color:#fff;
  border-color:var(--blue-dark); box-shadow:0 6px 16px color-mix(in srgb, var(--blue) 34%, transparent); }
/* Flere linjer i en hint-boks - staar EFTER .game-hint, ellers vinder dens display:block */
/* Venstrestillet, så den flugter med overskriften - og med loft over bredden, så linjerne er læsbare */
.game-hint.hint-lines { display:flex; flex-direction:column; gap:7px; text-align:left; max-width:720px; margin-left:0; margin-right:auto; }
#qRound .game-hint.hint-lines { text-align:center; margin-left:auto; }
.game-hint.hint-lines span { display:block; }

/* navne-bank grid - spil-fliser med dybde */
/* contain: browseren behoever ikke gentjekke resten af siden naar der scrolles i listen */
.name-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; max-height:56vh; overflow:auto; padding:4px 4px 4px; margin-top:4px; contain:layout paint; }
.name-tile {
  font-family:var(--font-display); text-align:left; color:#16305e; cursor:pointer;
  background:linear-gradient(180deg,#ffffff,#eef4ff); border:2px solid #e2e9f6; border-radius:15px;
  padding:15px 16px; font-size:15px; font-weight:700; transition:transform .14s, box-shadow .14s, border-color .14s, background .14s;
  box-shadow:0 4px 10px rgba(20,50,120,.12), inset 0 1px 0 #fff;
  /* Felter uden for synsfeltet tegnes ikke. Browseren husker deres hoejde,
     saa scrollbaren ikke hopper. Gaelder baade foerste visning og scroll. */
  content-visibility:auto; contain-intrinsic-size:auto 54px;
}
.name-tile:hover { border-color:var(--blue); background:linear-gradient(180deg,#eef4ff,#dbe8ff); transform:translateY(-3px); box-shadow:0 12px 24px rgba(27,79,216,.30); }
.name-tile:active { transform:translateY(-1px); }
.name-tile.taken { color:#93a1ba; background:linear-gradient(180deg,#f2f5fa,#e9edf5); border-color:#e2e8f2; box-shadow:none; }
.name-tile.taken:hover { border-color:#f2b400; background:linear-gradient(180deg,#fff8e6,#ffefc4); color:#8a6300; transform:translateY(-2px); box-shadow:0 10px 20px rgba(242,180,0,.28); }
.name-tile .lock { float:right; }

/* topbar-info: point + gruppenavn */
.topinfo { display:flex; gap:10px; align-items:center; }
/* Elevskærmen inde i demoens delte skærm: kun det, der hører til elevens egen skærm.
   Point står på storskærmen ved siden af, og det er demoen der afslutter spillet. */
/* BEMÆRK: ingen body.play i disse selektorer. Den klasse sættes først, når spillet er
   i gang, og så stod pillerne stadig og lyste på velkomst- og kortskærmen. */
html.sb-embed #scoreTag,
html.sb-embed #logoutBtn,
html.sb-embed #logoutBtn2 { display:none !important; }
html.sb-embed .topinfo { gap:8px; }
.tinfo { background:rgba(255,255,255,.16); padding:6px 14px; border-radius:999px; font-size:15px; font-weight:700; }
/* Elev-skærme: samme svævende header (transparent + hvide piller) som kort-scenen paa ALLE skaerme */
body.play .topbar { background:transparent !important; box-shadow:none !important; padding:16px 26px; }
body.play .topbar .topleft { gap:14px; }
body.play .topbar .brand { font-family:var(--font-display); font-size:22px; color:#fff; background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 82%,#fff),var(--blue)); padding:11px 24px; border-radius:999px; box-shadow:0 6px 18px rgba(20,50,120,.45), inset 0 1px 0 rgba(255,255,255,.45); text-shadow:none; }
body.play .topinfo { gap:12px; }
body.play .tinfo { display:inline-flex; align-items:center; min-height:60px; box-sizing:border-box; font-family:var(--font-display); background:linear-gradient(180deg,#ffffff,#dbe4f4); color:var(--ink); padding:8px 22px; border-radius:999px; font-weight:700; font-size:19px; box-shadow:0 7px 16px rgba(0,20,60,.26), inset 0 2px 0 rgba(255,255,255,1), inset 0 -7px 11px rgba(0,20,60,.16); border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); }
body.play .top-logo { height:66px; max-width:240px; }   /* kun størrelse - pladen (logo-plate-*) bestemmer boksen */
body.play .top-logout { display:inline-flex; align-items:center; min-height:60px; box-sizing:border-box; padding:8px 22px; font-size:18px; background:linear-gradient(180deg,#ffffff,#f6dede); box-shadow:0 7px 16px rgba(120,40,35,.22), inset 0 2px 0 rgba(255,255,255,.9), inset 0 -7px 11px rgba(120,40,35,.16); }
@media (max-width:760px){ body.play .top-logo{ height:46px; } body.play .topbar .brand{ font-size:17px; padding:9px 16px; } body.play .tinfo{ font-size:15px; padding:6px 15px; min-height:43px; } body.play .top-logout{ font-size:15px; padding:6px 15px; min-height:43px; } }

/* ---- ELEV KONTOR-OVERBLIK (fuldskaerm) ---- */
#mapView {
  position:fixed; inset:0; z-index:25; flex-direction:column;
  background:url('img/baggrund-omraadekort.png') center/cover fixed;
}
.office-head { display:flex; align-items:center; justify-content:space-between; padding:16px 26px; }
.brand2 { font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:.5px; color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 82%,#fff),var(--blue)); padding:11px 24px; border-radius:999px;
  box-shadow:0 6px 18px rgba(20,50,120,.45), inset 0 1px 0 rgba(255,255,255,.45); }
.oh-left { display:flex; align-items:center; gap:14px; min-width:0; }
.oh-logo { height:66px; max-width:240px; width:auto; object-fit:contain; }   /* ramme styres af skolens plade-valg (logo-plate-*) */
.oh-right { display:flex; gap:12px; }
/* Kort-headerens pills skal have SAMME størrelse + dybde som topbjælkens .tinfo/.top-logout
   (ellers er de små i hovedmenuen + sandkassen, men store inde i opgaverne). */
.oh-pill { display:inline-flex; align-items:center; min-height:60px; box-sizing:border-box; font-family:var(--font-display); background:linear-gradient(180deg,#ffffff,#dbe4f4); color:var(--ink);
  padding:8px 22px; border-radius:999px; font-weight:700; font-size:19px;
  box-shadow:0 7px 16px rgba(0,20,60,.26), inset 0 2px 0 rgba(255,255,255,1), inset 0 -7px 11px rgba(0,20,60,.16); border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); }
.oh-logout { display:inline-flex; align-items:center; min-height:60px; box-sizing:border-box; font-family:var(--font-display); background:linear-gradient(180deg,#ffffff,#f6dede); color:#b2352f; padding:8px 22px; border-radius:999px; font-weight:800; font-size:18px; border:1px solid rgba(180,60,50,.34); box-shadow:0 7px 16px rgba(120,40,35,.22), inset 0 2px 0 rgba(255,255,255,.9), inset 0 -7px 11px rgba(120,40,35,.16); cursor:pointer; transition:background .15s ease; }
.oh-logout:hover { background:linear-gradient(180deg,#fdeaea,#f9d6d6); }
@media (max-width:760px){ .oh-pill{ font-size:15px; padding:6px 15px; min-height:43px; } .oh-logout{ font-size:15px; padding:6px 15px; min-height:43px; } }
.office-stage { position:relative; flex:1; overflow:hidden; }

/* omraade-cirkler - dybde og 3D */
.area-circle {
  position:absolute; transform:translate(-50%,-50%); background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:12px; font-family:var(--font-display);
  animation:flyUp .7s cubic-bezier(.2,.8,.3,1.3) both;
}
.ac-disc {
  position:relative; width:140px; height:140px; border-radius:50%; border:none;
  background:linear-gradient(160deg, color-mix(in srgb,var(--blue) 72%, #fff) 0%, var(--blue) 55%, var(--blue-dark) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 36px rgba(8,24,64,.5), inset 0 2px 4px rgba(255,255,255,.5), inset 0 -8px 16px rgba(0,10,40,.42);
  transition:transform .18s ease, box-shadow .18s ease;
}
.ac-disc::before { content:''; position:absolute; inset:9px; border-radius:50%;
  background:radial-gradient(circle at 40% 30%, #ffffff 0%, #eef4fd 58%, #d7e3f6 100%);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.95), inset 0 -8px 16px rgba(70,100,160,.22); }
.ac-ico, .ac-ico-img, .ac-check { position:relative; z-index:1; }
.area-circle:hover .ac-disc { transform:translateY(-7px) scale(1.06); box-shadow:0 28px 48px rgba(8,24,64,.56), inset 0 2px 4px rgba(255,255,255,.5), inset 0 -8px 16px rgba(0,10,40,.42); }
.area-circle:active .ac-disc { transform:translateY(-2px) scale(1.02); }
.area-circle.done .ac-disc { background:linear-gradient(160deg,#ffe08a 0%,#f2b400 55%,#c98a12 100%); box-shadow:0 20px 36px rgba(150,110,10,.5), inset 0 2px 4px rgba(255,255,255,.55), inset 0 -8px 16px rgba(90,60,0,.4); }
.area-circle.done .ac-disc::before { background:radial-gradient(circle at 40% 30%,#fffdf5 0%,#fff3d4 58%,#ffe6a8 100%); }
.ac-ico { font-size:86px; line-height:1; filter:drop-shadow(0 3px 4px rgba(0,0,0,.22)); }
.ac-ico-img { width:84%; height:84%; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.25)); }
.ac-check { position:absolute; right:2px; bottom:2px; width:42px; height:42px; border-radius:50%;
  background:linear-gradient(180deg,#ffd75e,#f2b400); color:#fff; font-weight:900; font-size:23px;
  display:flex; align-items:center; justify-content:center; border:3px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.35); }
.ac-label { position:relative; z-index:2; font-family:var(--font-display); background:linear-gradient(180deg,#ffffff,#e9f1fc); color:#1a2b47;
  font-weight:700; padding:9px 20px; border-radius:22px; font-size:16px;
  max-width:200px; text-align:center; line-height:1.2; overflow-wrap:break-word; hyphens:none;
  border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); box-shadow:0 9px 20px rgba(0,20,60,.32), inset 0 1px 0 #fff; }
.ac-label small { color:#5a80c0; font-weight:700; margin-left:4px; }
.area-circle.done .ac-label { background:linear-gradient(180deg,#fff8e6,#ffeec0); color:#8a6300; }
@keyframes flyUp { 0% { opacity:0; transform:translate(-50%,28%) scale(.3); } 70% { opacity:1; } 100% { opacity:1; transform:translate(-50%,-50%) scale(1); } }

/* velkomst-panel - premium, dybt, indrammet */
.welcome-panel {
  /* Centreret over hele scenen - beskeden staar alene, opgaverne er skjult bagved */
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,92%); max-height:calc(100% - 40px);
  background:linear-gradient(180deg,#ffffff,#f4f8ff); border-radius:24px;
  box-shadow:0 34px 80px rgba(6,18,52,.55); display:flex; flex-direction:column; overflow:hidden;
  border:1px solid rgba(120,150,210,.28);
}
.wp-head { font-family:var(--font-display); background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff;
  padding:18px 22px; font-weight:800; letter-spacing:1px; font-size:21px; display:flex; align-items:center; gap:12px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.28); }
.wp-i { width:30px; height:30px; border-radius:50%; background:#fff; color:#2f6fd8; display:flex; align-items:center; justify-content:center;
  font-style:italic; font-weight:900; font-family:Georgia,serif; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.wp-body { padding:18px 22px; overflow:auto; flex:1; font-size:16.5px; line-height:1.62; color:#2a3852; }
.wp-body p { margin:0 0 12px; }
.wp-body b { color:#16305e; font-weight:800; }
.wp-close { font-family:var(--font-display); margin:14px 22px 20px; background:linear-gradient(180deg,#43cf70,#2fb85a 55%,#1c9040); color:#fff;
  border:1px solid rgba(0,0,0,.16); border-radius:14px; padding:15px; font-weight:800; font-size:18px; cursor:pointer;
  box-shadow:0 7px 18px rgba(20,130,60,.42), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -6px 10px rgba(0,0,0,.22); transition:transform .1s, box-shadow .1s; }
.wp-close:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(20,130,60,.5), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -6px 10px rgba(0,0,0,.22); }
.wp-close:active { transform:translateY(0); }
.wp-reopen { position:absolute; left:24px; top:24px; z-index:4; font-family:var(--font-display); display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,#ffffff,#e6eefb); color:#16305e; border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff);
  border-radius:14px; padding:11px 22px; font-weight:700; font-size:18px; line-height:1; cursor:pointer;
  box-shadow:var(--hi), 0 6px 15px rgba(0,20,60,.26); transition:transform .12s ease, box-shadow .12s ease; }
.wp-reopen:hover { transform:translateY(-1px); box-shadow:var(--hi), 0 9px 20px rgba(0,20,60,.30); }
/* De tre kort-skærm-knapper samles i én pæn, lodret værktøjs-kolonne (ens bredde + afstand)
   i stedet for tre løse piller der lå oven i hinanden i hjørnet. */
.map-tools { position:absolute; left:24px; top:24px; z-index:4;
  display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.map-tools .wp-reopen, .map-tools .wp-tour {
  position:static; left:auto; top:auto; width:100%; box-sizing:border-box;
  justify-content:flex-start; font-size:16px; font-weight:800; padding:11px 20px; border-radius:12px;
  min-height:50px; }
/* Begge knapper skal have PRÆCIS samme tekststørrelse (#tourBtn har ellers 14px fra topbjælke-reglen). */
.map-tools #tourBtn { font-size:16px !important; font-weight:800; letter-spacing:0; }
/* "Følg os"-knappen: spejlvendt af "Læs startbeskeden igen" (højre side), gjort indbydende med
   en social-medie-gradient (IKKE spillets tema) + tydelig hover. INGEN løbende animation - den må
   ikke blinke gennem hele spillet (Nick), kun reagere når man peger/klikker. */
.wp-social { left:auto; right:24px; top:24px;
  background:linear-gradient(135deg,#feda75,#fa7e1e 26%,#d62976 56%,#962fbf 80%,#4f5bd5) !important;
  color:#fff !important; border:none;
  font-weight:800; letter-spacing:.2px;
  box-shadow:0 9px 24px rgba(214,41,118,.44), inset 0 2px 0 rgba(255,255,255,.35); }
.wp-social .wp-reopen-ic{ stroke:#fff; }
.wp-social:hover{ transform:translateY(-2px) scale(1.05); filter:saturate(1.08) brightness(1.04);
  box-shadow:0 14px 34px rgba(214,41,118,.55), inset 0 2px 0 rgba(255,255,255,.4); }
.all-done-badge { font-family:var(--font-display); position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  background:linear-gradient(180deg,#fff,#eef8f1); color:var(--green-dark); font-weight:800; padding:13px 26px; border-radius:999px;
  box-shadow:0 10px 26px rgba(0,0,0,.32); border:1px solid #cdeed6; }
@media (max-width:680px){
  .ac-disc{ width:94px;height:94px;border-width:4px;} .ac-ico{font-size:60px;} .ac-label{font-size:13px;padding:6px 14px;}
  .welcome-panel{ width:auto; left:12px; right:12px; bottom:12px; top:12px; }
}
/* Portræt-telefon: %-ringen af områdecirkler klumper sammen på en høj, smal skærm.
   Her stables de i en ren lodret liste (cirkel + navn pr. række) med scroll, så de er lette at ramme. */
@media (max-width:560px){
  #mapView .office-stage { overflow-y:auto; overflow-x:hidden; }
  #areaCircles { padding:6px 14px 26px; }
  .area-circle { position:static !important; transform:none !important; left:auto !important; top:auto !important;
    flex-direction:row; align-items:center; gap:16px; width:100%; max-width:380px; margin:0 auto 14px;
    justify-content:flex-start; animation:none; }
  .area-circle .ac-disc { width:68px; height:68px; flex:0 0 auto; }
  .area-circle .ac-ico { font-size:40px; }
  .area-circle .ac-ico-img { width:80%; height:80%; }
  .area-circle .ac-check { width:24px; height:24px; font-size:14px; border-width:2px; }
  .area-circle .ac-label { font-size:15px; max-width:none; text-align:left; padding:8px 16px; }
}

/* spørgerunden - spørgsmålskort */
.q-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:6px; }
.q-card { font-family:var(--font-display); text-align:left; background:linear-gradient(180deg,#ffffff,#eef4ff); border:2px solid #e2e9f6; border-radius:14px; padding:16px 18px; font-size:16px; font-weight:700; color:var(--blue-dark); cursor:pointer; box-shadow:0 4px 10px rgba(20,50,120,.12); transition:transform .12s, box-shadow .12s, border-color .12s; }
.q-card:hover { border-color:var(--blue); transform:translateY(-3px); box-shadow:0 12px 24px rgba(27,79,216,.28); }
/* lærerens liste over valgte spørgsmål */
.claim-row { display:flex; align-items:center; gap:14px; background:#f3f8ff; border-radius:14px; padding:14px 18px; margin-bottom:10px; }
.claim-row .cg { font-weight:800; color:var(--blue-dark); flex:0 0 auto; min-width:150px; }
.claim-row .cq { font-weight:600; color:var(--ink); }
/* lærerens spørgeskema-oversigt */
.sv-percent { font-family:var(--font-display); font-weight:900; font-size:44px; color:var(--green-dark); }
.sv-grow { display:flex; align-items:center; gap:10px; background:#f3f8ff; border-radius:12px; padding:10px 14px; margin-bottom:8px; }
.sv-grow.ok { background:#eef8f1; }
.sv-grow.excl { opacity:.5; }
.sv-grow .sv-gname { font-weight:800; color:var(--blue-dark); flex:1; }
.sv-grow .sv-gstat { font-weight:700; color:var(--muted); min-width:70px; text-align:right; }

/* editor-faner + pakke-editor */
.ed-tabs { display:flex; gap:8px; margin:4px 0 18px; border-bottom:2px solid #e6ecf6; }
.ed-tab { font-family:var(--font-display); background:none; border:none; border-bottom:3px solid transparent; padding:10px 16px; font-size:16px; font-weight:700; color:var(--muted); cursor:pointer; margin-bottom:-2px; }
.ed-tab:hover { color:var(--blue-dark); }
.ed-tab.active { color:var(--blue-dark); border-bottom-color:var(--blue); }
.ed-h { font-family:var(--font-display); font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin:16px 0 8px; }
.pack-row { display:flex; align-items:center; gap:12px; background:#fafcff; border:1px solid #e6ecf6; border-radius:10px; padding:12px 14px; margin-bottom:8px; font-weight:600; font-size:15px; }
.pack-row input[type=checkbox] { width:20px; height:20px; flex:0 0 auto; }
.pack-row span { flex:1; }
.pack-row.cust { background:#f3f8ff; }
.pack-glabel { font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--blue-dark); margin:14px 0 8px; }
.pack-glabel.big { font-size:16px; color:var(--ink); border-bottom:2px solid #e6ecf6; padding-bottom:6px; margin-top:10px; }
.pack-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:4px 16px; align-items:start; }
.pack-grid .pack-glabel, .pack-grid .pack-glabel.big { grid-column:1 / -1; }
.pack-grid .pack-row { margin-bottom:0; }

/* elevbesvarelser (resultater) */
.res-q { background:#f6f9ff; border:1px solid #e6ecf6; border-radius:16px; padding:18px 20px; margin-bottom:16px; }
.res-qtext { font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); margin-bottom:12px; }
.res-avg { font-size:15px; color:var(--muted); margin-bottom:10px; }
.res-avg b { color:var(--blue-dark); font-size:18px; }
.res-bar { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.res-bar .rb-label { width:120px; flex:0 0 auto; font-weight:700; font-size:14px; color:var(--ink); }
.res-bar .rb-track { flex:1; height:20px; background:#e6ecf6; border-radius:999px; overflow:hidden; }
.res-bar .rb-fill { display:block; height:100%; background:linear-gradient(90deg,color-mix(in srgb,var(--blue) 82%,#fff),var(--blue)); border-radius:999px; transition:width .4s; }
.res-bar .rb-count { width:34px; text-align:right; font-weight:800; color:var(--blue-dark); }
.res-texts { display:flex; flex-direction:column; gap:8px; }
.res-text { background:#fff; border:1px solid #e6ecf6; border-radius:10px; padding:10px 14px; font-style:italic; color:#34435c; }

/* spørgeskema */
.sv-q { position:relative; background:var(--card); border:1px solid var(--ring-c,rgba(24,50,110,.10)); border-radius:18px; box-shadow:var(--e2,0 6px 16px rgba(18,36,80,.10)); padding:18px 20px 20px; margin-bottom:14px; }
.sv-reorder { position:absolute; top:10px; right:10px; display:flex; gap:4px; }
.sv-reorder button { width:30px; height:30px; border:1px solid var(--card-2); border-radius:8px; background:var(--card-2); color:var(--muted); font-size:12px; cursor:pointer; line-height:1; }
.sv-reorder button:hover { border-color:var(--blue); color:var(--blue); background:color-mix(in srgb,var(--blue) 8%, var(--card)); }
.sv-q .sv-qtext { padding-right:74px; }
.sv-qtext { font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--ink); margin-bottom:12px; line-height:1.35; }
.sv-rating { display:flex; gap:8px; align-items:center; }
.sv-scale-ends { display:flex; justify-content:space-between; margin:0 2px 9px; font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
.sv-star { flex:1; background:none; border:none; padding:6px 2px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.star-ic { width:100%; max-width:48px; height:auto; aspect-ratio:1/1; fill:#dde5f2; stroke:color-mix(in srgb,var(--gold) 55%, #99a6bd); stroke-width:.6; transition:fill .1s ease; filter:drop-shadow(0 2px 4px rgba(18,36,80,.16)); }
.sv-star.on .star-ic { fill:var(--gold); stroke:color-mix(in srgb,var(--gold) 70%, #000); }
.sv-opts { display:flex; flex-direction:column; gap:9px; }
.sv-opt { text-align:left; background:linear-gradient(180deg,#ffffff,#f4f8ff); border:2px solid #dbe4f5; border-radius:13px; padding:14px 17px; font-size:16px; font-weight:700; color:var(--ink); cursor:pointer; box-shadow:var(--e1,0 2px 6px rgba(18,36,80,.08)); transition:box-shadow .16s ease, border-color .16s ease, background .16s ease; }
.sv-opt:hover { border-color:var(--blue); box-shadow:var(--e2,0 10px 24px rgba(18,36,80,.14)); }
.sv-opt.sel { background:linear-gradient(180deg, color-mix(in srgb,var(--blue) 16%, var(--card)), color-mix(in srgb,var(--blue) 9%, var(--card))); border-color:var(--blue); color:var(--blue-dark); font-weight:800; box-shadow:0 8px 18px color-mix(in srgb,var(--blue) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.5); }
.sv-select, .sv-phone, .sv-email { width:100%; box-sizing:border-box; background:#fafcff; border:2px solid #dbe4f5; border-radius:12px; padding:14px 16px; font-size:16px; font-family:inherit; color:var(--ink); outline:none; }
.sv-navn { width:100%; box-sizing:border-box; background:#fafcff; border:2px solid #dbe4f5; border-radius:12px; padding:12px 16px; font-size:16px; font-family:inherit; color:var(--ink); outline:none; margin-bottom:9px; }
.sv-navn:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 20%, transparent); }
.sv-select { cursor:pointer; }
/* Et <select> tegner sin egen lille pil, men den forsvinder, saa snart feltet faar
   egen baggrund og kant - og saa ligner rullemenuen et almindeligt skrivefelt.
   Vi slaar systemets udseende fra og tegner vinklen selv, saa den ser ens ud i alle
   browsere og foelger skolens farve. */
.sv-select { appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316305e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:19px 19px; }
body.play .sv-select { background-color:#fafcff; }
.sv-select::-ms-expand { display:none; }
.sv-select:focus, .sv-phone:focus, .sv-email:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 20%, transparent); }
.sv-fielderr { color:var(--red); font-size:13px; font-weight:700; margin-top:6px; min-height:0; }
.pack-row .btn-x.mv { color:var(--muted); font-size:12px; }
.pack-row .btn-x.mv:hover { color:var(--blue); background:#eaf0ff; }
.sv-text { width:100%; box-sizing:border-box; background:#fafcff; border:2px solid #dbe4f5; border-radius:12px; padding:13px 16px; font-size:16px; font-family:inherit; color:var(--ink); outline:none; }
.sv-text:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 20%, transparent); }
/* Prestige (moerkt tema): spoergeskemaets felter i moerke flader saa tekst er laesbar */
body.theme-prestige .sv-opt { background:linear-gradient(180deg,#17356a,#112a52); border-color:rgba(150,180,230,.24); color:var(--ink); }
body.theme-prestige .sv-opt:hover { border-color:var(--gold); }
body.theme-prestige .sv-opt.sel { background:linear-gradient(180deg,#1f4680,#173963); border-color:var(--gold); color:#fff; }
body.theme-prestige .sv-select, body.theme-prestige .sv-phone, body.theme-prestige .sv-email, body.theme-prestige .sv-text { background:#0f2547; border-color:rgba(150,180,230,.24); color:var(--ink); }

/* Opret-spil-dialog (navn + spilstyrer) */
.cg-label { display:block; font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--ink); margin:0 0 6px; }
.cg-input { width:100%; box-sizing:border-box; background:var(--card); border:2px solid #b7c4de; border-radius:12px; padding:12px 14px; font-size:15px; font-family:inherit; color:var(--ink); outline:none; }
/* Alle drop-downs i underviser-panelet i spillets stil - ikke styresystemets standard.
   background-color og background-image saettes hver for sig, saa pilen ikke bliver slettet af temaerne. */
select.cg-input {
  box-shadow:var(--e1,0 2px 6px rgba(18,36,80,.08));
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:44px; font-weight:700; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316305e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
}
select.cg-input:hover { border-color:#8fa6cc; }
/* Moerkt tema: lys pil, saa den kan ses */
body.theme-prestige select.cg-input {
  background-color:#0f2547;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cddcf5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.cg-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%, transparent); }
.cg-err { color:var(--red,#c0392b); font-size:13px; font-weight:700; margin-top:8px; }

/* Statistik-skaerm */
.stats-totals { display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; }
.stat-box { flex:1; min-width:170px; background:var(--card-2); border:1px solid var(--ring-c,rgba(24,50,110,.10)); border-radius:18px; padding:22px 20px; text-align:center; box-shadow:var(--e1,0 2px 6px rgba(18,36,80,.08)); }
.stat-num { font-family:var(--font-display); font-weight:800; font-size:42px; color:var(--blue-dark); line-height:1; }
.stat-lbl { font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:9px; }
.mgr-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--ring-c,rgba(24,50,110,.10)); border-radius:14px; margin-bottom:10px; background:var(--card); box-shadow:var(--e1,0 2px 6px rgba(18,36,80,.08)); }
.mgr-info { flex:1; min-width:0; }
.mgr-name { font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink); }
.mgr-contact { font-size:13px; color:var(--muted); margin-top:2px; word-break:break-word; }
.mgr-stats { display:flex; gap:22px; text-align:center; flex:0 0 auto; }
.mgr-stat b { display:block; font-family:var(--font-display); font-size:22px; color:var(--blue-dark); line-height:1.1; }
.mgr-stat span { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.mgr-del { background:#fdecec; color:#b23; border:none; border-radius:9px; padding:9px 12px; cursor:pointer; font-family:inherit; font-weight:700; font-size:13px; flex:0 0 auto; }
.mgr-del:hover { background:#f7d4d4; }
body.theme-prestige .stat-num, body.theme-prestige .mgr-stat b { color:var(--gold); }
body.theme-prestige .mgr-del { background:rgba(220,90,90,.18); color:#f2b8b8; }

/* sort in order: felter til venstre, brikker til hoejre */
.order-wrap { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.slots { display:flex; flex-direction:column; gap:12px; }
.slot { display:flex; align-items:stretch; gap:10px; }
.slot-no { width:52px; flex:0 0 auto; background:#dbe9fb; color:#1b3f86; font-weight:800; font-size:19px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.slot-drop { flex:1; min-height:54px; background:#e6f0fb; border-radius:12px; display:flex; align-items:center; padding:5px; transition:outline .1s; box-shadow:inset 0 2px 5px rgba(30,55,110,.12); }
.slot-drop.over, .order-pool.over { outline:2px dashed #6f9be6; outline-offset:2px; }
.order-pool { display:flex; flex-direction:column; gap:12px; min-height:54px; border-radius:12px; padding:2px; }
.order-item {
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:linear-gradient(180deg,#3f72e3,#1b4fd8); color:var(--on-blue,#fff); font-weight:700; font-size:16px; padding:15px 17px; border-radius:13px;
  cursor:grab; user-select:none; box-shadow:0 5px 12px rgba(20,50,120,.26), inset 0 1.5px 0 rgba(255,255,255,.30), inset 0 -4px 7px rgba(0,0,0,.20); border:1px solid rgba(0,0,0,.16); transition:transform .12s ease, box-shadow .12s ease;
}
.order-item:hover { transform:translateY(-1px); box-shadow:0 9px 18px rgba(20,50,120,.32), inset 0 1px 0 rgba(255,255,255,.3); }
.order-item:active { cursor:grabbing; transform:translateY(0); }
.order-item .mv { opacity:.85; font-size:18px; }
.order-item.dragging { opacity:.5; box-shadow:0 12px 24px rgba(20,50,120,.35); }
.order-item.correct { background:linear-gradient(180deg,#43cf70,#22a24a); box-shadow:0 5px 12px rgba(34,162,74,.3), inset 0 1px 0 rgba(255,255,255,.28); cursor:default; }
.order-item.locked { cursor:default; }
.order-item.wrong { background:linear-gradient(180deg,#ff6a6a,#e23b3b); box-shadow:0 5px 12px rgba(200,40,40,.3); animation:shake .4s; }
.order-item.slide-out { transform:translateX(115%); opacity:0; transition:transform 1.1s cubic-bezier(.37,0,.28,1), opacity 1.1s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@media (max-width:560px){ .order-wrap{ grid-template-columns:1fr; } }

/* categories */
.cats { display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:8px; }
.cat { background:#eef3ff; border-radius:14px; padding:12px; min-height: 90px; min-width:0; box-shadow:inset 0 2px 6px rgba(30,55,110,.09); display:flex; flex-wrap:wrap; gap:9px; align-content:flex-start; }
.cat h3 { width:100%; margin:0 0 4px; font-size:14px; text-transform:uppercase; letter-spacing:1px; color: var(--blue-dark); }
.pool { background:#fff8e6; border-radius:14px; padding:12px; min-height:70px; margin-bottom:12px; box-shadow:inset 0 2px 6px rgba(150,120,20,.1); display:flex; flex-wrap:wrap; gap:9px; align-content:flex-start; }
.pool h3 { width:100%; margin:0 0 4px; font-size:13px; text-transform:uppercase; letter-spacing:1px; color:#a6801a; }

/* avatar: gitter til venstre, figur til højre - tryk-vælg klæder figuren på */
.avatar-wrap { display:flex; gap:20px; align-items:center; justify-content:center; flex-wrap:wrap; }
.avatar-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; flex:0 1 380px; align-content:center; }
.item-card {
  background:#fff; border:2px solid #dbe4f5; border-radius:14px; padding:10px; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .12s;
  box-shadow:0 3px 8px rgba(20,50,120,.08);
}
.item-card img { max-width:100%; max-height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; }
.item-card:hover { border-color: var(--blue); transform:translateY(-2px); }
.item-card.selected { border-color: var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 30%, #fff), 0 6px 14px rgba(20,50,120,.18); }
.item-card.correct { border-color:#22a24a; box-shadow:0 0 0 3px rgba(34,162,74,.3); }
.item-card.wrong { border-color:#e23b3b; box-shadow:0 0 0 3px rgba(226,59,59,.35); animation:shake .4s; }
.avatar-stage { position:relative; display:inline-block; flex:0 0 auto; background:#f5f8ff; border:2px solid #e6ecf6; border-radius:18px; }
.avatar-figure { height:min(440px,56vh); width:auto; display:block; }
.avatar-worn { position:absolute; inset:0; pointer-events:none; }
/* Ingen tekst-markering på selve avatar-klik-elementerne (de har ingen læsbar tekst), så man ikke
   får en blå markerings-boks når man trykker på ikonerne. Tekst-markering virker uændret alle andre steder. */
.avatar-grid, .item-card, .avatar-stage, .avatar-figure, .avatar-worn { -webkit-user-select:none; -moz-user-select:none; user-select:none; }
.avatar-worn .worn { position:absolute; transform:translate(-50%,-50%); pointer-events:none; z-index:2; }

/* scoreboard */
.board { list-style:none; margin:0; padding:0; }
.row {
  display:flex; align-items:center; gap:14px; background: var(--card);
  border-radius:14px; padding:14px 18px; margin-bottom:10px; box-shadow: var(--shadow);
  transition: transform .3s;
}
.row .rank { font-size:22px; font-weight:900; color: var(--muted); width:34px; }
.row .rank.g1 { color: var(--gold); }
.row .nm { flex:1; font-weight:700; font-size:18px; }
.row .pts { font-weight:900; font-size:22px; color: var(--blue-dark); }
.row .prog { font-size:13px; color: var(--muted); }

.popup-bg { position:fixed; inset:0; background:rgba(9,20,50,.55); display:flex; align-items:center; justify-content:center; z-index:9500; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); padding:16px; }
.popup { background:linear-gradient(180deg,#ffffff,#f3f7ff); border-radius:24px; padding:30px 30px 26px; max-width:430px; text-align:center; box-shadow:0 34px 80px rgba(4,12,40,.55); border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); animation:popIn .22s cubic-bezier(.2,.8,.3,1.2); }
/* Beskaerings-vaerktoej (logo + baggrund) */
.crop-stage { position:relative; width:100%; aspect-ratio:1; margin:6px auto 0; border-radius:14px; overflow:hidden; background:#0d1836; cursor:grab; touch-action:none; user-select:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.15); }
.crop-stage:active { cursor:grabbing; }
.crop-stage img { position:absolute; top:0; left:0; max-width:none; pointer-events:none; -webkit-user-drag:none; }
.crop-zoom { display:flex; align-items:center; gap:12px; margin-top:14px; }
.crop-zoom input[type=range] { flex:1; accent-color:var(--blue); }
.crop-zoom span { font-size:16px; }
/* Fokuspunkt-vælger (baggrund) */
.focal-stage { position:relative; width:100%; margin:6px auto 0; border-radius:14px; overflow:hidden; background:#0d1836; cursor:crosshair; touch-action:none; user-select:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.15); }
.focal-stage img { display:block; width:100%; height:100%; -webkit-user-drag:none; pointer-events:none; }
.focal-dot { position:absolute; left:50%; top:50%; width:30px; height:30px; border-radius:50%; border:3px solid #fff; background:rgba(255,255,255,.22); box-shadow:0 0 0 2px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.55); transform:translate(-50%,-50%); pointer-events:none; }
.focal-dot::after { content:''; position:absolute; left:50%; top:50%; width:4px; height:4px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); }
@keyframes popIn { from { opacity:0; transform:translateY(14px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
/* Introduktions-lag: luk-knap oven på iframe (i kontrolpanelet) */
#introBtns { position:absolute; bottom:28px; left:26px; z-index:10; display:flex; gap:12px; align-items:center; }
#introClose { background:#fff; color:#0e1b29; border:1px solid rgba(14,27,41,.2); border-radius:999px; padding:12px 22px; font-family:inherit; font-weight:800; font-size:15px; cursor:pointer; box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }
#introClose:hover { background:#0e1b29; color:#d5af7f; }
/* "Tilbage til kontrolpanel" - sekundær knap ved siden af (synlig på præsentationens lyse baggrund) */
#introBack { background:#fff; color:#0e1b29; border:1px solid rgba(14,27,41,.2); border-radius:999px; padding:12px 22px; font-family:inherit; font-weight:800; font-size:15px; cursor:pointer; box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }
#introBack:hover { background:#0e1b29; color:#fff; }
/* "Start spillet" er KLAR: samme grønne puls som kontrolpanelets klar-knap (fast grøn #21c065, ikke skolens farve) */
#introClose.start { background:#1ea34f; color:#fff; border-color:#1ea34f; animation:knapPuls 1.6s ease-out infinite; }
#introClose.start:hover { background:#178a43; color:#fff; animation:none; box-shadow:0 0 0 4px rgba(33,192,101,.32); }
@media (prefers-reduced-motion: reduce){ #introClose.start { animation:none; box-shadow:0 0 0 4px rgba(33,192,101,.32); } }

.ui-modal { max-width:430px; text-align:center; }
.ui-modal-msg { font-size:16px; line-height:1.55; color:var(--ink); white-space:pre-line; margin-bottom:22px; }
.ui-modal-actions { display:flex; gap:10px; }
.ui-modal-actions .btn { flex:1; margin:0; }
/* Skrivefeltet i uiPrompt. Beskeden ovenover har allerede 22px under sig, saa
   feltet skal kun holde afstand NEDAD - ellers klemmes knapperne op i det. */
.ui-modal-input { width:100%; box-sizing:border-box; margin:0 0 20px; text-align:center; }
.popup .ico { font-size:48px; }
.popup h2 { font-family:var(--font-display); margin:10px 0 8px; color:var(--blue-dark); }
.popup .sub { color:#42506a; }
.center { text-align:center; }
.big-code { font-size:34px; font-weight:900; letter-spacing:6px; color:var(--blue-dark); }
/* Laerer-kode: lille diskret boble ved knappen (tryk og hold) */
.mini-pop { position:fixed; z-index:9500; background:var(--card); border:1px solid var(--card-2); border-radius:12px; box-shadow:0 12px 30px rgba(9,20,50,.22); padding:10px 14px; width:200px; text-align:center; pointer-events:none; }
.mini-pop .mp-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
.mini-pop .mp-code { font-family:var(--font-display); font-weight:900; font-size:26px; letter-spacing:6px; color:var(--blue); margin:3px 0 3px; }
.mini-pop .mp-hint { font-size:10.5px; color:var(--muted); line-height:1.3; }

/* Feedback: flydende knap + formular */
.fb-btn { position:fixed; right:20px; bottom:20px; z-index:9000; background:linear-gradient(180deg, color-mix(in srgb, var(--green) 88%, #fff), var(--green) 45%, var(--green-dark)); color:var(--on-green,#fff); border:none; border-radius:999px; padding:12px 20px; font-family:inherit; font-weight:800; font-size:15px; cursor:pointer; box-shadow:inset 0 1.5px 0 rgba(255,255,255,.42), inset 0 -3px 7px rgba(0,0,0,.24), 0 6px 16px rgba(0,0,0,.26); }
.fb-btn:hover { filter:brightness(1.06); }
.fb-pop { position:fixed; right:20px; bottom:74px; z-index:9001; width:340px; max-width:calc(100vw - 40px); max-height:calc(100vh - 110px); overflow:auto; background:var(--card); border-radius:16px; box-shadow:0 22px 55px rgba(9,20,50,.32); padding:20px; }
.fb-title { font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--ink); }
.fb-sub { color:var(--muted); font-size:13px; margin-bottom:6px; }
.fb-lbl { font-family:var(--font-display); font-size:13.5px; font-weight:800; color:var(--ink); margin:15px 0 8px; }
.fb-cats { display:flex; gap:8px; }
.fb-cat { flex:1; padding:11px 6px; border:1px solid #d7deec; background:var(--card); color:var(--ink); border-radius:10px; font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; }
.fb-cat:hover { border-color:var(--blue); }
.fb-cat.active { background:var(--blue); color:var(--on-blue,#fff); border-color:var(--blue); }
.fb-pop textarea, .fb-pop input { width:100%; box-sizing:border-box; font-family:inherit; font-size:15px;
  color:var(--ink); background:#fafcff; border:1.5px solid #dbe4f5; border-radius:12px; padding:12px 14px; outline:none;
  transition:border-color .15s, box-shadow .15s; }
.fb-pop textarea { resize:vertical; line-height:1.5; }
.fb-pop textarea:focus, .fb-pop input:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%, transparent); }
.fb-pop textarea::placeholder, .fb-pop input::placeholder { color:#9fb0cb; }
.fb-count { font-size:11px; color:var(--muted); text-align:right; margin-top:4px; }
.fb-hint { font-size:12.5px; color:var(--muted); margin-top:6px; }
.fb-actions { display:flex; gap:10px; margin-top:16px; }
.fb-thanks { text-align:center; font-weight:800; color:var(--ink); font-size:34px; padding:34px 10px; }
.fb-thanks div { font-size:17px; margin-top:10px; }
.waiting { text-align:center; color:var(--muted); padding:40px 0; font-size:18px; }
.pill { display:inline-block; background:var(--blue-light); color:var(--blue-dark); padding:6px 14px; border-radius:999px; font-weight:700; font-size:14px; }

/* omraadekort */
.area-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px; }
.area-card {
  background:var(--card); border:2px solid transparent; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:24px 18px; text-align:center; cursor:pointer; transition:border .15s, transform .1s; font-family:inherit;
}
.area-card:hover { border-color:var(--blue); transform:translateY(-3px); }
.area-card.done { border-color:var(--green); }
.area-ico { font-size:46px; }
.area-nm { font-weight:800; font-size:18px; margin-top:8px; color:var(--ink); }
.area-prog { color:var(--muted); font-size:14px; margin-top:6px; font-weight:600; }
.area-card.done .area-prog { color:var(--green-dark); }

/* OMRAADE-VISNING: node/streg-graf (hub = omraade, noder = opgaver) */
.area-graph { position:relative; width:100%; height:min(74vh,660px); }
.area-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.area-lines path { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
/* Kant i skolens primærfarve (en snært) + grundskygge = dybde i selve stregen */
.area-lines .ln-base { stroke:color-mix(in srgb, var(--blue) 55%, #ffffff); stroke-width:8; filter:drop-shadow(0 2px 4px rgba(0,20,60,.4)); }
/* Hvid gradient-kabel ovenpå - lader en tynd farvet kant stå på hver side */
.area-lines .ln-core { stroke:url(#lnGrad); stroke-width:4.5; }
.area-hub, .task-node { position:absolute; transform:translate(-50%,-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; background:none; border:none; cursor:pointer; font-family:var(--font-display); animation:flyUp .6s cubic-bezier(.2,.8,.3,1.3) both; }
.area-hub { cursor:default; }
/* Medaljon-look: farvet ring (følger --blue) + blank indre flade + dybde */
.nd-disc { position:relative; border-radius:50%; border:none;
  background:linear-gradient(160deg, color-mix(in srgb,var(--blue) 72%, #fff) 0%, var(--blue) 55%, var(--blue-dark) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 36px rgba(8,24,64,.5), inset 0 2px 4px rgba(255,255,255,.5), inset 0 -7px 15px rgba(0,10,40,.42);
  transition:transform .16s ease, box-shadow .16s ease; }
.nd-disc::before { content:''; position:absolute; inset:8px; border-radius:50%;
  background:radial-gradient(circle at 40% 30%, #ffffff 0%, #eef4fd 58%, #d7e3f6 100%);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.95), inset 0 -8px 16px rgba(70,100,160,.22); }
.nd-inner, .nd-ico, .nd-ico-img, .nd-check { position:relative; z-index:1; }
.area-hub .nd-disc { width:150px; height:150px; }
.area-hub .nd-disc::before { inset:10px; }
.area-hub .nd-ico { font-size:108px; }
.task-node .nd-disc { width:104px; height:104px; }
.task-node:hover .nd-disc { transform:translateY(-6px) scale(1.07); box-shadow:0 28px 46px rgba(8,24,64,.56), inset 0 2px 4px rgba(255,255,255,.5), inset 0 -7px 15px rgba(0,10,40,.42); }
.task-node:active .nd-disc { transform:translateY(-2px) scale(1.02); }
.nd-ico { font-size:84px; line-height:1; filter:drop-shadow(0 3px 4px rgba(0,0,0,.22)); }
.nd-ico-img { width:86%; height:86%; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.25)); }
.nd-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.nd-word { font-family:var(--font-display); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; color:#5a80c0; margin-bottom:2px; white-space:nowrap; }
.nd-no { font-family:var(--font-display); font-weight:800; font-size:30px; color:#16305e; line-height:1; }   /* fast mørk - altid læsbar uanset skolens primærfarve */
.task-node.done .nd-word { color:#b08a2a; }
.area-graph.dense .nd-word { font-size:8.5px; }
.area-graph.dense .task-node .nd-no { font-size:24px; }
@media (max-width:680px){ .nd-word{font-size:8px;} }
.nd-check { position:absolute; right:0; bottom:0; width:30px; height:30px; border-radius:50%; background:linear-gradient(180deg,#ffd75e,#f2b400); color:#fff; font-weight:900; font-size:16px; display:flex; align-items:center; justify-content:center; border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.32); }
.nd-label { position:relative; z-index:2; font-family:var(--font-display); background:linear-gradient(180deg,#ffffff,#e9f1fc); color:#1a2b47; font-weight:700; padding:8px 16px; border-radius:18px; font-size:14px; white-space:normal; max-width:220px; text-align:center; line-height:1.25; border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); box-shadow:0 9px 20px rgba(0,20,60,.32), inset 0 1px 0 #fff; }
.area-hub .nd-label { font-size:18px; padding:11px 24px; letter-spacing:.5px; text-transform:uppercase; }
.nd-label small { color:#5a80c0; font-weight:700; margin-left:5px; }
.task-node.done .nd-disc { background:linear-gradient(160deg,#ffe08a 0%,#f2b400 55%,#c98a12 100%); box-shadow:0 20px 36px rgba(150,110,10,.5), inset 0 2px 4px rgba(255,255,255,.55), inset 0 -7px 15px rgba(90,60,0,.4); }
.task-node.done .nd-disc::before { background:radial-gradient(circle at 40% 30%, #fffdf5 0%, #fff3d4 58%, #ffe6a8 100%); box-shadow:inset 0 2px 6px rgba(255,255,255,.95), inset 0 -8px 16px rgba(150,110,20,.2); }
.task-node.done .nd-no { color:#a9801f; }
.task-node.done .nd-label { background:linear-gradient(180deg,#fff8e6,#ffeec0); color:#8a6300; }
.task-node.done .nd-label small { color:#b08a2a; }
.area-graph.dense .task-node .nd-disc { width:90px; height:90px; }
.area-graph.dense .task-node .nd-no { font-size:27px; }
.area-graph.dense .nd-label { font-size:12.5px; padding:6px 13px; max-width:170px; }
@media (max-width:680px){ .area-hub .nd-disc{width:118px;height:118px;} .task-node .nd-disc{width:84px;height:84px;} .nd-ico{font-size:58px;} .nd-no{font-size:26px;} .nd-label{font-size:12px;padding:6px 12px;} .area-hub .nd-label{font-size:14px;} }

/* NIVEAU 2: intro-boks til venstre + node/streg-graf til hoejre */
/* Sandkasse ("Prøv spillet"): skjul hemmelig-kode-pillen (ingen gruppe) + vis-svar-boks */
body.sandbox #keyTag { display:none; }
.reveal-box { margin-top:12px; padding:14px 16px; border-radius:12px; background:color-mix(in srgb, var(--gold) 16%, #fff); border:1px solid color-mix(in srgb, var(--gold) 45%, #e0e6f0); color:#16305e; font-size:15px; line-height:1.5; }
/* Hint-boks (kun for berettigede grupper) - tydelig, varm gul */
.task-hint { margin:14px 0 18px; padding:13px 16px; border-radius:14px; background:linear-gradient(180deg,#fff8e6,#ffefc7); border:1px solid #f0d488; color:#5c4a12; font-size:16px; line-height:1.5; box-shadow:0 8px 18px rgba(180,140,20,.20), inset 0 1px 0 #fff; }
.task-hint a { color:#1b57c9; text-decoration:underline; font-weight:800; overflow-wrap:anywhere; }
.task-hint a:hover { color:#123f96; }
.th-lbl { font-family:var(--font-display); font-weight:800; color:#a9801f; margin-right:6px; }
/* Illustrations-billede paa en opgave (tegning, graf, foto) */
.task-illu { display:block; max-width:100%; max-height:360px; margin:0 auto 18px; border-radius:14px; border:1px solid #dbe4f0; box-shadow:0 8px 22px rgba(20,40,80,.12); background:#fff; }
/* MC med billed-svar */
/* --- Par svar: to blandede kolonner, klik-forbind med streg --- */
.pair-wrap { position:relative; margin-top:6px; }
.pair-lines { position:absolute; inset:0; pointer-events:none; z-index:2; overflow:visible; }
.pair-cols { display:flex; gap:52px; align-items:flex-start; position:relative; z-index:1; }
.pair-col { flex:1; display:flex; flex-direction:column; gap:12px; min-width:0; }
.pair-card { display:flex; align-items:center; gap:11px; background:#fff; border:2px solid #dbe4f5; border-radius:12px;
  padding:13px 15px; font-size:15px; font-weight:700; color:var(--ink); cursor:pointer; text-align:left; transition:border-color .12s, box-shadow .12s, background .12s; }
.pair-card .pc-tx { flex:1; min-width:0; }
.pair-card .pc-dot { flex:0 0 auto; width:14px; height:14px; border-radius:50%; border:2px solid #c3d0e6; background:#fff; }
.pair-card:hover { border-color:var(--blue); }
.pair-card.linked { border-color:var(--pc,var(--blue)); }
.pair-card.linked .pc-dot { background:var(--pc,var(--blue)); border-color:var(--pc,var(--blue)); }
.pair-card.picked { border-color:var(--blue); background:var(--blue-light); box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 38%,transparent); transform:scale(1.02); }
.pair-card.picked .pc-dot { background:var(--blue); border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 30%,transparent); }
.pair-card.correct { border-color:var(--green); background:color-mix(in srgb,var(--green) 8%,#fff); cursor:default; }
.pair-card.correct .pc-dot { background:var(--green); border-color:var(--green); }
.pair-card.pc-wrong { border-color:var(--red); background:color-mix(in srgb,var(--red) 8%,#fff); }
.pair-card.locked { cursor:default; }
/* --- Bilag (fx "Vigtige tal"): knap + overlay eleverne kan åbne mens de regner --- */
.bilag-btn { display:inline-flex; align-items:center; gap:9px; background:#fff; border:2px solid var(--gold,#c79a3a); color:#8a6a1a; border-radius:12px; padding:11px 18px; font-family:var(--font-display); font-weight:800; font-size:15px; cursor:pointer; margin:0 0 14px; }
.bilag-btn:hover { background:#fff8ec; }
.bilag-overlay { position:fixed; inset:0; background:rgba(20,35,60,.5); z-index:9999; display:flex; align-items:flex-start; justify-content:center; padding:4vh 16px; overflow:auto; }
.bilag-panel { background:#fff; border-radius:16px; max-width:820px; width:100%; box-shadow:0 24px 60px rgba(20,40,80,.35); overflow:hidden; }
.bilag-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 20px; background:var(--ink,#16233d); color:#fff; font-family:var(--font-display); font-weight:800; font-size:18px; }
.bilag-luk { background:rgba(255,255,255,.15); border:none; color:#fff; width:36px; height:36px; border-radius:9px; font-size:18px; cursor:pointer; }
.bilag-luk:hover { background:rgba(255,255,255,.28); }
.bilag-body { display:grid; grid-template-columns:1fr 1fr; }
.bilag-col { padding:18px 22px; }
.bilag-col.frm { background:#f8fafd; border-left:1px solid #e6ecf6; }
.bl-lbl { font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
.bl-row { font-size:15.5px; padding:7px 0; border-bottom:1px dashed #e6ecf6; }
.bl-row:last-child { border-bottom:none; }
.bl-formel { font-size:14.5px; line-height:1.45; color:#28364f; margin:0 0 12px; }
.bl-formel:last-child { margin-bottom:0; }
.bilag-billede { padding:16px; background:#f8fafd; }
.bilag-billede img { display:block; width:100%; height:auto; border-radius:10px; }
@media (max-width:640px){ .bilag-body { grid-template-columns:1fr; } .bilag-col.frm { border-left:none; border-top:1px solid #e6ecf6; } }
.img-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; }
.img-opt { position:relative; cursor:pointer; border:3px solid #dbe4f0; border-radius:16px; background:#fff; padding:12px; display:flex; flex-direction:column; align-items:center; gap:8px; transition:transform .1s, border-color .12s, box-shadow .12s; }
.img-opt:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(20,40,80,.14); }
.img-opt img { width:100%; max-width:140px; aspect-ratio:1/1; object-fit:contain; pointer-events:none; }
.img-opt.selected { border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 28%, transparent); }
.img-opt.correct { border-color:var(--green); box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 34%, transparent); }
.img-opt.wrong { border-color:var(--red); box-shadow:0 0 0 4px color-mix(in srgb, var(--red) 30%, transparent); }
.io-lb { font-size:13px; color:#1a2b47; font-weight:600; text-align:center; }
/* "Videre"-knap efter korrekt svar - eleverne ser foerst den groenne markering, klikker selv videre */
.btn-continue { background:linear-gradient(180deg, var(--green), var(--green-dark)); border-color:var(--green-dark); animation:contPop .28s ease-out; }
.btn-continue:hover { filter:brightness(1.06); }
/* Løst opgave: felterne er låst, og alt der ikke er svaret dæmpes, saa det TYDELIGT er færdigt */
#taskCard.loest .opt:not(.correct):not(.wrong),
#taskCard.loest .img-opt:not(.correct):not(.wrong),
#taskCard.loest .item-card:not(.correct):not(.selected),
#taskCard.loest .pair-card:not(.picked) { opacity:.42; }
#taskCard.loest .opt, #taskCard.loest .img-opt, #taskCard.loest .item-card, #taskCard.loest .box { cursor:default; }
/* "Videre"-knappen efter en løst opgave: klar grøn + pulserende, saa eleverne ser næste skridt (og ikke tror de stadig skal svare) */
.btn-continue.go { background:linear-gradient(180deg,#3ecf74,#1e9e5a) !important; border-color:#1c7a43 !important; color:#fff !important; animation:knapPuls 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce){ .btn-continue.go { animation:none; box-shadow:0 0 0 4px rgba(33,192,101,.30); } }
@keyframes contPop { from { transform:scale(.96); opacity:0; } to { transform:scale(1); opacity:1; } }
.reveal-box b { color:#8a6300; }
/* Tilbage-knap fast i nederste venstre hjørne (som spillet) */
.game-back { position:fixed; left:30px; bottom:24px; z-index:40; width:auto !important; margin:0 !important; border:2px solid var(--blue) !important; }
/* === Tema-rammer (følger skolens valgte --blue) ===
   Kun de STORE bokse rammes ind - ikke knapperne. "Tilbage til"-knapperne (som du bad om)
   beholder deres kraftige ramme. */
#backBtn, #tvBack, #resBack, #statsBack, #edBack,
#backTo1, #backTo2a, #backTo2b { border:2px solid var(--blue) !important; }
/* DISKRET ramme: store design-bokse + dropdown-menuer + modaler (også admin).
   !important fordi en generel .side-card/.main-card-regel laengere nede ellers overtrumfer. */
.main-card, .side-card, .popup, .admin-card, .landing-card, .tv-side, .tv-main, select {
  border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff) !important; }
.side-card.acc.open { border-color:var(--blue) !important; }
/* Guide-/hjælpeknapper: FAST gul (samme "hjælp"-sprog som Hint), uafhængig af skolens primærfarve.
   Gul = blid vejledning, rød (Akut hjælp) = akut. */
#edTourBtn, #tourBtn, #tvTourBtn, .wp-tour {
  background:linear-gradient(180deg,#ffd76a,#f7be1e 55%,#eaa900) !important;
  color:#4a3500 !important; border:1px solid rgba(0,0,0,.15) !important;
  box-shadow:var(--hi), 0 5px 13px rgba(230,160,0,.34) !important; }
#edTourBtn:hover, #tourBtn:hover, #tvTourBtn:hover, .wp-tour:hover { filter:brightness(1.05); }
/* Samme faste højde på alle topbjælke-piller (guide, Akut hjælp, Log ud), så de flugter 100% */
#edTourBtn, #tourBtn, #tvTourBtn, .btn-mini.sos-mini, .btn-mini.btn-logout {
  display:inline-flex; align-items:center; box-sizing:border-box; line-height:1; min-height:49px; padding:15px 16px; }
#edTourBtn, #tourBtn, #tvTourBtn { gap:8px; padding:15px 16px !important; font-size:14px; }
/* ALLE topbjælke-knapper (Tilbage til kontrolpanelet + guide-knap + Akut hjælp + Log ud) EKSAKT
   samme højde, så de flugter perfekt på tværs af venstre/højre og alle views. */
#edBack, #tvBack, #resBack, #statsBack, #backBtn,
#edTourBtn, #tourBtn, #tvTourBtn, .btn-mini.sos-mini, .btn-mini.btn-logout {
  height:49px !important; min-height:49px !important; box-sizing:border-box; }
/* Faste (IKKE tema-styrede) utility-knapper: Lærer-kode, Vis intro/start, Gå direkte til spil.
   Grøn "Klar"-puls bevares (undtaget). */
#masterBtn, .btn-mini[data-intro]:not(.pulse), .btn-mini[data-go] {
  background:#e8f0ff !important; color:#123a9e !important; }
#edTourBtn .ic, #tourBtn .ic, #tvTourBtn .ic { stroke:#4a3500 !important; }
.wp-tour .wp-tour-ic { stroke:#4a3500 !important; }
/* Subtil mørk kant på fyldte farvede knapper (samme trick som Akut hjælp) = skarpt defineret kant + tydeligere lys-skær i toppen */
.btn:not(.secondary), .side-btn, .fb-btn { border:1px solid rgba(0,0,0,.18); }
.area-layout { position:relative; }
.area-intro { background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 26px 54px rgba(6,18,52,.45); border:1px solid rgba(120,150,210,.28); }
/* Tema-ramme om de hvide bokse under spillet (elev + sandkasse): login-, opgave- og svar-kort. */
body.play .card { border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); }
.area-layout .area-intro { position:absolute; left:0; top:0; z-index:3; width:min(360px,42%); }
/* Loftet holdes lavt nok til at boksen ALDRIG vokser ned over udfordrings-boblerne,
   uanset hvor lang introen er. Er teksten længere, scroller den indeni (blød bund-fade hinter det). */
.area-layout .ai-body { max-height:min(38vh,290px); overflow:auto; scrollbar-width:thin; }
.area-layout .area-intro::after { content:""; position:absolute; left:0; right:0; bottom:0; height:24px;
  pointer-events:none; background:linear-gradient(rgba(255,255,255,0),#fff); border-radius:0 0 18px 18px; }
.ai-head { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; padding:15px 20px; font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:.4px; }
.ai-body { padding:16px 20px; font-size:16.5px; line-height:1.6; color:#2a3852; }
.area-layout .area-graph { width:100%; height:min(74vh,660px); }
@media (max-width:900px){ .area-layout .area-intro{ position:static; width:100%; margin-bottom:14px; } .area-layout .area-graph{ height:min(54vh,440px); } }

/* NIVEAU 3: intro-boks + premium opgaveliste til venstre.
   ch-left er bred nok til 2 opgave-kolonner; intro-boksen holdes smal for læsbarhed. */
.ch-left { width:min(940px,96%); padding-bottom:96px; }   /* luft under sidste opgave, saa den ikke gemmer sig bag den fastlaaste Tilbage-knap */
.ch-left .area-intro { max-width:460px; }
.ch-crumb { display:inline-flex; align-items:center; gap:14px; background:linear-gradient(180deg,#ffffff,#dbe4f4); color:#1a2b47; font-family:var(--font-display); font-weight:800; font-size:23px; text-transform:uppercase; letter-spacing:.8px; padding:17px 34px; border-radius:999px; border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -7px 11px rgba(0,20,60,.16), 0 14px 30px rgba(0,20,60,.36); margin-bottom:16px; }
.ch-crumb img { height:42px; width:auto; }
.ch-oph { font-family:var(--font-display); font-size:13.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#fff; text-shadow:0 1px 2px rgba(0,12,32,.95), 0 2px 12px rgba(0,12,32,.8), 0 0 2px rgba(0,12,32,.9); margin:16px 0 12px 4px; }
/* Én kolonne ved få opgaver (luftigt, meget baggrund). To kolonner ved 4+, så alt
   er synligt uden scroll - klassen 'cols-2' sættes i showChallenge ud fra antal. */
#chOpgList { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; max-width:460px; }
/* 2 kolonner: TÆL lodret (kolonne-først) - opg 1,2,3 ned ad venstre, så 4,5 ned ad højre.
   --opg-rows sættes i showChallenge = ceil(antal/2), så rækkeantallet passer. */
#chOpgList.cols-2 { grid-auto-flow:column; grid-template-rows:repeat(var(--opg-rows,1),auto); grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-columns:minmax(0,1fr); gap:12px 16px; max-width:none; }
@media (max-width:980px){ #chOpgList.cols-2 { grid-auto-flow:row; grid-template-rows:auto; grid-template-columns:minmax(0,1fr); max-width:460px; } }
@keyframes cardIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.opg-card { display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:linear-gradient(180deg,#fff,#f2f7ff); border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); border-radius:15px; padding:12px 16px; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), 0 10px 22px rgba(6,18,52,.26); cursor:pointer; font-family:inherit; animation:cardIn .42s ease both; transition:transform .14s ease, box-shadow .16s ease; }
.opg-card:hover { transform:translateY(-2px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), 0 16px 30px rgba(6,18,52,.34); }
.opg-medal { width:46px; height:46px; flex:0 0 auto; border-radius:50%; background:linear-gradient(160deg,color-mix(in srgb,var(--blue) 72%,#fff),var(--blue) 55%,var(--blue-dark)); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 12px rgba(8,24,64,.4), inset 0 2px 3px rgba(255,255,255,.5); }
.opg-medal-in { width:32px; height:32px; border-radius:50%; background:radial-gradient(circle at 40% 30%,#fff,#eef4fd 60%,#d7e3f6); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:18px; color:#16305e; }
.opg-txt { flex:1; min-width:0; }
.opg-txt b { display:block; font-family:var(--font-display); font-weight:800; font-size:15px; color:#1a2b47; }
.opg-txt span { font-size:13px; color:#5a80c0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.opg-pts { font-weight:800; font-size:13px; color:#2f6fd8; white-space:nowrap; }
.opg-chev { font-size:22px; color:#9db4d6; line-height:1; }
.opg-card.done .opg-medal { background:linear-gradient(160deg,#ffe08a,#f2b400 55%,#c98a12); }
.opg-card.done .opg-medal-in { background:radial-gradient(circle at 40% 30%,#fffdf5,#fff3d4 60%,#ffe6a8); color:#8a6300; }
.opg-card.done .opg-pts { color:#a9801f; }
/* Kæde-lås: opgave låst indtil forkravs-opgaven er løst */
.opg-card.laast { opacity:.66; cursor:default; box-shadow:0 4px 12px rgba(6,18,52,.14); }
.opg-card.laast:hover { transform:none; box-shadow:0 4px 12px rgba(6,18,52,.14); }
.opg-card.laast .opg-medal { background:linear-gradient(160deg,#c6cede,#9aa6ba); }
.opg-card.laast .opg-medal-in { background:radial-gradient(circle at 40% 30%,#fff,#eef1f6 60%,#dbe1eb); color:#7a8698; font-size:19px; }
.opg-card.laast .opg-txt span { color:#93a0b5; font-weight:600; }

/* opgaveliste i omraade (gammel liste - bruges ikke længere, beholdt for sikkerheds skyld) */
.task-row {
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--card); border:2px solid #dbe4f5; border-radius:14px; box-shadow:var(--shadow);
  padding:16px 18px; margin-bottom:10px; cursor:pointer; font-family:inherit; transition:border .12s;
}
.task-row:hover { border-color:var(--blue); }
.task-row.done { border-color:var(--green); background:#f2fbf5; }
.task-no { width:32px; height:32px; flex:0 0 auto; border-radius:50%; background:var(--blue-light); color:var(--blue-dark); font-weight:800; display:flex; align-items:center; justify-content:center; }
.task-row.done .task-no { background:var(--green); color:#fff; }
.task-nm { flex:1; font-weight:700; font-size:17px; color:var(--ink); }
.task-badge { font-size:13px; font-weight:700; color:var(--muted); }
.task-row.done .task-badge { color:var(--green-dark); }
@media (max-width:560px){ .roles{grid-template-columns:1fr;} .avatar-grid{grid-template-columns:repeat(2,1fr);} .cats{grid-template-columns:1fr;} }

/* ============================================================
   PREMIUM LØFT  -  dybde, glød, tykke kanter, raffineret typografi
   Alt via CSS-variabler, saa det foelger skolens farver og alle 3 temaer.
   ============================================================ */
:root {
  --e1: 0 1px 2px rgba(18,36,80,.06), 0 3px 8px rgba(18,36,80,.07);
  --e2: 0 6px 14px rgba(18,36,80,.09), 0 16px 36px rgba(18,36,80,.11);
  --e3: 0 14px 32px rgba(18,36,80,.13), 0 34px 70px rgba(18,36,80,.16);
  --ring-c: rgba(24,50,110,.10);          /* hairline-kant, lys tema */
  --hi: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -4px 7px rgba(0,0,0,.19);   /* lyst skær i top + indvendig bund-bevel = dybde */
}
body.theme-prestige {
  --e1: 0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.4);
  --e2: 0 6px 16px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.5);
  --e3: 0 16px 40px rgba(0,0,0,.55), 0 40px 80px rgba(0,0,0,.6);
  --ring-c: rgba(150,180,230,.20);        /* lys hairline paa moerk flade */
  --hi: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -4px 7px rgba(0,0,0,.30);
}

/* ---- Blød, naturlig bevaegelse paa alt interaktivt ---- */
.btn, .side-btn, .btn-mini, .lb-btn, .page-tab, .tadj, .side-card, .fb-btn, .grund-thumb, .plate-choice button, .mc-btn { transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, filter .18s ease, background .18s ease; }

/* ---- KORT: tykkere, tydeligere kant + skygge i lag ---- */
.main-card, .card, .side-card, .lb-card, .tv-side, .tv-main { border: 1px solid var(--ring-c); box-shadow: var(--e2); }
.main-card { box-shadow: var(--e3); }
.lb-card { box-shadow: var(--e3); }

/* ---- PRIMÆR-KNAP: gradient + brand-gloed + top-highlight + tryk ---- */
.btn {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 84%, #fff) 0%, var(--blue) 52%, var(--blue-dark) 100%);
  box-shadow: var(--hi), 0 6px 16px color-mix(in srgb, var(--blue) 40%, transparent), var(--e1);
  letter-spacing:.2px;
}
.btn:hover { transform: translateY(-2px); background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 90%, #fff) 0%, var(--blue) 50%, var(--blue-dark) 100%); box-shadow: var(--hi), 0 12px 28px color-mix(in srgb, var(--blue) 48%, transparent), var(--e2); }
.btn:active { transform: translateY(0); box-shadow: var(--hi), 0 4px 12px color-mix(in srgb, var(--blue) 34%, transparent); }
.btn.secondary { background: linear-gradient(180deg,#fff,#eef3ff); color: var(--blue-dark); box-shadow: var(--hi), var(--e1); border:1px solid var(--ring-c); }
.btn.secondary:hover { transform: translateY(-2px); background: linear-gradient(180deg,#fff,#e2ecff); box-shadow: var(--e2); }

/* ---- HANDLINGS-KNAP (groen) ---- */
.btn.green { background: linear-gradient(180deg, color-mix(in srgb, var(--green) 86%, #fff) 0%, var(--green) 54%, var(--green-dark) 100%); box-shadow: var(--hi), 0 6px 16px color-mix(in srgb, var(--green) 38%, transparent), var(--e1); }
.btn.green:hover { transform: translateY(-2px); box-shadow: var(--hi), 0 12px 28px color-mix(in srgb, var(--green) 46%, transparent), var(--e2); }
.btn.green:active { transform: translateY(0); }

/* ---- SIDEBAR-KNAPPER: samme dybde ---- */
.side-btn { background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 84%, #fff), var(--blue) 55%, var(--blue-dark)); box-shadow: var(--hi), 0 5px 14px color-mix(in srgb, var(--blue) 34%, transparent), var(--e1); letter-spacing:.2px; }
.side-btn:hover { transform: translateY(-2px); box-shadow: var(--hi), 0 11px 24px color-mix(in srgb, var(--blue) 44%, transparent), var(--e2); }
.side-btn:active { transform: translateY(0); }

/* ---- MINI-KNAP + tidsjustering: lille loft ---- */
.btn-mini { box-shadow: var(--hi), var(--e1); }
.btn-mini:hover { transform: translateY(-1px); box-shadow: var(--e2); }
.tadj:hover { transform: translateY(-1px); }

/* ---- TOPBAR: gradient + dybde + fin bundstribe ---- */
.topbar { background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 82%, #fff), var(--blue) 60%, var(--blue-dark)); box-shadow: 0 6px 20px color-mix(in srgb, var(--blue) 26%, transparent), inset 0 -2px 0 rgba(0,0,0,.14), var(--hi); }
/* Wordmark: let emboss saa den loefter sig fra baggrunden */
.topbar .brand { text-shadow: 0 1px 0 rgba(0,0,0,.22), 0 2px 10px rgba(0,0,0,.20); }
/* Skolenavn-pille: rigtig plade med kant, top-highlight og skygge - ikke flad */
.topbar .score { background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.11)); border: 1px solid rgba(255,255,255,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.40), 0 3px 10px rgba(0,0,0,.16); text-shadow: 0 1px 2px rgba(0,0,0,.22); }
/* Prestige: guld-tonet pille der matcher navy+guld */
body.theme-prestige .topbar .brand { text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.30); }
body.theme-prestige .topbar .score { background: linear-gradient(180deg, rgba(230,173,87,.24), rgba(230,173,87,.10)); border-color: rgba(230,173,87,.44); box-shadow: inset 0 1px 0 rgba(255,222,160,.32), 0 3px 10px rgba(0,0,0,.30); color:#f4dca6; }

/* ---- TÆLLERE: store tal med tabular-cifre + brand-gradient ---- */
.counter .cnum { font-variant-numeric: tabular-nums; letter-spacing:.5px; }
.clbl { letter-spacing:1.2px; }

/* ---- POINTTAVLENS rækker: blødt loft + venstre accent ---- */
.lb-row { box-shadow: var(--e1); }
.lb-rank { box-shadow: 0 3px 8px rgba(18,36,80,.18); }

/* ---- Fliptimer-cifre: lidt ekstra dybde ---- */
.fliptimer .d { box-shadow: 0 6px 16px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.7); }

/* ---- Synlig, pæn fokus-ring (tilgaengelighed) ---- */
.btn:focus-visible, .side-btn:focus-visible, .btn-mini:focus-visible, .lb-btn:focus-visible, .tadj:focus-visible, .fb-btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .grund-thumb:focus-visible, .plate-choice button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 55%, transparent); outline-offset: 2px;
}

/* ---- Feedback-knap: gloed saa den foeles levende ---- */
.fb-btn { box-shadow: var(--hi), 0 8px 22px color-mix(in srgb, var(--green) 42%, transparent), var(--e1); }
.fb-btn:hover { transform: translateY(-2px); box-shadow: var(--hi), 0 14px 30px color-mix(in srgb, var(--green) 52%, transparent), var(--e2); }

/* ===== FORSIDE / LANDING (elev-indgang) ===== */
body.landing { min-height:100vh; margin:0; font-family:var(--font-body); }
/* AI-baggrund med samme diskrete mørke filter som login; gradienten er fallback hvis billedet ikke loader */
/* Reserve-stillbilledet ligger BAG videoen og beholder sit moerke sloer - det er det lyse
   originalbillede, som ellers ville overdoeve login-boksen. Videoen er farvejusteret i forvejen
   og faar derfor INTET filter, saa den vises praecis som lavet. */
.landing-bg { position:fixed; inset:0; z-index:-1; overflow:hidden;
  background: linear-gradient(rgba(16,34,78,.34), rgba(16,34,78,.48)),
              url('img/baggrund-login.png') center center / cover no-repeat,
              linear-gradient(180deg, #bcd7f5 0%, #8fb6e6 42%, #4f79c0 100%); }
.landing-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Har eleven slaaet "reducér bevaegelse" til, vises stillbilledet i stedet */
@media (prefers-reduced-motion: reduce){ .landing-video { display:none; } }
.landing-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px; box-sizing:border-box; }
.landing-card { width:100%; max-width:440px; background:#fff; border-radius:24px; overflow:hidden;
  box-shadow:0 40px 90px rgba(6,18,50,.42), 0 4px 14px rgba(6,18,50,.20); border:1px solid rgba(120,150,210,.24); }
.lc-head { background:linear-gradient(180deg,#eaf2fc,#dbe9fb); padding:24px 30px; border-bottom:1px solid rgba(120,150,210,.24); }
.lc-badge { font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:1px; color:var(--blue-dark); }
.lc-body { padding:26px 30px 30px; }
.lc-title { font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--ink); margin:0 0 4px; }
.lc-sub { color:var(--muted); margin:0 0 18px; font-size:15px; }
.lc-input { width:100%; box-sizing:border-box; background:#eef4fc; border:2px solid #cddcf1; border-radius:14px; padding:16px 18px; font-size:20px; font-family:inherit; font-weight:700; color:var(--ink); outline:none; text-align:center; letter-spacing:3px; }
.lc-input:focus { border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%, transparent); background:#fff; }
.lc-input::placeholder { letter-spacing:normal; font-weight:600; color:#9fb2cf; }
.lc-btn { width:100%; margin-top:16px; font-size:18px; padding:16px; }
/* ---- Vælg-spil-skærm: premium spil-knapper (dybe farver, blød emboss/relief, spil-mærke + puls) ---- */
.vsp-list { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.vsp-btn { position:relative; display:flex; align-items:center; gap:14px; width:100%; padding:15px 18px; border:none; border-radius:16px; cursor:pointer; text-align:left; color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c,#1b4fd8) 80%, #fff) 0%, var(--c,#1b4fd8) 46%, color-mix(in srgb, var(--c,#1b4fd8) 82%, #000) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -7px 15px rgba(0,0,0,.26), 0 10px 24px color-mix(in srgb, var(--c,#1b4fd8) 42%, transparent);
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease; }
.vsp-btn:hover { transform:translateY(-2px);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.58), inset 0 -7px 15px rgba(0,0,0,.24), 0 16px 34px color-mix(in srgb, var(--c,#1b4fd8) 52%, transparent); }
.vsp-btn:active { transform:translateY(0); box-shadow: inset 0 2px 7px rgba(0,0,0,.32), 0 6px 14px color-mix(in srgb, var(--c,#1b4fd8) 36%, transparent); }
.vsp-mark { flex:0 0 auto; width:46px; height:46px; border-radius:13px; box-sizing:border-box; border:1.5px solid rgba(255,255,255,.42); background:var(--m) center/contain no-repeat;
  box-shadow:0 3px 10px rgba(0,0,0,.30); animation:vsp-mark-puls 3.2s ease-in-out infinite; }
@keyframes vsp-mark-puls { 0%,100%{ box-shadow:0 3px 10px rgba(0,0,0,.30), 0 0 0 0 rgba(255,255,255,0); } 50%{ box-shadow:0 3px 10px rgba(0,0,0,.30), 0 0 0 6px rgba(255,255,255,.16); } }
.vsp-txt { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.vsp-navn { font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:.3px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.30); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vsp-spil { font-size:12.5px; font-weight:700; opacity:.92; margin-top:2px; text-shadow:0 1px 1px rgba(0,0,0,.22); }
.vsp-arrow { flex:0 0 auto; font-size:15px; opacity:.85; text-shadow:0 1px 2px rgba(0,0,0,.28); }
@media (prefers-reduced-motion: reduce){ .vsp-mark { animation:none; } }
.landing .error { color:#c0392b; font-weight:700; margin-top:10px; text-align:center; min-height:0; }
/* Kryds-linket mellem elev- og underviser-login. Samme udseende og placering paa BEGGE sider:
   en fast hvid pille under kortet. Den gamle gennemsigtige hvide druknede i den lyse baggrund. */
.cross-link { display:inline-flex; align-items:center; gap:9px; text-decoration:none; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--blue-dark); border:1px solid rgba(120,150,210,.34);
  border-radius:999px; padding:13px 26px; font-family:var(--font-display); font-weight:800; font-size:15px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:var(--hi), 0 10px 26px rgba(6,18,50,.24); transition:transform .14s, box-shadow .14s, background .14s; }
.cross-link:hover { background:#fff; transform:translateY(-2px); box-shadow:var(--hi), 0 14px 32px rgba(6,18,50,.30); }
/* Adgang til admin - kun paa underviser-siden, og bevidst kedelig, saa ingen faar lyst til at klikke */
.drift-link { position:fixed; bottom:14px; right:16px; color:rgba(255,255,255,.55); font-size:11px; text-decoration:none; font-weight:600; letter-spacing:.5px; }
.drift-link:hover { color:rgba(255,255,255,.9); }

/* Samme AI-baggrund på login-skærmene (før man er logget ind) - fjernes når man er inde.
   Første gradient-lag = et diskret mørkt filter oven på det lyse billede. */
/* Ligger BAG videoen som reserve - beholder sit sloer af samme grund som .landing-bg */
body.preauth { background: linear-gradient(rgba(16,34,78,.34), rgba(16,34,78,.48)), url('img/baggrund-login.png') center center / cover no-repeat fixed, linear-gradient(180deg,#bcd7f5,#4f79c0) !important; }
/* Videoen vises KUN paa login-skaermen - forsvinder i samme oejeblik man er logget ind */
body:not(.preauth) #loginBg { display:none; }
body.preauth #topbar { display:none; }                    /* rent, centreret login uden app-topbar */
/* Kort + kryds-pille stables lodret, praecis som paa elevernes forside */
body.preauth #wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px; box-sizing:border-box; }
/* Kryds-pille og drift-link hoerer kun til login-skaermen */
body:not(.preauth) #toElev, body:not(.preauth) .drift-link { display:none; }
body.preauth #loginCard { margin:0; box-shadow:0 40px 90px rgba(6,18,50,.46), 0 4px 14px rgba(6,18,50,.22); }

/* ===== PORTAL / SPIL-UNIVERS (overordnet landingsside) ===== */
body.portal { margin:0; min-height:100vh; font-family:var(--font-body);
  background:#eaf0f8 url('img/baggrund-portal.png') center/cover fixed no-repeat; }
/* Portal: stor premium navy-boks i det rolige venstre felt af baggrunden.
   Samme navy+guld-niveau som inde i spillet. Højre side af billedet (ikonerne)
   får lov at ånde. Spillene vises med deres RIGTIGE logoer - HTX-mærket her,
   de øvrige som stilrene rækker indtil deres logo er lavet. */
.pg-stage { min-height:100vh; display:flex; align-items:center; box-sizing:border-box; padding:38px 4vw; }
.pg-panel { position:relative; width:min(510px,46vw); min-width:340px; display:flex; flex-direction:column;
  padding:42px 42px 34px; box-sizing:border-box; border-radius:32px; color:#eaf1ff;
  background:linear-gradient(158deg, rgba(29,60,108,.95) 0%, rgba(11,25,54,.97) 100%);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border:1px solid rgba(230,173,87,.4);
  box-shadow:0 34px 80px rgba(6,16,40,.5), inset 0 1px 0 rgba(255,255,255,.10); }
.pg-panel::after { content:''; position:absolute; left:26px; right:26px; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(230,173,87,0), rgba(230,173,87,.8), rgba(230,173,87,0)); }
.pg-logo { font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:.3px; color:#fff; }
.pg-logo b { color:#e6ad57; }
.pg-h { font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.3vw,44px); line-height:1.04; margin:24px 0 8px; color:#fff; }
.pg-sub { color:#b8c8e6; font-weight:600; font-size:15.5px; margin:0 0 26px; line-height:1.45; }
.pg-games { display:flex; flex-direction:column; gap:11px; }
.pg-game { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 17px; border-radius:16px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); text-decoration:none;
  transition:transform .15s ease, background .15s ease, border-color .15s ease; }
.pg-game.live { background:rgba(255,255,255,.10); border-color:rgba(230,173,87,.5); cursor:pointer; }
.pg-game.live:hover { transform:translateX(4px); background:rgba(255,255,255,.16); }
.pg-gname { font-family:var(--font-display); font-weight:800; font-size:16px; color:#c9d6ee; }
.pg-status { font-weight:800; font-size:12.5px; letter-spacing:.3px; white-space:nowrap; }
.pg-status.open { color:#84e59b; }
.pg-status.soon { color:#7387a9; }
.pg-status.dev  { color:#e6ad57; }
/* Spil-logoer: mærke + ordmærke i spillets egen farve. Samme system som HTX (img/mark.svg).
   .gm-XXX genbruges DIREKTE i selve spillene når de bygges - mærkerne ligger i img/mark-XXX.svg. */
.gm { display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-display); font-weight:900;
  font-size:14px; color:#fff; padding:8px 15px 8px 11px; border-radius:999px; white-space:nowrap;
  box-shadow:0 6px 16px rgba(10,20,50,.35), inset 0 1px 0 rgba(255,255,255,.32); }
.gm::before { content:""; flex:0 0 auto; width:1.7em; height:1.7em; background:var(--gm-ic) center/contain no-repeat; }
.gm-htx   { background:#1b4fd8; --gm-ic:url('img/mark.svg'); }
.gm-stxhf { background:#4e9b38; --gm-ic:url('img/mark-stxhf.svg'); }
.gm-hhx   { background:#c9902f; --gm-ic:url('img/mark-hhx.svg'); }
.gm-eud   { background:#cf6c1c; --gm-ic:url('img/mark-eud.svg'); }
.gm-epx   { background:#6c7688; --gm-ic:url('img/mark-epx.svg'); }
.pg-game:not(.live) .gm { opacity:.82; }
/* Neutralt Oplevuddannelser-brand på det fælles login (uden HTX-mærket) */
.brand-xl.lw-oplev::before { content:none; }
.lw-oplev { gap:0; }
.lw-oplev b { color:var(--gold,#e6ad57); }
/* Rigtigt Oplevuddannelser-logo (lockup m. ikon) på hero'en - centreret + responsivt */
.lw-logo { display:block; margin:0 auto; width:clamp(280px,46vw,600px); height:auto;
  filter:drop-shadow(0 4px 20px rgba(6,18,50,.55)); }
.pg-cta { margin-top:auto; padding-top:26px; }
.pg-login2 { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; box-sizing:border-box;
  background:linear-gradient(180deg,#f4c064,#e0a03a); color:#3a2708; text-decoration:none;
  font-family:var(--font-display); font-weight:800; font-size:17px; padding:15px 20px; border-radius:14px;
  box-shadow:0 12px 26px rgba(210,150,40,.42), inset 0 1px 0 rgba(255,255,255,.55); transition:transform .15s ease, box-shadow .15s ease; }
.pg-login2:hover { transform:translateY(-2px); box-shadow:0 18px 36px rgba(210,150,40,.52), inset 0 1px 0 rgba(255,255,255,.55); }
.pg-login2 svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; }
@media (max-width:720px){ .pg-stage{ padding:16px; align-items:flex-start; } .pg-panel{ width:100%; min-width:0; } }
.portal-brand { position:fixed; top:16px; z-index:5; color:#fff; font-size:13px; line-height:1.25; text-shadow:0 2px 10px rgba(0,0,0,.55); pointer-events:none; }
.portal-brand b { display:block; font-family:var(--font-display); font-weight:800; font-size:15px; }
.portal-brand.left { left:22px; }
.portal-brand.right { right:22px; text-align:right; }
.portal-row { display:flex; min-height:100vh; }
.game-tile { position:relative; flex:1 1 0; min-width:0; min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:78px 18px 40px; box-sizing:border-box; text-decoration:none; overflow:hidden; border-left:3px solid rgba(9,18,44,.65); transition:flex-grow .3s ease; }
.game-tile:first-child { border-left:none; }
.game-tile::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,16,40,.12) 0%, rgba(8,16,40,0) 32%, rgba(8,16,40,.03) 62%, rgba(8,16,40,.30) 100%); }
.game-tile > * { position:relative; z-index:1; }
.gt-pill { font-family:var(--font-display); font-weight:800; font-size:clamp(15px,1.5vw,23px); color:#fff; padding:13px 22px; border-radius:13px; box-shadow:0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.28); text-align:center; line-height:1.15; }
.gt-pill.fam-tech { background:linear-gradient(180deg,#3a5bd0,#1e397e); }
.gt-pill.fam-gym  { background:linear-gradient(180deg,#6cae46,#437f2f); }
.gt-pill.fam-biz  { background:linear-gradient(180deg,#d9b24f,#a97f26); }
.gt-cta { margin-top:auto; }
.gt-enter { display:inline-block; background:#fff; color:var(--blue-dark); padding:13px 26px; border-radius:999px; font-family:var(--font-display); font-weight:800; font-size:15px; box-shadow:0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.6); transition:transform .16s ease, box-shadow .16s ease; }
.gt-badge { display:inline-block; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.42); color:#fff; padding:11px 20px; border-radius:999px; font-weight:800; font-size:13px; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.game-tile.live { cursor:pointer; }
.game-tile.live:hover { flex-grow:1.35; }
.game-tile.live:hover .gt-enter { transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.6); }
.game-tile.coming { filter:saturate(.9) brightness(.97); }
.game-tile.dev { filter:saturate(.68) brightness(.9); }
.gt-pill.fam-erhverv { background:linear-gradient(180deg,#e0873a,#b05516); }
.gt-pill.fam-dev { background:linear-gradient(180deg,#6b7688,#434c5c); }
/* Ét skole-login for hele portalen - fast pille øverst i midten, uanset spil */
.portal-login { position:fixed; top:15px; left:50%; transform:translateX(-50%); z-index:6;
  display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--blue-dark);
  padding:11px 24px; border-radius:999px; font-family:var(--font-display); font-weight:800; font-size:15px;
  text-decoration:none; box-shadow:0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .16s ease, box-shadow .16s ease; }
.portal-login:hover { transform:translateX(-50%) translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.6); }
.portal-login svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.portal-foot { position:fixed; bottom:0; left:0; right:0; text-align:center; padding:12px; color:rgba(255,255,255,.82); font-size:13px; font-weight:700; z-index:5; text-shadow:0 2px 8px rgba(0,0,0,.6); pointer-events:none; }
@media (max-width:820px){
  .portal-row { flex-direction:column; }
  .game-tile { min-height:44vh; border-left:none; border-top:3px solid rgba(9,18,44,.65); padding:34px 18px; }
  .game-tile:first-child { border-top:none; }
  .game-tile.live:hover { flex-grow:1; }
  .portal-foot { position:static; }
}

/* ---- Skole-login: søgbar dropdown (typeahead) ---- */
.school-picker { position:relative; }
.suggest-list { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:50; background:var(--card,#fff); border:1px solid rgba(120,150,210,.30); border-radius:12px; box-shadow:0 16px 40px rgba(6,18,50,.22); max-height:264px; overflow-y:auto; }
.suggest-item { padding:12px 15px; cursor:pointer; font-weight:700; color:var(--ink); font-size:15px; border-bottom:1px solid var(--card-2); }
.suggest-item:last-child { border-bottom:none; }
.suggest-item:hover, .suggest-item.active { background:color-mix(in srgb, var(--blue) 12%, var(--card)); color:var(--blue-dark); }
.suggest-empty { padding:12px 15px; color:var(--muted); font-size:14px; }
.suggest-more { padding:9px 15px; color:var(--muted); font-size:12.5px; font-weight:700; border-top:1px solid var(--card-2); background:var(--card-2); }
/* ===== DEMO-FORSIDEN: ét panel pr. spil, med spillets eget områdekort og mærke ===== */
body.dl-on { overflow:hidden; }
body.dl-on #topbar, body.dl-on #wrap, body.dl-on .landing-bg { display:none !important; }
.dl { position:fixed; inset:0; z-index:100000; background:#0b1930; display:flex; flex-direction:column;
  font-family:var(--font-body); color:#fff; }
/* Toppen var bare en flad sort flade. Nu ligger Oplevuddannelsers eget landingsbillede
   bagved - kraftigt nedtonet og sløret - så der er dybde og genkendelse fra login-siden,
   uden at det stjæler opmærksomhed fra de fire paneler. */
.dl::before { content:''; position:absolute; left:0; right:0; top:0; height:62%;
  background:url('img/games/oplev/landing.jpg') 50% 60% / cover no-repeat;
  opacity:.34; filter:blur(9px) saturate(.75); }
  /* Kraftig sløring med vilje: billedet har vejskilte med HHX/HTX/STX, og de må IKKE
     kunne læses her - så ville de konkurrere med de fire paneler nedenunder. */
.dl::after { content:''; position:absolute; left:0; right:0; top:0; height:62%;
  background:linear-gradient(180deg, rgba(11,25,48,.62) 0%, rgba(11,25,48,.72) 45%, rgba(11,25,48,.97) 88%, #0b1930 100%); }
.dl-top, .dl-rk { position:relative; z-index:1; }
.dl-top { flex:0 0 auto; text-align:center; padding:30px 24px 22px; }
/* DE FIRE FARVER STIGER OP I TOPPEN. Den mørke top var en flad flade, mens panelerne
   nedenunder var fulde af farve - så toppen så billig ud ved siden af. I stedet for at
   lægge endnu et billede ind (som ville konkurrere med de fire), lader vi hvert panels
   EGEN farve gløde op i det mørke felt lige over sig. Så hænger top og bund sammen, og
   man kan allerede oppe i overskriften se, at der er fire verdener at vælge imellem.
   Skærm-blanding: farven lyser det mørke op i stedet for at lægge sig som maling. */
/* Gløden er FIRE selvstændige lys - ét pr. panel - i stedet for ét fælles lag. Kun sådan
   kan de følge med, når et panel vokser og de andre trækker sig: lyset flytter sig og
   bliver bredere i præcis samme rytme som panelet nedenunder (.45s, samme kurve).
   Positionerne er regnet ud af flex-grow: det brede panel fylder 32,58% og de tre andre
   22,47% - så midten af hvert lys lander lige over midten af sit panel. */
.dl-glow { position:absolute; left:0; right:0; top:0; bottom:-6px; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 18%, #000 70%);
          mask-image:linear-gradient(180deg, transparent 18%, #000 70%); }
/* VIGTIGT for udseendet: lysene skal være BREDE nok til at overlappe hinanden, og
   slørede nok til at kanten aldrig kan ses. Var de smalle og skarpe, blev de til fire
   tydelige bobler i stedet for ét blødt skær - og så lignede det pynt i stedet for lys. */
.dl-glo { position:absolute; bottom:-30%; height:150%; width:48%; transform:translateX(-50%);
  border-radius:50%; filter:blur(56px); opacity:.74;
  background:radial-gradient(closest-side, var(--g) 0%, transparent 72%);
  transition:left .45s cubic-bezier(.2,.85,.25,1), width .45s cubic-bezier(.2,.85,.25,1),
             opacity .45s ease; }
.dl-glo:nth-child(1){ left:12.5%; --g:rgba(70,130,255,.92); }
.dl-glo:nth-child(2){ left:37.5%; --g:rgba(120,215,90,.76); }
.dl-glo:nth-child(3){ left:62.5%; --g:rgba(255,192,80,.78); }
.dl-glo:nth-child(4){ left:87.5%; --g:rgba(255,142,52,.80); }
/* Det panel man peger på, lyser kraftigere og bredere - og de tre andre trækker sig
   sammen, præcis som panelerne gør. :has() lader os aflæse hvilket kort der har musen. */
.dl:has(.dl-kort:nth-child(1):hover) .dl-glo:nth-child(1){ left:16.29%; width:58%; opacity:.90; }
.dl:has(.dl-kort:nth-child(1):hover) .dl-glo:nth-child(2){ left:43.82%; width:42%; opacity:.48; }
.dl:has(.dl-kort:nth-child(1):hover) .dl-glo:nth-child(3){ left:66.29%; width:42%; opacity:.48; }
.dl:has(.dl-kort:nth-child(1):hover) .dl-glo:nth-child(4){ left:88.76%; width:42%; opacity:.48; }
.dl:has(.dl-kort:nth-child(2):hover) .dl-glo:nth-child(1){ left:11.24%; width:42%; opacity:.48; }
.dl:has(.dl-kort:nth-child(2):hover) .dl-glo:nth-child(2){ left:38.76%; width:58%; opacity:.90; }
.dl:has(.dl-kort:nth-child(2):hover) .dl-glo:nth-child(3){ left:66.29%; width:42%; opacity:.48; }
.dl:has(.dl-kort:nth-child(2):hover) .dl-glo:nth-child(4){ left:88.76%; width:42%; opacity:.48; }
.dl:has(.dl-kort:nth-child(3):hover) .dl-glo:nth-child(1){ left:11.24%; width:42%; opacity:.48; }
.dl:has(.dl-kort:nth-child(3):hover) .dl-glo:nth-child(2){ left:33.71%; width:42%; opacity:.48; }
.dl:has(.dl-kort:nth-child(3):hover) .dl-glo:nth-child(3){ left:61.24%; width:58%; opacity:.90; }
.dl:has(.dl-kort:nth-child(3):hover) .dl-glo:nth-child(4){ left:88.76%; width:42%; opacity:.48; }
.dl:has(.dl-kort:nth-child(4):hover) .dl-glo:nth-child(1){ left:11.24%; width:42%; opacity:.48; }
.dl:has(.dl-kort:nth-child(4):hover) .dl-glo:nth-child(2){ left:33.71%; width:42%; opacity:.48; }
.dl:has(.dl-kort:nth-child(4):hover) .dl-glo:nth-child(3){ left:56.18%; width:42%; opacity:.48; }
.dl:has(.dl-kort:nth-child(4):hover) .dl-glo:nth-child(4){ left:83.71%; width:58%; opacity:.90; }
@media (prefers-reduced-motion: reduce){ .dl-glo { transition:none; } }
/* Fint korn. Store mørke flader bliver flade og "billige" på en skærm, fordi der ikke er
   noget for øjet at hvile på. Et næsten usynligt korn giver fladen materiale - det er
   det samme trick som på trykt papir. */
.dl-top::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
/* Indholdet skal ligge OVER glød og korn - men ikke glød-laget selv, som er baggrund.
   (Uden :not() overskrev denne regel glødens position:absolute, og så blev de fire lys
   nul pixels store.) */
.dl-top > *:not(.dl-glow) { position:relative; z-index:1; }
.dl-logo { height:44px; width:auto; margin:0 auto 16px; display:block; }
/* Logoet er en dør ud - den skal kunne ses at være klikbar, uden at larme. */
.dl-hjem { display:inline-block; border-radius:12px; transition:opacity .2s ease, transform .2s ease; }
.dl-hjem:hover { opacity:.82; transform:translateY(-1px); }
.dl-hjem:focus-visible { outline:2px solid rgba(255,255,255,.7); outline-offset:6px; }
/* Forsiden taler til en rektor, der skal træffe en beslutning - ikke til eleverne.
   Derfor Inter og ikke spillets runde display-skrift: den er nøgtern og voksen, hvor
   Baloo er legende. Inde i selve spillet bliver display-skriften brugt som før. */
.dl-top h1 { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:800; font-size:clamp(26px,3.1vw,40px); margin:0 0 10px; letter-spacing:-.6px;
  text-shadow:0 3px 22px rgba(0,0,0,.55); }
/* Linjeskiftene er sat manuelt ved sætning og komma, så teksten brækker et sted der
   giver mening. text-wrap:balance sørger for at det stadig ser ordentligt ud på
   smallere skærme, hvor de manuelle skift ikke rækker. */
.dl-top p { margin:0 auto; max-width:860px; font-size:clamp(15px,1.2vw,17px); line-height:1.6; color:rgba(255,255,255,.86);
  text-shadow:0 2px 12px rgba(0,0,0,.45); text-wrap:balance; }
.dl-top h1 { text-wrap:balance; }
/* "Vælg jeres uddannelse" var næsten usynlig. Nu med streger på hver side, så den
   læses som en overgang til panelerne i stedet for at forsvinde i baggrunden. */
.dl-vaelg { display:inline-flex; align-items:center; gap:16px; margin-top:22px; font-size:12.5px; font-weight:800;
  letter-spacing:2.8px; text-transform:uppercase; color:rgba(255,255,255,.88); text-shadow:0 2px 10px rgba(0,0,0,.5); }
.dl-vaelg::before, .dl-vaelg::after { content:''; width:clamp(28px,6vw,74px); height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5)); }
.dl-vaelg::after { background:linear-gradient(90deg, rgba(255,255,255,.5), transparent); }
/* Ingen luft over kortene: den stribe var en død, effektløs linje mellem skæret og
   panelerne. Gløden får i stedet lov at gå HELT ned til kanten af kortene. */
.dl-rk { flex:1; display:flex; gap:5px; min-height:0; padding:0 5px 5px; }
.dl-kort { position:relative; flex:1 1 0; min-width:0; border:none; padding:0; cursor:pointer; overflow:hidden;
  border-radius:18px 18px 0 0; background:#0b1930; transition:flex-grow .45s cubic-bezier(.2,.85,.25,1); }
.dl-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.02);
  transition:transform .6s cubic-bezier(.2,.85,.25,1), filter .35s ease; }
/* FARVESKÆRET: spillets egen farve lagt i LYSET på billedet, ikke som et fladt slør.
   soft-light rammer mellemtoner og højlys og lader skygger være, så det ligner
   at rummet er belyst i den farve - ikke at der ligger et farvet stykke plastik over.
   Styrken sidder i ét tal (opacity herunder), så den er nem at skrue på. */
/* Styrken sidder pr. spil i --skaer (sat på kortet), fordi farverne IKKE er lige stærke:
   blå og grøn slår tydeligt igennem i soft-light, mens HHX' guld og EUD's orange nærmest
   forsvinder mod et varmt billede. Uden det tal så to af fire paneler farveløse ud. */
.dl-skaer { position:absolute; inset:0; background:var(--c); mix-blend-mode:soft-light;
  opacity:var(--skaer,.35); transition:opacity .35s ease; pointer-events:none; }
/* Det ekstra lag: kun de spil der har brug for det (--skaer2). "color" lægger KULØREN
   på uden at røre lyset i billedet, så guld og orange bliver til at se, uden at motivet
   drukner i et farvet stykke plastik. */
.dl-skaer2 { position:absolute; inset:0; background:var(--c); mix-blend-mode:color;
  opacity:var(--skaer2,0); transition:opacity .35s ease; pointer-events:none; }
.dl-tone { position:absolute; inset:0; transition:opacity .35s ease;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 34%, transparent) 0%, rgba(11,25,48,.06) 34%, rgba(11,25,48,.18) 58%, rgba(11,25,48,.86) 100%); }
/* Samme opskrift som områdeskiltene inde i spillet (.ac-label): lodret forløb i stedet
   for flad hvid, 2 px kant i spillets farve, tung skygge og en hvid glans i overkanten.
   Det er glansen og forløbet der gør at brikken ikke ser flad ud. */
.dl-navn { position:absolute; top:24px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,#ffffff,#e9f1fc); color:#1a2b47; border-radius:22px; padding:8px 18px 8px 10px;
  border:2px solid color-mix(in srgb, var(--c) 32%, #ffffff);
  box-shadow:0 9px 20px rgba(0,20,60,.32), inset 0 1px 0 #fff;
  max-width:calc(100% - 14px); transition:border-color .3s ease, box-shadow .3s ease; }
.dl-navn img { height:30px; width:30px; flex:0 0 auto; border-radius:9px;
  /* Samme pulserende glød som mærket har i de rigtige spil (maerke-puls). Her i spillets
     egen farve, fordi mærket sidder på et HVIDT skilt - en hvid glød ville ikke kunne ses. */
  --glow:color-mix(in srgb, var(--c) 72%, transparent);
  animation:maerke-puls-glow 3.4s ease-in-out infinite; }
.dl-navn b { font-family:var(--font-display); font-weight:700; font-size:clamp(13px,1.05vw,17px); letter-spacing:.2px; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dl-cta { position:absolute; left:50%; bottom:30px; transform:translateX(-50%); opacity:.96; transition:all .3s ease;
  color:#fff; border-radius:999px; padding:13px 28px; font-family:var(--font-display); font-weight:800; font-size:clamp(14px,1.05vw,17px);
  white-space:nowrap; letter-spacing:.2px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 84%, #fff) 0%, var(--c) 52%, color-mix(in srgb, var(--c) 72%, #000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -4px 7px rgba(0,0,0,.19), 0 12px 28px rgba(0,0,0,.42); }
.dl-kort:hover, .dl-kort:focus-visible { flex-grow:1.45; outline:none; }
.dl-kort:hover .dl-bg, .dl-kort:focus-visible .dl-bg { transform:scale(1.09); }
.dl-kort:hover .dl-tone, .dl-kort:focus-visible .dl-tone { opacity:.72; }
.dl-kort:hover .dl-navn, .dl-kort:focus-visible .dl-navn { border-color:color-mix(in srgb, var(--c) 52%, #ffffff);
  box-shadow:0 12px 26px rgba(0,20,60,.38), inset 0 1px 0 #fff; }
/* farven letter når man peger - billedet træder frem. Regnet ud fra spillets egen styrke,
   så et stærkt farvet panel også letter mærkbart. */
.dl-kort:hover .dl-skaer, .dl-kort:focus-visible .dl-skaer { opacity:calc(var(--skaer,.35) * .57); }
.dl-kort:hover .dl-skaer2, .dl-kort:focus-visible .dl-skaer2 { opacity:calc(var(--skaer2,0) * .5); }
.dl-kort.snart .dl-skaer { opacity:calc(var(--skaer,.35) * .86); }
.dl-kort.snart:hover .dl-skaer, .dl-kort.snart:focus-visible .dl-skaer { opacity:calc(var(--skaer,.35) * .57); }
.dl-kort:hover .dl-cta, .dl-kort:focus-visible .dl-cta { opacity:1; transform:translateX(-50%) scale(1.06); }
/* Spil vi ikke har åbnet demoen for endnu: samme størrelse og SAMME bevægelse som de
   åbne - hele siden skal føles færdig. Forskellen er alene den lette afdæmpning og
   "Åbner snart"-mærket. Peger man på dem, letter afdæmpningen helt, så billedet får
   sit øjeblik: det er også et af vores spil, det er bare ikke åbnet endnu. */
.dl-kort.snart .dl-bg { filter:grayscale(.3) brightness(.86); }
.dl-kort.snart .dl-navn { background:linear-gradient(180deg,#fbfcfe,#e7ebf2); border-color:rgba(255,255,255,.55); }
.dl-kort.snart .dl-navn img { opacity:.82; }
.dl-kort.snart .dl-navn b { font-size:clamp(13px,1.02vw,17px); }
.dl-kort.snart:hover .dl-bg, .dl-kort.snart:focus-visible .dl-bg { filter:grayscale(0) brightness(1); }
.dl-kort.snart:hover .dl-navn, .dl-kort.snart:focus-visible .dl-navn { background:linear-gradient(180deg,#ffffff,#e9f1fc);
  border-color:color-mix(in srgb, var(--c) 32%, #ffffff); }
.dl-kort.snart:hover .dl-navn img, .dl-kort.snart:focus-visible .dl-navn img { opacity:1; }
.dl-snart { position:absolute; left:50%; bottom:32px; transform:translateX(-50%); border:1.5px solid rgba(255,255,255,.5);
  color:rgba(255,255,255,.86); border-radius:999px; padding:9px 20px; font-size:13.5px; font-weight:800; white-space:nowrap; }
@media (max-width:1000px){
  .dl-rk { flex-wrap:wrap; overflow:auto; }
  .dl-kort { flex:1 1 46%; min-height:210px; border-radius:16px; }
  .dl-cta { opacity:1; transform:translate(-50%,0); }
}
@media (prefers-reduced-motion: reduce){ .dl-kort, .dl-bg, .dl-tone, .dl-cta { transition:none; } }

/* --- Selvkørende demo-overlays (demo.oplevuddannelser.dk) --- */
.demo-ovl { position:fixed; inset:0; background:rgba(16,26,45,.62); z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px; }
.demo-card { background:linear-gradient(180deg,#ffffff,#f3f7ff); border-radius:24px; max-width:460px; width:100%;
  padding:30px 28px; text-align:center;
  border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff);
  box-shadow:0 34px 80px rgba(4,12,40,.55), inset 0 1px 0 #fff; }
.demo-logo { height:52px; margin:0 auto 14px; display:block; }
.demo-card h2 { font-family:var(--font-display); margin:0 0 10px; color:var(--ink); font-size:24px; }
.demo-card p { margin:0 0 10px; color:#42506b; font-size:16px; line-height:1.5; }
.demo-card p.demo-sub { font-size:14px; color:var(--muted); }
/* Samme dybde-opskrift som spillets egne knapper (.btn): forløb ovenfra og ned, lyst skær
   i toppen, indvendig bund-bevel og en farvet skygge under. Farven er --blue, altså spillets
   egen - og den skifter med, i samme øjeblik de vælger deres egen farve i skinnen. */
.demo-btn { display:block; width:100%; margin:16px 0 0; border:none; border-radius:13px; padding:15px 26px;
  color:var(--on-blue,#fff); font-family:var(--font-display); font-weight:800; font-size:17px; letter-spacing:.2px; cursor:pointer;
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 84%, #fff) 0%, var(--blue) 52%, var(--blue-dark) 100%);
  box-shadow:var(--hi), 0 6px 16px color-mix(in srgb, var(--blue) 40%, transparent), var(--e1);
  transition:transform .12s ease, box-shadow .18s ease, background .15s ease; }
.demo-btn:hover { transform:translateY(-2px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 90%, #fff) 0%, var(--blue) 50%, var(--blue-dark) 100%);
  box-shadow:var(--hi), 0 12px 28px color-mix(in srgb, var(--blue) 48%, transparent), var(--e2); }
.demo-btn:active { transform:translateY(0); box-shadow:var(--hi), 0 4px 12px color-mix(in srgb, var(--blue) 34%, transparent); }
/* Den lille demo-bjælke i hjørnet. Uden en skinne er der ingen, der leder dem videre -
   så vejen til spillet og til afslutningen skal ligge fremme hele tiden, uden at fylde.
   z-index under overlays (100000), så kort og arena altid dækker den. */
.demo-bar { position:fixed; right:18px; bottom:18px; z-index:9000; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:16px; background:linear-gradient(180deg,#16305a,#102a4c);
  box-shadow:0 14px 34px rgba(4,12,40,.45), inset 0 1px 0 rgba(255,255,255,.14); }
.demo-bar .db-mrk { font-family:var(--font-display); font-weight:900; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:rgba(255,255,255,.6); padding:0 4px 0 6px; }
.demo-bar button { border-radius:11px; padding:10px 15px; font-family:var(--font-display); font-weight:800;
  font-size:14px; cursor:pointer; white-space:nowrap; border:1px solid rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .18s ease; }
.demo-bar button:hover { transform:translateY(-2px); }
.demo-bar .db-spil { background:linear-gradient(180deg,#ffd76a 0%,#f7be1e 55%,#eaa900 100%); color:#4a3500;
  box-shadow:0 8px 20px rgba(230,160,0,.45), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -4px 7px rgba(0,0,0,.16); }
.demo-bar .db-slut { background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.10)); color:#fff;
  border-color:rgba(255,255,255,.34);
  box-shadow:0 6px 14px rgba(0,10,30,.32), inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -4px 7px rgba(0,0,0,.18); }
@media (max-width:700px){ .demo-bar { right:10px; bottom:10px; gap:7px; padding:8px; } .demo-bar .db-mrk { display:none; } }
/* Skillelinje på slutskærmen: over den skriver man sig op, under den prøver man resten.
   Uden den ville de to døre ligne endnu et par knapper i formularen. */
.demo-mere { display:flex; align-items:center; gap:12px; margin:22px 0 2px; color:var(--muted);
  font-size:12.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; }
.demo-mere::before, .demo-mere::after { content:''; flex:1; height:1px; background:#e6eaf2; }
/* De tre faser i en time. Tal og navn til venstre, forklaringen under - så man kan se
   rækkefølgen på et blik i stedet for at læse et afsnit igennem. */
.demo-faser { display:flex; flex-direction:column; gap:10px; margin:18px 0 4px; text-align:left; }
.demo-faser > div { background:#eef4fc; border-left:3px solid var(--blue,#2f6fb0); border-radius:12px; padding:11px 14px; }
.demo-faser b { display:block; font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--blue-dark,#1a3a5c); }
.demo-faser span { display:block; margin-top:2px; font-size:14px; line-height:1.5; color:#42506b; }
/* De to døre. Under-linjen sidder INDE i knappen, så valget kan træffes på ét blik:
   overskriften siger hvad der sker, linjen under siger hvad man får at se. */
/* Den sidste linje før knapperne er en instruktion, ikke information - derfor lidt
   mindre og lidt tættere på valget. */
.demo-card .dv-under { margin-top:14px; font-weight:700; color:var(--ink); }
.demo-valg { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.demo-valg .demo-btn { margin:0; padding:16px 22px; line-height:1.25; }
.demo-valg .demo-btn small { display:block; margin-top:7px; font-family:var(--font-body);
  font-weight:600; font-size:13px; letter-spacing:0; opacity:.9; }
/* Den stille tredje vej: samme knap-krop og samme dybde, men i lyst glas i stedet for
   fyldt farve. Så kan den findes uden at konkurrere med de to hovedveje. */
.demo-valg .demo-btn.rolig { background:linear-gradient(180deg,#ffffff,#dbe4f4); color:var(--blue-dark,#1a3a5c);
  border:2px solid color-mix(in srgb, var(--c, #2f6fb0) 32%, #ffffff);
  box-shadow:0 7px 16px rgba(0,20,60,.22), inset 0 2px 0 rgba(255,255,255,1), inset 0 -7px 11px rgba(0,20,60,.14); }
.demo-valg .demo-btn.rolig:hover { background:linear-gradient(180deg,#ffffff,#d2ddf1);
  box-shadow:0 12px 26px rgba(0,20,60,.28), inset 0 2px 0 rgba(255,255,255,1), inset 0 -7px 11px rgba(0,20,60,.14); }
.demo-valg .demo-btn.rolig small { opacity:.75; }
.demo-choices { display:flex; gap:12px; }
.demo-choices .demo-btn { margin-top:8px; }
.demo-final { margin-top:18px; padding-top:16px; border-top:1px solid #eef0f4; font-size:15px; color:#42506b; line-height:1.5; }
.demo-link { display:block; margin:14px auto 0; background:none; border:none; color:var(--muted); font-size:14px; text-decoration:underline; cursor:pointer; }
/* Demo-formularer (port før start + tilmelding til sidst) */
.demo-form { margin-top:14px; text-align:left; }
.demo-input { display:block; width:100%; box-sizing:border-box; margin:0 0 10px; padding:12px 14px; border:1.5px solid #d8dee8; border-radius:11px; font-size:15px; color:var(--ink); background:#fff; }
.demo-input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,111,176,.16); }
.demo-form .demo-btn { margin-top:4px; }
.demo-hint { min-height:18px; margin-top:8px; font-size:13.5px; color:var(--muted); text-align:center; }
.demo-hint.err { color:#c0392b; }
.demo-badge { width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:#e7f7ee; color:#1e9e5a; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; }
.demo-thanks { padding:14px 4px; text-align:center; font-size:16px; color:#1e9e5a; font-weight:700; line-height:1.5; }
/* ===== PORTEN: samme designsprog som resten af spillet, i det valgte spils farve ===== */
.demo-card.pro { max-width:500px; padding:34px 34px 26px;
  background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%);
  border:2px solid color-mix(in srgb, var(--c) 26%, #ffffff);
  border-radius:26px; box-shadow:0 34px 80px rgba(4,12,40,.5); }
.demo-card.pro .demo-logo { height:40px; margin-bottom:18px; }
/* Skiltet med det valgte spil - samme form som på forsidens paneler, så man kan se sammenhængen */
.df-chip { display:inline-flex; align-items:center; gap:12px; margin:2px 0 20px;
  background:var(--c); color:#fff; border-radius:26px; padding:9px 22px 9px 10px;
  box-shadow:0 12px 26px color-mix(in srgb, var(--c) 40%, transparent); }
.df-chip img { height:36px; width:36px; border-radius:11px; flex:0 0 auto; background:#fff;
  /* På porten sidder mærket på spillets farve - dér virker den hvide glød ligesom i spillet */
  --glow:rgba(255,255,255,.78);
  animation:maerke-puls-glow 3.4s ease-in-out infinite; }
.df-chip b { font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:.2px; line-height:1.2; text-align:left; }
.demo-card.pro h2 { font-size:26px; margin-bottom:8px; }
.demo-card.pro p { font-size:16px; }
/* Felter med rigtige mærkater - tre ens felter uden tekst er umulige at overskue, når de er udfyldt */
.df-felt { display:block; text-align:left; margin:0 0 14px; }
.df-felt > span { display:block; margin:0 0 6px; font-size:12px; font-weight:800; letter-spacing:1.4px;
  text-transform:uppercase; color:color-mix(in srgb, var(--c) 62%, #3a4a66); }
.demo-card.pro .demo-input { margin:0; padding:14px 16px; font-size:16px; border-radius:13px;
  border:2px solid color-mix(in srgb, var(--c) 18%, #d8dee8); background:#fafcff;
  box-shadow:inset 0 1px 2px rgba(18,36,80,.06); transition:border-color .15s ease, box-shadow .18s ease; }
.demo-card.pro .demo-input:focus { border-color:var(--c);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent), inset 0 1px 2px rgba(18,36,80,.05); }
.demo-card.pro .demo-input.fejl { border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.16); }
/* Knappen følger spillet, ikke standardfarven - med samme dybde som spillets egne knapper */
.demo-btn.spil { margin-top:20px; padding:16px 26px; font-size:17.5px; border-radius:14px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 84%, #fff) 0%, var(--c) 52%, color-mix(in srgb, var(--c) 72%, #000) 100%);
  box-shadow:var(--hi), 0 6px 16px color-mix(in srgb, var(--c) 42%, transparent), var(--e1); }
.demo-btn.spil:hover { transform:translateY(-2px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 90%, #fff) 0%, var(--c) 50%, color-mix(in srgb, var(--c) 72%, #000) 100%);
  box-shadow:var(--hi), 0 12px 28px color-mix(in srgb, var(--c) 50%, transparent), var(--e2); }
.demo-btn.spil:active { transform:translateY(0); box-shadow:var(--hi), 0 4px 12px color-mix(in srgb, var(--c) 34%, transparent); }
.demo-btn.spil:disabled { background:linear-gradient(180deg,#e3e8f1,#d3dae6); color:#8d97a8; cursor:not-allowed;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6); transform:none; }
.demo-card.pro .demo-link { margin-top:18px; }
/* Interaktiv demo-skinne: glød om målet (INGEN nedtoning) + coach-boks der venter på rigtige handlinger */
#railHole { position:fixed; z-index:9001; border-radius:12px; pointer-events:none; border:3px solid #ffd75e;
  box-shadow:0 0 0 3px rgba(255,215,94,.35), 0 0 22px 4px rgba(255,215,94,.6); transition:all .22s ease; }
/* Om et lille felt skal ringen være tynd og tæt - ellers dækker den etiketten ovenover */
#railHole.lille { border-width:2px; border-radius:10px;
  box-shadow:0 0 0 1.5px rgba(255,215,94,.3), 0 0 12px 2px rgba(255,215,94,.5); }
/* Bliver boksen højere end skærmen (langt trin + stor skrift i et tema), skal den kunne
   rulle indeni i stedet for at løbe ud over kanten. */
#railBox { max-height:calc(100vh - 24px); overflow:auto; }
#railBox { position:fixed; z-index:9600; box-sizing:border-box; background:#fff; border-radius:16px;
  box-shadow:0 26px 64px rgba(20,40,80,.42); border:1px solid #e7e9f0; padding:18px 20px 16px;
  font-family:var(--font-body); color:var(--ink); }
#railBox .rail-step { font-family:'Nunito',sans-serif; font-size:11.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--blue); }
/* Vejen TILBAGE står øverst ved trin-tælleren - alt hvad der peger fremad, ligger
   forneden. To retninger, to steder, så man ikke rammer den forkerte. */
#railBox .rail-topline { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#railBox .rail-back { background:none; border:none; padding:2px 4px; color:var(--muted);
  font-family:var(--font-body); font-size:12px; cursor:pointer; white-space:nowrap; }
#railBox .rail-back:hover { color:var(--blue); }
#railBox h3 { font-family:var(--font-display); font-weight:800; margin:7px 0 8px; font-size:20px; line-height:1.2; color:var(--ink); }
#railBox p { margin:0 0 14px; font-size:14.5px; line-height:1.55; color:#42506b; white-space:pre-line; }
#railBox .rail-do { margin:0; }
/* Slukket knap: den skal kunne SES hele tiden, så man ved hvad der venter forude - men
   den må ikke kunne trykkes, før feltet er udfyldt. */
#railBox .rail-do.slukket { background:#e6ebf3; color:#9aa6b8; box-shadow:none; cursor:default; }
#railBox .rail-do.slukket:hover { transform:none; background:#e6ebf3; }
#railBox .rail-wait { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:var(--blue-dark,#1a3a5c);
  background:#eef4fc; border:1px dashed #b9d0ec; border-radius:11px; padding:10px 12px; }
#railBox .rail-wait::before { content:''; width:12px; height:12px; border-radius:50%; border:2px solid var(--blue); border-top-color:transparent; animation:railspin 1s linear infinite; flex:0 0 auto; }
@keyframes railspin { to { transform:rotate(360deg); } }
#railBox .rail-skip { display:block; margin:12px auto 0; background:none; border:none; color:var(--muted); font-size:13px; text-decoration:underline; cursor:pointer; }
/* Genvejen direkte til spillet skal kunne FINDES - men den må ikke ligne noget, man skal
   klikke på. Som knap lignede den næste skridt i rækken, og så springer man halvdelen af
   demoen over ved et uheld. Derfor ren tekstlink som "spring dette trin over" - bare blå,
   så de to ikke forveksles. */
#railBox .rail-hop { display:block; margin:7px auto 0; padding:2px 4px; background:none; border:none;
  color:var(--blue); font-family:var(--font-body); font-size:12.5px; text-decoration:underline; cursor:pointer; }
#railBox .rail-hop:hover { color:var(--blue-dark,#1a3a5c); }
@media (prefers-reduced-motion: reduce){ #railBox .rail-wait::before { animation:none; } }
/* Samme glossy pille som spillets egne lyse knapper (.lb-btn) - ikke en flad hvid flade. */
.lc-demo { display:block; width:100%; margin:14px 0 0; border-radius:12px; padding:13px 12px;
  background:linear-gradient(180deg,#ffffff,#dbe4f4); color:var(--blue-dark,#1a3a5c);
  border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff);
  font-family:var(--font-display); font-weight:800; font-size:15px; cursor:pointer;
  box-shadow:0 7px 16px rgba(0,20,60,.26), inset 0 2px 0 rgba(255,255,255,1), inset 0 -7px 11px rgba(0,20,60,.16);
  transition:transform .12s ease, box-shadow .18s ease; }
.lc-demo:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,20,60,.32), inset 0 2px 0 rgba(255,255,255,1), inset 0 -7px 11px rgba(0,20,60,.16); }
.lc-demo:active { transform:translateY(0); }
/* Ren demo-vært: intet login, ingen krydslinks - man er der kun for demoen */
body.demo-host #loginCard, body.demo-host #toElev, body.demo-host .drift-link { display:none !important; }
/* LÅSEN: fire paneler rundt om det felt trinnet handler om. Hullet i midten er det
   ægte element og er fuldt klikbart - alt udenom er spærret, så skinnen ER en skinne. */
#railLock { position:fixed; inset:0; z-index:9000; pointer-events:none; }
#railLock i { position:fixed; display:block; background:rgba(13,27,47,.46); pointer-events:auto;
  transition:background .2s ease; }
body.rail-laast { overflow:hidden; }
/* Fremdrift i coach-boksen: en tynd streg der fyldes, så skinnen føles som en rejse */
#railBox .rail-bar { height:4px; border-radius:99px; background:#e7ecf4; overflow:hidden; margin:0 0 12px; }
#railBox .rail-bar i { display:block; height:100%; border-radius:99px; background:var(--blue); transition:width .45s cubic-bezier(.2,.85,.25,1); }
/* Delmål: hakkes af mens de gør trinnet - et tungt trin bliver til synlig fremdrift */
#railBox .rail-checks { list-style:none; margin:0 0 14px; padding:0; }
#railBox .rail-checks li { display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.45; color:#5b6880; padding:5px 0; transition:color .2s ease; }
#railBox .rail-checks li .rc-box { flex:0 0 auto; width:17px; height:17px; margin-top:1px; border-radius:5px; border:2px solid #cfd8e6; background:#fff; position:relative; transition:all .2s ease; }
#railBox .rail-checks li.ok { color:#1e9e5a; font-weight:700; }
#railBox .rail-checks li.ok .rc-box { background:#1e9e5a; border-color:#1e9e5a; }
#railBox .rail-checks li.ok .rc-box::after { content:''; position:absolute; left:4.5px; top:1px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg); }

/* PAYOFF-KORTET: viser hvad de LIGE opnåede. Kort, konkret, lukker sig selv. */
.cheer-ovl { position:fixed; inset:0; z-index:100050; background:rgba(13,27,47,.55); display:flex; align-items:center; justify-content:center; padding:20px; animation:cheerIn .22s ease both; }
.cheer-ovl.ud { animation:cheerUd .2s ease both; }
@keyframes cheerIn { from { opacity:0; } to { opacity:1; } }
@keyframes cheerUd { to { opacity:0; } }
/* Kortene bruger spillets egen modal-opskrift (.popup): lodret forløb, fin 2 px kant i
   temafarven, tung skygge og en hvid glans i overkanten. Kanten følger --blue, så den
   skifter med, i samme øjeblik de vælger deres egen farve i skinnen. */
.cheer-card { background:linear-gradient(180deg,#ffffff,#f3f7ff); border-radius:24px; max-width:440px; width:100%;
  padding:30px 30px 26px; text-align:center;
  border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff);
  box-shadow:0 34px 80px rgba(4,12,40,.55), inset 0 1px 0 #fff;
  animation:cheerPop .4s cubic-bezier(.2,1.25,.35,1) both; }
@keyframes cheerPop { from { transform:scale(.9) translateY(14px); opacity:0; } to { transform:none; opacity:1; } }
.cheer-mark { width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:linear-gradient(160deg,#fff3cf,#ffd75e); display:flex; align-items:center; justify-content:center; font-size:31px; box-shadow:0 0 0 8px rgba(255,215,94,.22); }
.cheer-card h3 { font-family:var(--font-display); font-weight:800; margin:0 0 9px; font-size:23px; line-height:1.2; color:var(--ink); }
.cheer-card p { margin:0; font-size:15.5px; line-height:1.6; color:#42506b; white-space:pre-line; }
.cheer-big { margin:18px auto 4px; display:inline-block; padding:12px 26px; border-radius:14px; background:#0f2440; color:#ffd75e; font-family:var(--font-display); font-weight:900; font-size:38px; letter-spacing:7px; }
.cheer-small { margin-top:10px; font-size:13.5px; line-height:1.55; color:var(--muted); white-space:pre-line; }
/* Blød udgave: de rolige beskeder (ankomsten, forklaringer). Uden guld-mærke og uden logo -
   logoet står på forsiden og i kuverten, og gentaget i hver boks bliver det til støj. */
.cheer-card.blod { max-width:500px; padding:34px 34px 28px; }
.cheer-card.blod h3 { font-size:25px; margin:0 0 14px; }
.cheer-card.blod p { font-size:16px; line-height:1.65; }
/* Træk-brik i coach-boksen: de skal MÆRKE træk-og-slip uden at have en fil klar */
.rail-drag { display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:11px 13px; cursor:grab;
  border:2px dashed var(--blue); border-radius:13px; background:#f3f8ff; user-select:none;
  animation:railDragPuls 2.2s ease-in-out infinite; }
.rail-drag:active, .rail-drag.taget { cursor:grabbing; opacity:.55; animation:none; }
.rail-drag img { height:26px; width:auto; flex:0 0 auto; pointer-events:none; }
.rail-drag span { font-size:13.5px; font-weight:800; color:var(--blue-dark,#1a3a5c); line-height:1.3; }
@keyframes railDragPuls { 50% { box-shadow:0 0 0 5px rgba(47,111,176,.14); } }
@media (prefers-reduced-motion: reduce){ .rail-drag { animation:none; } }
.cheer-card .cheer-go { margin-top:20px; }
/* Valget ved siden af knappen ("vi er ikke færdige endnu"). Skal kunne findes, men må
   ikke stå som en knap nummer to - så bliver det uklart, hvad næste skridt egentlig er. */
.cheer-card .cheer-link { display:block; margin:12px auto 0; padding:2px 4px; background:none; border:none;
  color:var(--blue); font-family:var(--font-body); font-size:13px; text-decoration:underline; cursor:pointer; }
.cheer-card .cheer-link:hover { color:var(--blue-dark,#1a3a5c); }

/* ===== SPLIT-SCREEN-ARENAEN: elevspillet til venstre, levende pointtavle til højre ===== */
body.arena-on { overflow:hidden; }
.darena { position:fixed; inset:0; z-index:100000; background:#0d1b2f; display:flex; flex-direction:column; }
.da-head { flex:0 0 auto; display:flex; align-items:center; gap:20px; padding:11px 18px; color:#fff;
  background:linear-gradient(180deg,#16305a,#0f2440); border-bottom:1px solid rgba(255,255,255,.1); }
.da-brand { display:flex; align-items:center; gap:11px; font-weight:800; font-size:15px; white-space:nowrap; }
.da-brand img { height:30px; width:auto; display:block; }
.da-mid { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.da-mid b { font-family:var(--font-display); font-size:16px; }
.da-mid span { font-size:13px; color:rgba(255,255,255,.72); }
.da-right-top { display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.da-clock { font-family:var(--font-display); font-weight:900; font-size:26px; letter-spacing:1px; min-width:82px; text-align:center;
  background:rgba(255,255,255,.1); border-radius:11px; padding:5px 12px; }
.da-clock.lav { background:#c0392b; animation:daPuls 1s ease-in-out infinite; }
@keyframes daPuls { 50% { opacity:.6; } }
/* "Giv mig mere tid" skal være der, men må ikke konkurrere med afslut-knappen */
/* Sekundær, men ikke flad: samme dybde-opskrift som resten, bare i bjælkens eget lyse
   glas i stedet for guld - så den ikke konkurrerer med afslut-knappen. */
.da-mere { background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.10));
  color:#fff; border:1.5px solid rgba(255,255,255,.34); border-radius:12px;
  padding:11px 16px; font-family:var(--font-display); font-weight:800; font-size:14.5px; cursor:pointer; white-space:nowrap;
  box-shadow:0 6px 14px rgba(0,10,30,.32), inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -4px 7px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .18s ease, background .15s ease; }
.da-mere:hover { transform:translateY(-2px); background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.16));
  box-shadow:0 10px 22px rgba(0,10,30,.42), inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -4px 7px rgba(0,0,0,.18); }
.da-mere:active { transform:translateY(0); }
.da-endbtn { background:linear-gradient(180deg,#ffd76a 0%,#f7be1e 55%,#eaa900 100%); color:#4a3500;
  border:1px solid rgba(0,0,0,.18); border-radius:12px; padding:12px 18px;
  font-family:var(--font-display); font-weight:800; font-size:15px; cursor:pointer; white-space:nowrap;
  box-shadow:0 8px 20px rgba(230,160,0,.45), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -4px 7px rgba(0,0,0,.16);
  transition:transform .12s ease, box-shadow .18s ease; }
.da-endbtn:hover { transform:translateY(-2px);
  box-shadow:0 13px 30px rgba(230,160,0,.6), inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -4px 7px rgba(0,0,0,.16); }
.da-endbtn:active { transform:translateY(0); }
/* Når alle har svaret, skal udgangen være umulig at overse - men det er dem der trykker.
   Ringen lægges OVEN PÅ knappens egen dybde, ellers ville pulsen slette den. */
.da-endbtn.klar { animation:daKlar 1.6s ease-in-out infinite; }
@keyframes daKlar {
  0%,100% { box-shadow:0 8px 20px rgba(230,160,0,.45), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -4px 7px rgba(0,0,0,.16), 0 0 0 0 rgba(255,215,94,.7); }
  50%     { box-shadow:0 8px 20px rgba(230,160,0,.45), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -4px 7px rgba(0,0,0,.16), 0 0 0 12px rgba(255,215,94,0); }
}
@media (prefers-reduced-motion: reduce){ .da-endbtn.klar { animation:none; } }
/* FRI LEG: hele skærmen er spillet. Ingen pointtavle, intet ur, ingen "+5 min" - og
   ingen vej til kontrolpanelet. Kun "Afslut", som fører tilbage til afslutningen. */
.darena.fri .da-side { display:none; }
.darena.fri .da-clock, .darena.fri .da-mere { display:none !important; }
.darena.fri .da-left { flex:1 1 100%; }
.darena.fri .da-toast { right:26px; }
.da-body { flex:1; display:flex; min-height:0; position:relative; }
.da-left { flex:1 1 auto; min-width:0; background:#fff; display:flex; flex-direction:column; }
.da-left iframe { flex:1 1 auto; width:100%; min-height:0; border:0; display:block; }
.da-side { flex:0 0 clamp(320px, 27vw, 400px); display:flex; flex-direction:column; min-height:0;
  background:#eef2f8; border-left:1px solid rgba(0,0,0,.16); }
/* SKILTENE over de to ruder. Hele demoens pointe er, at man kan se begge skærme på én
   gang - men det skal man kunne SE, ikke regne ud. Skiltene er en del af vores ramme
   (samme mørke som topbjælken), så de aldrig forveksles med selve skærmene, og de ligger
   som en stribe OVER ruden i stedet for oven i den - så de aldrig dækker for noget.
   Den pulserende prik siger "det her er live", præcis som en optageindikator. */
.da-mark { flex:0 0 auto; display:flex; align-items:center; gap:13px; padding:13px 20px;
  background:linear-gradient(180deg,#16305a,#102a4c); color:#fff;
  font-family:var(--font-display); font-weight:900; font-size:19px; letter-spacing:2px; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.12); user-select:none; }
.da-mark i { width:14px; height:14px; border-radius:50%; background:#6ee7a8; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(110,231,168,.7); animation:daMark 2s ease-out infinite; }
.da-mark.hoejre i { background:#ffd75e; box-shadow:0 0 0 0 rgba(255,215,94,.7); animation-name:daMarkGul; }
.da-mark small { margin-left:auto; font-family:var(--font-body); font-weight:700; font-size:14px;
  letter-spacing:0; text-transform:none; color:rgba(255,255,255,.74); }
@keyframes daMark { 0% { box-shadow:0 0 0 0 rgba(110,231,168,.7); } 70% { box-shadow:0 0 0 13px rgba(110,231,168,0); } 100% { box-shadow:0 0 0 0 rgba(110,231,168,0); } }
@keyframes daMarkGul { 0% { box-shadow:0 0 0 0 rgba(255,215,94,.7); } 70% { box-shadow:0 0 0 13px rgba(255,215,94,0); } 100% { box-shadow:0 0 0 0 rgba(255,215,94,0); } }
/* Sidepanelet er smalt - dér ryger under-teksten ned under overskriften i stedet for
   at klemme den sammen på én linje. */
@media (max-width:1500px){ .da-side .da-mark { flex-wrap:wrap; row-gap:2px; }
  .da-side .da-mark small { margin-left:27px; flex:0 0 100%; } }
@media (prefers-reduced-motion: reduce){ .da-mark i { animation:none; } }
.da-lbhead { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--blue,#2f6fb0); color:var(--on-blue,#fff); padding:13px 16px; font-family:var(--font-display); font-weight:900; font-size:17px; letter-spacing:.5px; }
.da-kode { font-size:12px; font-weight:800; letter-spacing:2px; background:rgba(255,255,255,.18); border-radius:8px; padding:4px 9px; }
.da-list { flex:1; overflow:auto; list-style:none; margin:0; padding:11px; }
/* Foden forklarer hvad tavlen ER. Den var sat som en fodnote og blev overset - nu står den
   som en tydelig besked med spillets farve i kanten. */
/* Det her er hele pointen med den delte skærm - at de forstår, hvad de kigger på i
   højre side. Stod det med småt, blev den vigtigste sætning i demoen den mindste. */
.da-foot { flex:0 0 auto; padding:18px 18px 20px; font-size:15.5px; line-height:1.6; color:#1d2c46; font-weight:600;
  border-top:3px solid var(--blue,#2f6fb0); background:#e8eefa; }
.da-foot b { display:block; font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--blue-dark,#1a3a5c); margin-bottom:5px; }
/* "Alle er færdige"-kassen. Den ligger i bunden af storskærmen - altså INDE i ruden og
   ikke som en popup oven på det hele - så de kan blive ved med at kigge på skærmen,
   mens de læser. Den glider blidt ind, så den ikke føles som et afbrud. */
.da-klar { flex:0 0 auto; padding:18px 18px 20px; background:#e8eefa; border-top:3px solid var(--blue,#2f6fb0);
  animation:daKlarInd .45s ease-out both; }
.da-klar b { display:block; font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--blue-dark,#1a3a5c); margin-bottom:5px; }
.da-klar p { margin:0; font-size:15px; line-height:1.6; color:#1d2c46; font-weight:600; white-space:pre-line; }
/* Samme fyldige guld-knap som spillets egen hint-knap: lodret forløb, indre glans i
   toppen, indre skygge i bunden og et varmt kast nedad. En flad farveflade ligner ikke
   resten af spillet - dybden er hele pointen. */
.da-klar-btn { display:block; width:100%; margin:14px 0 0; border:1px solid rgba(0,0,0,.15); border-radius:13px; padding:14px 18px;
  background:linear-gradient(180deg,#ffd76a 0%,#f7be1e 55%,#eaa900 100%); color:#4a3500;
  font-family:var(--font-display); font-weight:800; font-size:16px; cursor:pointer;
  box-shadow:0 8px 20px rgba(230,160,0,.45), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -4px 7px rgba(0,0,0,.16);
  transition:transform .12s ease, box-shadow .18s ease; }
.da-klar-btn:hover { transform:translateY(-2px);
  box-shadow:0 13px 30px rgba(230,160,0,.6), inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -4px 7px rgba(0,0,0,.16); }
.da-klar-btn:active { transform:translateY(0); }
@keyframes daKlarInd { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .da-klar { animation:none; } }
/* Tavlen genbruger spillets rigtige .lb-row-udseende - bare skaleret ned til sidepanelet */
.da-list .lb-row { gap:9px; padding:9px 11px; margin-bottom:7px; }
.da-list .lb-name { font-size:15px; }
.da-list .lb-pts { font-size:17px; min-width:56px; }
.da-list .lb-sub { font-size:11.5px; }
.da-list .lb-rank { width:27px; height:27px; }
.da-list .lb-rank-in { font-size:13px; }
.da-list .lb-row.da-jer { outline:2.5px solid #ffd75e; outline-offset:1px; }
.da-list .lb-row.puls { animation:daHop .55s cubic-bezier(.2,1.3,.35,1); }
@keyframes daHop { 0% { transform:scale(1); } 35% { transform:scale(1.045); box-shadow:0 0 0 6px rgba(255,215,94,.35); } 100% { transform:scale(1); } }
/* Underviserens EGNE kort lånt ind i højre rude. De er tegnet til en storskærm, så vi
   tegner dem i FULD bredde og skrumper hele kassen - den rigtige skærm set på afstand.
   Maser man dem sammen i stedet, bliver gruppenavne klippet og spørgsmålene ulæselige. */
.da-ramme { flex:1; min-height:0; overflow:auto; padding:10px; background:#eef2f8; }
.da-skala { transform-origin:top left; }
.da-skala > .da-laant { display:flex; margin:0; max-width:none; }
.da-skala > .da-laant.claim-scene { gap:14px; }
.da-skala > .da-laant.sv-kort { flex-direction:column; width:100%; }
/* Ruden får mere plads i de to sidste faser - miniaturen skal have pixels at leve af */
.da-side.bred { flex:0 0 clamp(440px, 38vw, 620px); }
.da-toast { position:absolute; right:calc(clamp(320px, 27vw, 400px) + 26px); bottom:26px; transform:translateY(18px); opacity:0; pointer-events:none; z-index:5;
  background:#0f2440; color:#ffd75e; font-family:var(--font-display); font-weight:800; font-size:17px;
  padding:13px 24px; border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.4); transition:all .28s cubic-bezier(.2,1.2,.35,1); }
.da-toast.vis { opacity:1; transform:translateY(0); }
/* Resultatet på slut-skærmen: deres placering, før vi spørger om noget som helst */
.demo-res { display:flex; align-items:center; gap:16px; margin:16px 0 10px; padding:16px 18px; border-radius:16px;
  background:linear-gradient(100deg,#fff7e0,#ffe9b0); text-align:left; }
.dr-plads { font-family:var(--font-display); font-weight:900; font-size:44px; line-height:1; color:#7a5500; }
.dr-tekst { display:flex; flex-direction:column; gap:3px; min-width:0; }
.dr-tekst b { font-size:15.5px; color:#6b4a00; }
.dr-tekst span { font-size:13.5px; color:#8a6a20; }
@media (max-width:900px){
  .da-body { flex-direction:column; }
  .da-side { flex:0 0 40%; border-left:none; border-top:1px solid rgba(0,0,0,.16); }
  .da-toast { right:16px; left:16px; text-align:center; }
  .da-mid { display:none; }
}
/* Mærket ånder - præcis samme rytme som i spillene (3,4 sekunder), men med en glød
   der kan ses på den flade mærket ligger på. */
@keyframes maerke-puls-glow {
  0%, 100% { filter:drop-shadow(0 0 0 transparent); }
  50%      { filter:drop-shadow(0 0 6px var(--glow)); }
}
@media (prefers-reduced-motion: reduce){
  .cheer-card, .cheer-ovl, .da-list .lb-row.puls, .da-clock.lav { animation:none; }
  .dl-navn img, .df-chip img { animation:none; }
}
/* Kode-hint: afsløres kun mens knappen holdes inde (som nøglen i spillet) */
.hint-btn { display:inline-flex; align-items:center; gap:9px; margin-top:12px; border:1px solid rgba(0,0,0,.15);
  background:linear-gradient(180deg,#ffd76a 0%,#f7be1e 55%,#eaa900 100%); color:#4a3500;
  border-radius:999px; padding:13px 24px; font-family:inherit; font-weight:800; font-size:17px; line-height:1;
  cursor:pointer; user-select:none; -webkit-user-select:none;
  box-shadow:0 8px 20px rgba(230,160,0,.45), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -4px 7px rgba(0,0,0,.16);
  animation:hintPop .42s cubic-bezier(.2,1.3,.4,1) both, hintPulse 1.9s ease-in-out .55s infinite; }
.hint-btn:hover { transform:translateY(-2px); box-shadow:0 13px 30px rgba(230,160,0,.6), inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -4px 7px rgba(0,0,0,.16); }
.hint-btn:active { transform:translateY(0); }
/* Login-sidens kode-hint: en HELT anden, diskret knap - ikke spillets gyldne pulserende hint-knap. */
.login-hint { display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  background:#f2f4f8; border:1px solid rgba(30,55,110,.14); color:var(--muted,#5a6b86);
  font-size:13px; font-weight:600; padding:6px 13px; border-radius:999px; cursor:pointer; transition:background .12s, color .12s; }
.login-hint:hover { background:#e9edf4; color:var(--blue-dark,#123a9e); }
@keyframes hintPop { 0%{opacity:0; transform:scale(.55) translateY(6px);} 100%{opacity:1; transform:scale(1) translateY(0);} }
@keyframes hintPulse { 0%,100%{ box-shadow:0 8px 20px rgba(230,160,0,.42), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -4px 7px rgba(0,0,0,.16); }
  50%{ box-shadow:0 8px 26px rgba(230,160,0,.62), 0 0 0 6px rgba(244,180,0,.18), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -4px 7px rgba(0,0,0,.16); } }
.code-hint-reveal { margin-top:9px; padding:11px 14px; background:color-mix(in srgb, var(--gold) 16%, var(--card)); border:1px solid color-mix(in srgb, var(--gold) 45%, var(--card-2)); border-radius:11px; color:var(--ink); font-weight:700; font-size:14px; }

/* ---- Ikon-klasse til inline-SVG (skarpe streger, følger tekstfarve) ---- */
.ic { width:1.05em; height:1.05em; display:inline-block; vertical-align:-2px; stroke: currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.side-btn .ic, .btn .ic { vertical-align:-3px; margin-right:2px; }

/* ============================================================
   PREMIUM LØFT 2  -  editor + elevbesvarelser (indre komponenter)
   ============================================================ */

/* ---- Formfelter: blød inset-dybde + tydelig fokus-glød ---- */
input[type=text], input[type=password], input[type=number], textarea, select {
  box-shadow: inset 0 1px 2px rgba(18,36,80,.06);
  transition: border-color .15s ease, box-shadow .18s ease;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, textarea:focus, select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent), inset 0 1px 2px rgba(18,36,80,.05);
}

/* ---- Upload-zoner: dybde + løft ved hover ---- */
.drop-zone { box-shadow: inset 0 1px 3px rgba(18,36,80,.05); }
.drop-zone:hover { transform: translateY(-2px); box-shadow: var(--e2); }

/* ---- Editor-faner: aktiv fane får blød pille + tydeligere kant ---- */
.ed-tabs { gap:4px; }
.ed-tab { border-radius:10px 10px 0 0; }
.ed-tab:hover { background: color-mix(in srgb, var(--blue) 6%, transparent); }
.ed-tab.active { background: color-mix(in srgb, var(--blue) 10%, var(--card)); }

/* ---- Rækker og kort i editor/resultater: hairline + blød skygge ---- */
.pack-row, .sv-grow, .res-q, .bg-zone, .music-opt .mo-pick { box-shadow: var(--e1); }
.pack-row, .bg-zone, .plate-choice button, .music-opt .mo-pick, .grund-thumb { transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease, border-color .16s ease; }
.pack-row:hover, .bg-zone:hover { border-color: color-mix(in srgb, var(--blue) 45%, #dbe4f5); box-shadow: var(--e2); }
.plate-choice button:hover, .music-opt .mo-pick:hover, .grund-thumb:hover { transform: translateY(-2px); box-shadow: var(--e2); }

/* ---- Resultat-kort: lidt mere luft og dybde ---- */
.res-q { box-shadow: var(--e2); }
.res-bar .rb-track { box-shadow: inset 0 1px 3px rgba(18,36,80,.14); }
.res-bar .rb-fill, .rb-fill { box-shadow: 0 1px 4px color-mix(in srgb, var(--blue) 45%, transparent); }

/* ---- Accordion-kort i editoren: tydeligere når åben ---- */
.side-card.acc.open { box-shadow: var(--e3); border-color: var(--blue); }
.acc-head:hover { background: color-mix(in srgb, var(--blue) 6%, transparent); }

/* ---- "Dine spil"-tabel i kontrolpanelet: blødt hover-løft ---- */
.games-table tbody tr { transition: background .15s ease; }

/* ============================================================
   PRESTIGE PREMIUM  -  disciplineret navy+guld som rundvisningen
   Rige navy-gradient flader, elegant guld reserveret til CTA'er + accenter.
   ============================================================ */
/* Rige navy-gradient flader (ikke flad navy) - som rundvisningens kort */
body.theme-prestige .main-card, body.theme-prestige .card, body.theme-prestige .side-card {
  background: linear-gradient(165deg,#1c3765 0%,#142c54 58%,#0f2247 100%);
  border: 1px solid rgba(120,150,210,.20);
  box-shadow: 0 22px 55px rgba(3,9,30,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
/* Primær + handling: elegant guld CTA med guldglød (som "Videre"-knappen) */
body.theme-prestige .btn, body.theme-prestige .btn.green {
  background: linear-gradient(180deg,#f7c948,#e0a92e); color:#3a2c05;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 7px 18px rgba(224,169,46,.42);
}
body.theme-prestige .btn:hover, body.theme-prestige .btn.green:hover {
  background: linear-gradient(180deg,#ffd45e,#e9b436);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 13px 28px rgba(224,169,46,.55);
}
body.theme-prestige .btn:active, body.theme-prestige .btn.green:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(224,169,46,.4);
}
/* Sekundær-knap bevares diskret (allerede defineret ovenfor) */
body.theme-prestige .btn.secondary { box-shadow: var(--e1); }
/* Sidebar-knapper: hævet navy-flade, guld kun som accent ved hover (undgaar guld-overload) */
body.theme-prestige .side-btn {
  background: linear-gradient(180deg,#274a7e,#1a355d); color:#eef4ff;
  border: 1px solid rgba(150,180,230,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 6px 16px rgba(3,9,30,.42);
}
body.theme-prestige .side-btn:hover {
  background: linear-gradient(180deg,#2f5789,#213f6b); border-color: rgba(230,173,87,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 12px 24px rgba(3,9,30,.5);
}
/* Feedback-knap: guld i prestige, matcher CTA (ingen groen-clash) */
body.theme-prestige .fb-btn {
  background: linear-gradient(180deg,#f7c948,#e0a92e); color:#3a2c05;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 8px 22px rgba(224,169,46,.45);
}
body.theme-prestige .fb-btn:hover { background: linear-gradient(180deg,#ffd45e,#e9b436); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px rgba(224,169,46,.55); }
/* Topbar: blød navy-gradient + tynd guld-hairline i bund */
body.theme-prestige .topbar {
  background: linear-gradient(180deg,#12244a,#0a1730);
  box-shadow: 0 6px 20px rgba(3,9,30,.5), inset 0 -1px 0 rgba(230,173,87,.28);
}
/* Aktiv fane (KONTROLPANEL) + page-tab: guld-flade med moerk tekst */
body.theme-prestige .page-tab { color:#3a2c05; }
/* Nulstil-tællere-knap: diskret moerk i stedet for lyseroed paa navy */
body.theme-prestige #resetStatsBtn { background:rgba(226,59,59,.16) !important; color:#ffb4b4 !important; }

/* ---- PRESTIGE finpuds: læsbarhed + konsistens (guld/navy) ---- */
body.theme-prestige { --muted:#b6c8ea; }
/* 1) Tæller-tal: lys, tydelig guld paa navy (ikke moerk orange) */
body.theme-prestige .counter .cnum { color:#f8d066; }
/* 2) Sektions-overskrifter + labels: et nyk lysere/koeligere saa de ikke drukner */
body.theme-prestige .side-card h3, body.theme-prestige .clbl, body.theme-prestige .ed-h, body.theme-prestige .acc-title, body.theme-prestige .bg-sec-label { color:#b1ccff; }
/* 3) KONTROLPANEL-fanen: samme lyse guld som CTA'erne (ikke orange) */
body.theme-prestige .page-tab { background: linear-gradient(180deg,#f7c948 0%,#eab63c 55%,#e0a92e 100%); color:#3a2c05; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px rgba(224,169,46,.42); }
/* 4) Header: rig navy (ikke sort) + lys tekst + guld-hairline i bund */
body.theme-prestige .topbar { background: linear-gradient(180deg,#22386a,#152a52); color:#eaf1ff; box-shadow: 0 6px 20px rgba(3,9,30,.45), inset 0 -1px 0 rgba(230,173,87,.32); }

/* ---- PRESTIGE finpuds 2: mini-knapper, sekundær, faner, labels (fjern muddy guld) ---- */
/* Mini-knapper (Rundvisning, Log ud, Lærer-kode m.fl.): navy-flade med LYS tekst */
body.theme-prestige .btn-mini { background: linear-gradient(180deg,#284b7f,#1b365e); color:#eef4ff; border:1px solid rgba(150,180,230,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--e1); }
body.theme-prestige .btn-mini:hover { background: linear-gradient(180deg,#305a8c,#22406c); border-color:rgba(230,173,87,.5); }
/* "Sådan virker editoren": tydelig guld CTA (override inline) */
body.theme-prestige #edTourBtn { background: linear-gradient(180deg,#f7c948,#e0a92e) !important; color:#3a2c05 !important; border:none !important; }
/* Sekundær-knap (Tilbage til kontrolpanelet): navy-flade med lys tekst */
body.theme-prestige .btn.secondary { background: linear-gradient(180deg,#254877,#183056); color:#eef4ff; border:1px solid rgba(150,180,230,.22); }
body.theme-prestige .btn.secondary:hover { background: linear-gradient(180deg,#2c5688,#1f3c68); }
/* Editor-faner: inaktiv lys-blaa, aktiv elegant guld */
body.theme-prestige .ed-tabs { border-bottom-color: rgba(150,180,230,.22); }
body.theme-prestige .ed-tab { color:#9fb6dd; }
body.theme-prestige .ed-tab:hover { color:#eaf1ff; background: transparent; }
body.theme-prestige .ed-tab.active { color:#f8d066; border-bottom-color:#e0a92e; background: color-mix(in srgb,#e0a92e 12%, transparent); }
/* Gruppe-labels ("Til eleverne" osv.): lys i stedet for muddy tan */
body.theme-prestige .pack-glabel { color:#b1ccff; }
body.theme-prestige .pack-glabel.big { color:var(--ink); border-bottom-color: rgba(150,180,230,.2); }

/* ============================================================
   PRESTIGE: FORBIND knapper til farvevalget (Primær/Accent/Handling)
   Overstyrer det tidligere hardcodede guld, saa knapperne foelger --blue/--green.
   Guld er blot prestige-STANDARDEN for --blue; skolen kan vaelge sit eget.
   ============================================================ */
/* Primær + sidebar + KONTROLPANEL-fane: foelger primaerfarven (--blue) */
body.theme-prestige .btn, body.theme-prestige .side-btn, body.theme-prestige .page-tab {
  background: linear-gradient(180deg, color-mix(in srgb,var(--blue) 82%,#fff) 0%, var(--blue) 55%, var(--blue-dark) 100%);
  color: var(--on-blue,#16233d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 7px 18px color-mix(in srgb,var(--blue) 42%, transparent), var(--e1);
}
body.theme-prestige .btn:hover, body.theme-prestige .side-btn:hover, body.theme-prestige .page-tab:hover {
  background: linear-gradient(180deg, color-mix(in srgb,var(--blue) 90%,#fff) 0%, var(--blue) 52%, var(--blue-dark) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 13px 28px color-mix(in srgb,var(--blue) 52%, transparent), var(--e2);
}
body.theme-prestige .btn:active, body.theme-prestige .side-btn:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 12px color-mix(in srgb,var(--blue) 36%, transparent);
}
/* Handling + feedback: foelger handlingsfarven (--green) */
body.theme-prestige .btn.green, body.theme-prestige .fb-btn {
  background: linear-gradient(180deg, color-mix(in srgb,var(--green) 84%,#fff) 0%, var(--green) 55%, var(--green-dark) 100%);
  color: var(--on-green,#fff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 7px 18px color-mix(in srgb,var(--green) 40%, transparent), var(--e1);
}
body.theme-prestige .btn.green:hover, body.theme-prestige .fb-btn:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 13px 28px color-mix(in srgb,var(--green) 50%, transparent), var(--e2);
}
/* Accentfarve (--gold) bruges allerede paa faner-underlinje, dots, medaljer osv. - foelger accent-valget. */

/* Skoleaars-tal staar lidt mere afdaempet end livstidstallene */
.stat-box.stat-aar { background:#fbfcfe; }
.stat-box.stat-snit { background:linear-gradient(180deg,#eefaf2,#dff3e7); border-color:#bfe3cd; }
.stat-box.stat-snit .stat-num { color:#166b41; }
.stat-box.stat-snit .stat-lbl { color:#3f7a5c; }
.stats-totals { flex-wrap:wrap; }
.stat-box.stat-aar .stat-num { font-size:24px; color:#5a6b82; }
/* Nulstil-knappen sidder lige ved siden af de tal den rydder */
.counters-row { display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; margin:4px 0 20px; }
.counters-row .counters { margin:0; }
.btn-reset-inline { background:#fdecec; color:#b23; border:none; border-radius:10px; padding:9px 15px; font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.btn-reset-inline:hover { background:#f9d5d5; }
.btn-reset-inline .ic { width:14px; height:14px; }

/* ===== SOEJLEDIAGRAMMER - deles af admin og underviser-panelet ===== */
  /* Soejlerne: .bars har fast hoejde, kolonnerne strækkes, og .bar-track giver
     bjælken en RIGTIG hoejde at regne procenter af - ellers kollapser de til streger. */
  .bars { display:flex; align-items:stretch; gap:5px; height:190px; padding:8px 0 0; }
  .bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
  .bar-track { flex:1; width:100%; display:flex; align-items:flex-end; border-bottom:2px solid #e0e8f5; }
  .bar { width:100%; background:linear-gradient(180deg,var(--blue),var(--blue-dark)); border-radius:5px 5px 2px 2px; min-height:3px; transition:filter .12s; }
  .bar:hover { filter:brightness(1.15); }
  .bar-v { font-size:11px; font-weight:800; color:var(--blue-dark); height:14px; line-height:14px; }
  /* Fast hoejde til TO linjer, saa kolonner med aarstal ikke bliver hoejere end resten */
  .bar-l { font-size:10px; color:#8794ad; white-space:nowrap; text-align:center; line-height:13px; height:26px; }
  .bar-l i { display:block; font-style:normal; font-weight:800; color:#5a6b82; }
  .bar-zero .bar { background:#e4ebf7; }
  /* Fortid / denne maaned / forventet */
  .b-bagud .bar { background:linear-gradient(180deg,#4a7fe0,#2a56b8); }
  .b-nu .bar { background:linear-gradient(180deg,#f0a83a,#d4841a); box-shadow:0 0 0 2px rgba(212,132,26,.28); }
  .b-frem .bar { background:linear-gradient(180deg,#b9cdf0,#93addf); }
  .b-nu .bar-v { color:#a8620c; }
  .b-frem .bar-v { color:#8fa3c4; }
  .b-nu .bar-l { color:#a8620c; font-weight:800; }
  .chart-legend { display:flex; gap:18px; align-items:center; margin-bottom:4px; font-size:12px; color:#6b7a94; }
  .lg { display:flex; align-items:center; gap:6px; }
  .lg::before { content:''; width:12px; height:12px; border-radius:3px; }
  .lg-bagud::before { background:#2a56b8; }
  .lg-nu::before { background:#d4841a; }
  .lg-frem::before { background:#93addf; }
  /* Gennemsnit elever pr. spil */
  .u-lbl { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:#8794ad; margin-bottom:2px; }

/* ==========================================================================
   PRODUKTMAERKET - kredsloebs-sporet foran "HTX TECH GAME"
   --------------------------------------------------------------------------
   Vores eget maerke, ikke skolens. Derfor har det sin EGEN faste blaa
   (#2b52e0) og foelger IKKE --blue, som skolen selv styrer. Skolens logo
   staar for sig i topbjaelken; de to skal kunne kendes fra hinanden.

   Ligger som background-image (data-URI) paa ::before. Alle fire visninger
   - elevens topbjaelke, omraadekortet, underviserpanelet og storskaermen -
   bruger .brand eller .brand2, saa maerket rammer dem alle fra ét sted her.
   Skal det aendres, aendres det KUN her og i img/mark.svg.

   Stoerrelsen er sat i em, saa glyffen skalerer med ordmaerket (fx den
   mindre pille paa smalle skaerme) uden et eneste ekstra media query.

   OBS: pladen er fast blaa. Hos en skole med roedt eller groent tema vil
   den staa i kontrast til topbjaelken. Det er et bevidst valg - produktet
   skal se ens ud hos alle kunder - men er det for haardt, findes en variant
   med hvid plade og udstanset spor, der arver skolens farve.
   ========================================================================== */
:root { --mark: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2056%2056%22%3E%3Crect%20x=%222%22%20y=%222%22%20width=%2252%22%20height=%2252%22%20rx=%2214%22%20fill=%22%231b4fd8%22%20stroke=%22%23fff%22%20stroke-opacity=%22.55%22%20stroke-width=%222%22/%3E%3Cg%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%222.6%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M15%2040V26a5%205%200%200%201%205-5h8%22/%3E%3Cpath%20d=%22M41%2016v14a5%205%200%200%201-5%205h-8%22/%3E%3Ccircle%20cx=%2215%22%20cy=%2243%22%20r=%223.4%22%20fill=%22%23fff%22%20stroke=%22none%22/%3E%3Ccircle%20cx=%2241%22%20cy=%2213%22%20r=%223.4%22%20fill=%22%23fff%22%20stroke=%22none%22/%3E%3C/g%3E%3C/svg%3E"); }

.brand, .brand2, .brand-xl, .lh-brand { display: inline-flex; align-items: center; gap: .42em; }
.brand::before, .brand2::before, .brand-xl::before, .lh-brand::before {
  content: ""; flex: 0 0 auto;
  width: 1.5em; height: 1.5em;
  background: var(--mark) center / contain no-repeat;
}

/* Svag puls paa produktmaerket. 3,4 sekunder er valgt saa den laeses som en
   detalje og ikke som en notifikation der kalder paa et klik.
   Effekten ligger paa filter:drop-shadow, som foelger maerkets alfa - derfor
   foelger skaeret den runde firkants form i stedet for at tegne en kasse.
   prefers-reduced-motion: nogle elever slaar bevaegelse fra i styresystemet,
   ofte fordi de bliver utilpasse af det. Saa koerer den ikke. */
@keyframes maerke-puls {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%      { filter: drop-shadow(0 0 5px rgba(255,255,255,.6)); }
}
.brand::before, .brand2::before, .brand-xl::before, .lh-brand::before { animation: maerke-puls 3.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .brand::before, .brand2::before, .brand-xl::before, .lh-brand::before { animation: none; }
}

/* ==========================================================================
   VELKOMST OVER LOGIN (baade elev og underviser)
   --------------------------------------------------------------------------
   Teksten ligger paa selve videoen, som med vilje IKKE har noget moerkt
   filter. Maalt paa de faktiske videobilleder giver hvid tekst kun 2,0:1 i
   kontrast mod himlen - langt under de 4,5:1 der kraeves for at kunne laeses.
   Derfor et bloedt sloer bag teksten: ved .55 midt i maaler vi 6,5:1. Fordi
   det er en radial der toner ud til nul, flades billedet ikke ud udenom.
   Aendres baggrundsbilledet til noget lysere, skal sloeret maales igen.
   ========================================================================== */
/* closest-side gør at sløret rammer NUL praecis ved kanten. Derfor ses ingen
   kasse - kun et skaer der toner ud i billedet. Den tidligere version havde
   stadig farve ude ved kanten og moedte en haard afrunding, og laeste derfor
   som en graa boks. Ingen border-radius: der er ingen kant at runde. */
.landing-welcome { text-align:center;
  padding: clamp(30px,5.5vh,58px) clamp(48px,11vw,140px) clamp(32px,6vh,62px);
  /* FAST ellipsestoerrelse i stedet for 'closest-side', som Chrome og Safari
     fortolker forskelligt. Tallene er RADIER: 50% naar praecis ud til kassens
     midterkanter, saa ovalen fylder kassen og fader ud FOER hjoernerne - det er
     dét, der giver den blOEde oval i stedet for en firkant. Stoerre tal ville
     skubbe ovalen ud over kanten, saa kun den flade midte ses (= firkant). */
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
              rgba(8,20,52,.68) 0%, rgba(8,20,52,.60) 42%,
              rgba(8,20,52,.30) 72%, rgba(8,20,52,0) 100%); }
/* "Velkommen til" er en overskrift OVER navnet, ikke sidestillet med det.
   Spaerret versal i mindre grad giver rangorden - foer stod begge linjer i
   vaegt 800 og samme stoerrelsesorden, og saa kaempede de om opmaerksomheden. */
.lw-hi { font-family:var(--font-display); font-weight:800; margin:0 0 clamp(10px,1.6vh,18px);
  font-size:clamp(13px,1.45vw,17px); letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.86); text-shadow:0 2px 10px rgba(6,18,50,.5); }
.brand-xl { font-family:var(--font-display); font-weight:800; color:#fff; margin:0;
  font-size:clamp(28px,4.6vw,48px); letter-spacing:.5px; text-shadow:0 3px 18px rgba(6,18,50,.5); }

/* Login trukket op under velkomsten - og krydslinket laast fast i bunden.
   margin-top:auto samler al ledig plads FOER linket, saa det lander praecis
   samme sted paa begge sider, selvom underviser-kortet er hoejere end
   elev-kortet. Det var netop hoejdeforskellen der fik knappen til at hoppe,
   naar man skiftede mellem de to login. */
.landing-wrap, body.preauth #wrap { justify-content:flex-start; padding-top:clamp(18px,5vh,56px); }
/* margin-bottom loefter linket fri af kredsloebs-stregerne i baggrunden.
   I vh, saa afstanden foelger skaermhoejden - stregerne sidder i billedet og
   flytter sig med det. Er det ikke nok, er det dette ene tal der skrues paa. */
.landing-wrap .cross-link, body.preauth #wrap .cross-link {
  margin-top:auto; margin-bottom:clamp(28px, 5.5vh, 64px); }
body:not(.preauth) #loginWelcome { display:none; }

/* KUN Studie: "KONTROLPANEL" stod i 16px og fyldte blot 56% af den indvendige
   bredde (maalt: 236px plads, teksten 133px i Baloo 2 800 med 1,5px sperring).
   20px bringer den op paa 69% - fyldigere uden at komme i klemme mod polstringen.
   applyDesignTheme saetter altid klassen 'theme-studie' eksplicit paa body, saa
   denne regel kan pr. definition ikke paavirke Akademi eller Prestige. */
body.theme-studie .page-tab { font-size: 20px; }

/* Gruppeoverskrift i spoergerunden: titel til venstre, "slå alle til/fra" til hoejre */
.pack-glabel.grp { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pack-glabel.grp small { font-weight:700; color:var(--muted); }
.pack-glabel.grp .pack-all { flex:0 0 auto; }

/* ==========================================================================
   OPGAVE-EDITOR (egen side)
   Vores indhold har hverken blyant eller kryds - der er bogstaveligt talt
   ingenting at klikke paa. Laasen forklares derfor ikke, den ses.
   ========================================================================== */
.tv-grid { display:grid; grid-template-columns:minmax(240px,320px) minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:900px){ .tv-grid { grid-template-columns:1fr; } }
.tv-side, .tv-main { background:var(--card); border-radius:var(--radius); box-shadow:var(--e2); padding:18px 20px; }
/* Samme fane-stil som editorens .ed-tab (understregning, tema-farve) - egen klasse,
   saa editorens globale .ed-tab-klik ikke ogsaa fanger disse faner. */
.tv-grid.velk { grid-template-columns:1fr; }
.tv-tabs { display:flex; gap:4px; margin:0 0 18px; border-bottom:2px solid #e6ecf6; }
.tv-tab { font-family:var(--font-display); background:none; border:none; border-bottom:3px solid transparent; border-radius:10px 10px 0 0; padding:10px 16px; font-size:16px; font-weight:700; color:var(--muted); cursor:pointer; margin-bottom:-2px; }
.tv-tab:hover { color:var(--blue-dark); background: color-mix(in srgb, var(--blue) 6%, transparent); }
.tv-tab.valgt { color:var(--blue-dark); border-bottom-color:var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--card)); }
body.theme-prestige .tv-tabs { border-bottom-color: rgba(150,180,230,.22); }
body.theme-prestige .tv-tab { color:#9fb6dd; }
body.theme-prestige .tv-tab:hover { color:#eaf1ff; background: transparent; }
body.theme-prestige .tv-tab.valgt { color:#f8d066; border-bottom-color:#e0a92e; background: color-mix(in srgb,#e0a92e 12%, transparent); }
.tv-welk-info { margin:0 0 14px; padding:0 4px; }
.tv-welk-prev { line-height:1.55; font-size:16px; }
.tv-welk-prev p { margin:0 0 12px; }
.tv-intro-box { border:1.5px solid color-mix(in srgb, var(--blue) 22%, #e6ecf6); border-radius:12px; padding:14px 16px; margin:0 0 18px; background:color-mix(in srgb, var(--blue) 3%, var(--card)); }
.tv-intro-txt { margin:0; color:var(--ink); line-height:1.5; font-size:15.5px; }
.tv-intro-btns { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.tv-intro-box textarea { width:100%; resize:vertical; font:inherit; line-height:1.5; padding:11px; border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); border-radius:10px; box-sizing:border-box; }
.tv-lbl { font-family:var(--font-display); font-weight:800; font-size:14.5px; letter-spacing:.5px;
  text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.tv-omr { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none;
  border-radius:10px; padding:11px 12px; font-family:inherit; font-size:15px; font-weight:700; color:var(--ink);
  cursor:pointer; margin-bottom:3px; }
.tv-omr:hover { background:var(--card-2); }
.tv-omr.valgt { background:var(--blue-light); color:var(--blue-dark); }
.tv-navn { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tv-tal { font-size:13px; font-weight:800; color:var(--muted); flex:0 0 auto; }
.tv-ic { flex:0 0 auto; font-size:14px; }
.tv-nyt { display:block; width:100%; margin-top:12px; background:none; border:2px dashed #cddcf1; border-radius:10px;
  padding:11px; font-family:inherit; font-weight:800; font-size:14px; color:var(--blue-dark); cursor:pointer; }
.tv-nyt:hover { border-color:var(--blue); background:var(--blue-light); }
.tv-nyt.lille { padding:8px; font-size:13px; margin-top:8px; }
.tv-omr-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tv-laast { font-size:13px; font-weight:800; color:var(--muted); }
.tv-udf { border:1.5px solid #d8e3f4; border-radius:12px; margin-bottom:10px; background:#fff; overflow:hidden; }
.tv-udf.laast { background:var(--card-2); }
.tv-udf-top { display:flex; align-items:center; gap:10px; font-size:15px; padding:11px 13px; background:var(--blue-light); border-bottom:1px solid #d8e3f4; }
.tv-udf-top b { flex:1; min-width:0; font-family:var(--font-display); font-size:16px; color:var(--blue-dark); }
.tv-cnt { flex:0 0 auto; font-size:12px; font-weight:800; color:var(--blue-dark); background:#fff; border:1px solid #cfdcf1; border-radius:20px; padding:2px 10px; }
.tv-fold-btn { flex:0 0 auto; background:#fff; border:1px solid #cfdcf1; color:var(--blue-dark); font-size:14px; cursor:pointer; border-radius:8px; width:30px; height:30px; line-height:1; }
.tv-fold-btn:hover { background:var(--blue-light); }
.tv-udf-knap { display:flex; gap:2px; flex:0 0 auto; }
.tv-opg { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #e9eef7; border-radius:9px;
  padding:9px 11px; margin-top:7px; font-size:14px; }
.tv-opg-nm { flex:1; min-width:0; font-weight:700; }
.tv-opg-nm small { color:var(--muted); font-weight:600; }
/* --- Egen-område-editor: tydeligere hierarki. Udfordring = kort med farvet header,
   opgaverne nestet indeni med egen lille overskrift, så det er let at se hvad der er hvad. --- */
.tv-udf.egen { padding:0; overflow:hidden; border:1.5px solid #d8e3f4; background:#fff; }
.tv-udf.egen .tv-udf-top { padding:11px 13px; background:var(--blue-light); border-bottom:1px solid #d8e3f4; }
.tv-udf.egen .tv-udf-top b { font-family:var(--font-display); font-size:16px; color:var(--blue-dark); }
.tv-eyebrow { flex:0 0 auto; font-family:var(--font-display); font-weight:800; font-size:10px; letter-spacing:.8px;
  text-transform:uppercase; color:var(--blue-dark); background:#fff; border:1px solid #cfdcf1; border-radius:6px; padding:2px 7px; }
.tv-opgliste { padding:11px 13px 13px; background:#f6f9fe; }
.tv-opg-lbl { display:flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:800; font-size:11px;
  letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin:0 0 4px; }
.tv-opg-tal { font-size:11px; font-weight:800; color:var(--blue-dark); background:var(--blue-light); border-radius:20px; padding:1px 8px; }
.tv-tom { margin:6px 0 0; }
/* --- formularen --- */
.tv-form { max-width:640px; width:100%; max-height:88vh; overflow:auto; text-align:left; }
.tv-typer { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:12px 0 16px; }
.tv-type { background:#fafcff; border:2px solid #dbe4f5; border-radius:12px; padding:10px 12px; cursor:pointer;
  font-family:inherit; text-align:left; }
.tv-type b { display:block; font-size:14px; color:var(--ink); }
.tv-type small { color:var(--muted); font-size:12px; line-height:1.35; display:block; margin-top:2px; }
.tv-type.valgt { border-color:var(--blue); background:var(--blue-light); }
.tv-rk { display:flex; align-items:center; gap:9px; margin-top:7px; }
.tv-rk .tv-in { flex:1; margin:0; }
.tv-par-rk { display:flex; align-items:center; gap:8px; margin-top:7px; }
.tv-par-rk .tv-in { flex:1; margin:0; min-width:0; }
.tv-par-lnk { flex:0 0 auto; color:var(--muted); font-weight:800; font-size:16px; }
.tv-rk input[type=radio] { width:20px; height:20px; flex:0 0 auto; }
.tv-nr { flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--blue-light);
  color:var(--blue-dark); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; }
.tv-boks { border:1px solid #dbe4f5; border-radius:12px; padding:11px 13px; margin-top:10px; background:#fafcff; }
.tv-boks-top { display:flex; gap:8px; align-items:center; }
.tv-boks-top .tv-in { flex:1; margin:0; font-weight:800; }
.tv-bil { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.tv-bil img { height:64px; border-radius:8px; border:1px solid #dbe4f5; }
/* mc-images i editoren: gitter af billed-kort med Rigtig-flueben */
.tv-bill-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin:8px 0 4px; }
.tv-bill-kort { position:relative; border:2px solid #dbe4f5; border-radius:12px; background:#fff; padding:8px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.tv-bill-kort.rigtig { border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.tv-bill-kort img { width:100%; aspect-ratio:1/1; object-fit:contain; }
.tv-bill-check { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:#1a2b47; cursor:pointer; }
.tv-bill-check input { width:16px; height:16px; }
.tv-bill-x { position:absolute; top:4px; right:4px; }
.tv-intro { font-size:14px; line-height:1.5; color:var(--muted); margin:0 0 16px; }
/* Fravalgt indhold vises stadig - skolen skal kunne se hvad de har slaaet fra
   og fortryde. Derfor dæmpet, ikke skjult. */
.tv-udf.fravalgt, .tv-opg.fravalgt { opacity:.5; }
.tv-udf.fravalgt .tv-flue, .tv-opg.fravalgt .tv-flue { opacity:1; }
.tv-flue { width:19px; height:19px; flex:0 0 auto; margin:0; cursor:pointer; }
.tv-fold { padding:11px 13px 13px; background:#f6f9fe; }
.tv-lbl small { color:var(--muted); text-transform:none; letter-spacing:0; font-weight:700; font-size:13px; }
/* Hjaelpetekst i sidemenuen. Afstanden saettes ÉT sted i stedet for som
   inline-margin paa hver enkelt - det var derfor menuen voksede sig lang. */
.side-card .hint { margin:7px 2px 15px; line-height:1.45; }
.side-card .hint:last-child { margin-bottom:0; }

/* Akut hjaelp. Staar ved siden af feedback-knappen, men i roedt og med telefon-
   ikon, saa den ikke forveksles. Skjules ALDRIG - heller ikke under spil, for
   det er praecis dér, noget kan gaa galt. */
/* Teksten i akut-dialogen: korte afsnit med luft imellem. Ét langt afsnit
   bliver ikke laest af en, der staar med et problem lige nu. */
.sos-p { margin:0 0 10px; font-size:15px; line-height:1.55; color:var(--muted); }
.sos-p:last-of-type { margin-bottom:0; }
/* Telefonfeltet er dialogens vigtigste felt - saa det maa gerne fylde og se ud
   som spilkode-feltet paa forsiden. Spærring goer cifrene nemme at tjekke. */
.sos-tlf { text-align:center; font-size:22px; font-weight:800; letter-spacing:3px;
  font-family:var(--font-display); color:var(--ink); }
.sos-tlf::placeholder { letter-spacing:2px; font-weight:700; color:#9fb2cf; }
/* Akut hjaelp i spillets bundbjaelke: samme form som de andre knapper dér, men
   roed skrift saa den kan findes hurtigt uden at raabe hen over billedet. */
.lb-btn.lb-sos { color:#c0392b; display:inline-flex; align-items:center; gap:8px; }
.lb-btn.lb-sos svg { stroke:#c0392b; fill:none; stroke-width:2; width:16px; height:16px; }
.lb-btn.lb-sos:hover { background:#fdecec; }
/* Akut hjaelp i en overskriftsraekke: samme stoerrelse som naboknapperne, men
   FYLDT roed. En noedknap, der ligner de andre knapper, er ikke en noedknap -
   den skal kunne findes uden at lede. Samme farve som den svaevende udgave,
   saa den genkendes paa tvaers af siderne. */
.btn-mini.sos-mini { display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(180deg,#e05a4e,#c0392b) !important; color:#fff !important;
  border:1px solid rgba(150,40,30,.45) !important;
  box-shadow:0 5px 13px rgba(150,40,30,.30), inset 0 1.5px 0 rgba(255,255,255,.32), inset 0 -3px 6px rgba(0,0,0,.22) !important; }
.btn-mini.sos-mini svg { stroke:#fff; fill:none; stroke-width:2; width:15px; height:15px; }
.btn-mini.sos-mini:hover { background:linear-gradient(180deg,#e8695d,#b5342a) !important;
  box-shadow:0 7px 18px rgba(150,40,30,.38), inset 0 1.5px 0 rgba(255,255,255,.36), inset 0 -3px 6px rgba(0,0,0,.22) !important; }
/* Afslut spil: hvid-rød pille som standardknappen "Afslut prøve" (.oh-logout) */
.lb-btn.danger { background:linear-gradient(180deg,#ffffff,#f6dede); color:#b2352f; border:1px solid rgba(180,60,50,.34);
  box-shadow:0 7px 16px rgba(120,40,35,.22), inset 0 2px 0 rgba(255,255,255,.9), inset 0 -7px 11px rgba(120,40,35,.16); }
.lb-btn.danger:hover { background:linear-gradient(180deg,#fdeaea,#f9d6d6); filter:none; }
/* Akut hjælp: FYLDT rød nødknap - SAMME udtryk som .sos-mini alle andre steder på lærerskærmen */
.lb-btn.lb-sos { background:linear-gradient(180deg,#e05a4e,#c0392b); color:#fff; border:1px solid rgba(150,40,30,.45); border-radius:12px;
  box-shadow:0 5px 13px rgba(150,40,30,.30), inset 0 1.5px 0 rgba(255,255,255,.32), inset 0 -3px 6px rgba(0,0,0,.22); }
.lb-btn.lb-sos svg { stroke:#fff; }
.lb-btn.lb-sos:hover { background:linear-gradient(180deg,#e8695d,#b5342a); filter:none; }
/* Til/fra med en forklarende linje under - samme ramme som zone-vaelgerne,
   men med plads til to linjer tekst. */
.bg-zone.ed-sfx-row { align-items:flex-start; padding:11px 13px; }
.bg-zone.ed-sfx-row span { display:flex; flex-direction:column; gap:2px; }
.bg-zone.ed-sfx-row small { font-weight:600; font-size:12.5px; color:var(--muted); line-height:1.45; }
/* Knapper i bundbjaelken maa aldrig braekke teksten om paa to linjer - saa
   springer hoejden, og bjaelken ser oedelagt ud. Bliver der for lidt plads,
   skal grupperne hellere bryde end teksten. */
.lb-btn { white-space:nowrap; }
.lb-left, .lb-mid, .lb-right { flex-wrap:wrap; }

/* ---- Slut-menu paa live-skaermen ----------------------------------------
   Bygget i samme sprog som opgavekortene i spillet: bloedt forloeb, dybde og en
   medalje - ikke fladt kort-paa-kort. Ikonerne er streg-ikoner som resten af
   appen, ikke emoji, der ser forskellige ud paa hver maskine. */
/* Scenen midterstiller sit indhold. Menuen laegges i stedet fast i toppen med
   lidt luft over - saa staar den samme sted uanset hvor hoej skaermen er, og
   den kommer op i oejenhoejde i stedet for at ligge midt paa. Skal den hoejere
   eller lavere, er det tallet i margin-top. */
.slut-menu { width:min(560px,94%); background:linear-gradient(180deg,#ffffff,#f4f8ff);
  border-radius:26px; overflow:hidden; box-shadow:0 30px 80px rgba(6,18,50,.48);
  align-self:flex-start; margin-top:clamp(10px, 4vh, 46px); }
.sm-top { display:flex; align-items:center; gap:18px; padding:26px 30px 22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 82%,#fff),var(--blue) 60%,var(--blue-dark));
  color:#fff; }
.sm-top h2 { margin:0; font-family:var(--font-display); font-weight:800; font-size:27px; letter-spacing:.3px; }
.sm-top p { margin:4px 0 0; font-size:14.5px; line-height:1.45; color:rgba(255,255,255,.86); }
.sm-medal { width:62px; height:62px; flex:0 0 auto; border-radius:50%;
  background:linear-gradient(160deg,#ffe08a,#f2b400 55%,#c98a12);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(8,24,64,.4), inset 0 2px 3px rgba(255,255,255,.5); }
.sm-medal-in { width:44px; height:44px; border-radius:50%;
  background:radial-gradient(circle at 40% 30%,#fffdf5,#fff3d4 60%,#ffe6a8);
  display:flex; align-items:center; justify-content:center; color:#8a6300; }
.sm-medal-in .ic { width:24px; height:24px; }
.sm-body { padding:20px 22px 24px; }
.sm-btn { display:flex; align-items:center; gap:15px; width:100%; text-align:left;
  background:linear-gradient(180deg,#fff,#f2f7ff); border:none; border-radius:16px;
  padding:14px 17px; margin-bottom:11px; font-family:inherit; cursor:pointer;
  box-shadow:0 10px 22px rgba(6,18,52,.16), inset 0 1px 0 #fff;
  transition:transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease; }
.sm-btn:hover { transform:translateY(-2px); box-shadow:0 16px 30px rgba(6,18,52,.24), inset 0 1px 0 #fff; }
.sm-ic { width:46px; height:46px; flex:0 0 auto; border-radius:50%;
  background:linear-gradient(160deg,color-mix(in srgb,var(--blue) 72%,#fff),var(--blue) 55%,var(--blue-dark));
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 6px 12px rgba(8,24,64,.34), inset 0 2px 3px rgba(255,255,255,.45); }
.sm-ic .ic { width:22px; height:22px; }
.sm-tx { flex:1; min-width:0; }
.sm-tx b { display:block; font-family:var(--font-display); font-weight:800; font-size:17px; color:#1a2b47; }
/* Undertekst: 13,5px i lys blaa var for svag. 15px i en moerkere tone -
   den skal kunne laeses af en, der staar op og har travlt. */
.sm-tx small { display:block; font-size:15px; color:#41628f; margin-top:3px; line-height:1.45; }
.sm-pil { width:20px; height:20px; color:#a9bcd8; flex:0 0 auto; }
/* Den handling de fleste vaelger foerst - guld som medaljen, saa oejet lander der */
.sm-btn.sm-primaer .sm-ic { background:linear-gradient(160deg,#ffe08a,#f2b400 55%,#c98a12); color:#7a5600; }


/* Pointtavlen efter spillet. Maalt: med faste maal er der kun plads til NI
   raekker paa en 1080p-skaerm og under seks paa en 768-projektor - saa ville
   top 10 kraeve, at man rullede, mens hele klassen kigger på den. Derfor
   skalerer raekkerne med skaermhoejden (vh), med et loft saa de ikke bliver
   absurde paa en stor skaerm. Regnestykket: raekke = ikon + 2x polstring +
   mellemrum, og 10 af dem skal kunne vaere i (100vh - ca. 300px). */
.lb-card.lb-stor { width:min(1250px,97%); max-height:calc(100vh - 190px); display:flex; flex-direction:column; }
.lb-card.lb-stor .lb-list { max-height:none; padding:clamp(8px,1.2vh,14px); }
.lb-card.lb-stor .lb-row { padding-left:22px; padding-right:22px; gap:18px; }
.lb-card.lb-stor .lb-name { font-size:clamp(17px,2.2vh,25px); }
.lb-card.lb-stor .lb-pts { font-size:clamp(18px,2.4vh,28px); min-width:clamp(80px,9vh,120px); }
.lb-card.lb-stor .lb-tro-ic { width:clamp(22px,2.9vh,34px); height:clamp(22px,2.9vh,34px); }
/* Fremdrift pr. gruppe - vises kun mens spillet koerer */
.lb-sub { color:var(--muted); font-size:14px; font-weight:700;
  flex:0 0 auto; min-width:4.2em; text-align:right; }
.lb-row.p1 .lb-sub { color:#a5822f; }
.lb-row.p2 .lb-sub { color:#7286a0; }
.lb-row.p3 .lb-sub { color:#a1764a; }
.lb-card.lb-stor .lb-sub { font-size:clamp(12px,1.4vh,16px); }

/* Kompakt lydpanel i spillets bundbjaelke. Det fulde panel fylder 300 px og
   skubber midterknappen ud af centrum - her raekker det halve. */
.lb-music { padding:4px 8px 4px 4px; gap:6px; }
.lb-music .mc-btn { width:32px; height:32px; font-size:16px; }
.lb-music .vol-range { width:44px; }

/* ---- Elevernes slutkort ---------------------------------------------------
   Samme sprog som slut-menuen paa underviserens skaerm: farvet top med forloeb,
   guldmedalje, og resultatet som det stoerste element. Det er gruppens afslutning
   paa en time - den maa gerne foeles som noget. */
/* Kortet centreres BAADE vandret og lodret paa skaermen - det er elevens
   afslutning, og saa skal det ikke sidde og haenge oppe i hjoernet. */
.slut-kort-wrap { position:fixed; inset:0; display:flex; align-items:center;
  justify-content:center; padding:20px; box-sizing:border-box; z-index:5; }
.slut-kort { width:min(460px,92%); margin:0; background:linear-gradient(180deg,#ffffff,#f4f8ff);
  border-radius:26px; overflow:hidden; box-shadow:0 26px 70px rgba(6,18,50,.42); }
.sk-top { padding:30px 28px 26px; text-align:center; color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 82%,#fff),var(--blue) 60%,var(--blue-dark)); }
.sk-top h1 { margin:16px 0 0; font-family:var(--font-display); font-weight:800; font-size:30px; letter-spacing:.3px; }
/* "Godt spillet!" er rosen - den maa gerne fylde. Beskeden nedenunder er en
   oplysning og staar mindre, saa de to ikke konkurrerer. */
.sk-godt { margin:10px 0 0; font-family:var(--font-display); font-weight:800;
  font-size:22px; color:#fff; }
.sk-info { margin:6px 0 0; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.82); }
/* IKKE guld. En guldmedalje paa alles skaerm laeses som "I vandt" - ogsaa af
   dem der ikke gjorde, og misvisende for dem der gjorde. Et maalflag siger
   "faerdig", og vinderen afsloeres paa storskaermen af underviseren. */
.sk-medal { width:78px; height:78px; margin:0 auto; border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.sk-medal-in { width:58px; height:58px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(6,18,50,.22); }
.sk-flag { width:32px; height:32px; fill:#16305e; }
.sk-body { padding:22px 28px 28px; text-align:center; }
.sk-lbl { margin:0 0 6px; font-family:var(--font-display); font-weight:800; font-size:13px;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); }
.sk-score { display:flex; align-items:baseline; justify-content:center; gap:9px; }
.sk-score b { font-family:var(--font-display); font-weight:800; font-size:52px; line-height:1;
  color:var(--blue-dark); }
.sk-score span { font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--muted); }
/* Festlig slutskaerm: pop-in, flag der vajer, medalje der springer frem, glimt + konfetti (spillets farver). */
.slut-kort-wrap { overflow:hidden; }
.slut-kort.sk-anim { animation:sk-pop .5s cubic-bezier(.2,.85,.3,1.25) both; }
@keyframes sk-pop { 0%{ transform:translateY(16px) scale(.95); opacity:0; } 100%{ transform:none; opacity:1; } }
.slut-kort .sk-top { position:relative; overflow:hidden; }
.slut-kort.sk-anim .sk-medal { animation:sk-medal .6s .1s cubic-bezier(.2,.8,.3,1.5) both; }
@keyframes sk-medal { 0%{ transform:scale(0) rotate(-30deg); } 100%{ transform:none; } }
.slut-kort.sk-anim .sk-flag { animation:sk-wave 1.7s .55s ease-in-out infinite; transform-origin:20% 50%; }
@keyframes sk-wave { 0%,100%{ transform:rotate(-5deg); } 50%{ transform:rotate(5deg); } }
.slut-kort.sk-anim .sk-top::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.30) 50%,transparent 68%);
  transform:translateX(-120%); animation:sk-shine 1.15s .3s ease-out both; }
@keyframes sk-shine { to{ transform:translateX(120%); } }
.slut-kort.sk-anim .sk-score b { animation:sk-score-pop .5s .15s cubic-bezier(.2,.8,.3,1.3) both; display:inline-block; }
@keyframes sk-score-pop { 0%{ transform:scale(.6); opacity:0; } 100%{ transform:none; opacity:1; } }
.sk-confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.sk-confetti i { position:absolute; top:-8%; border-radius:2px; opacity:.92;
  animation-name:sk-fall; animation-timing-function:cubic-bezier(.35,.4,.55,1); animation-fill-mode:forwards; }
@keyframes sk-fall { 0%{ transform:translateY(0) rotate(0); opacity:0; } 8%{ opacity:.95; } 100%{ transform:translateY(112vh) rotate(560deg); opacity:.85; } }
@media (prefers-reduced-motion: reduce){
  .slut-kort.sk-anim, .slut-kort.sk-anim .sk-medal, .slut-kort.sk-anim .sk-flag,
  .slut-kort.sk-anim .sk-top::after, .slut-kort.sk-anim .sk-score b { animation:none; }
  .sk-confetti { display:none; }
}
/* "Tilbage til kontrolpanelet" har allerede en pil tilbage i ikonet. En frempil
   i hoejre side ville pege den modsatte vej af, hvad knappen goer. */
.sm-btn[data-gaa="panel"] .sm-pil { display:none; }

/* Overskrifter der ligger oven paa skolens EGET baggrundsbillede. Vi kan ikke vide, om
   billedet er lyst eller moerkt, saa teksten faar sin egen plade i stedet for at haabe
   paa kontrast. Samme sprog som .logo-plate-dark. */
.zone-titel { display:inline-flex; align-items:center; gap:.5em;
  background:rgba(13,22,52,.58); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  padding:9px 22px 9px 17px; box-shadow:0 6px 20px rgba(0,0,0,.24);
  color:#fff; font-size:clamp(25px,3.6vh,34px); margin:2px 0 14px; }
.zone-titel-ic { width:1.06em; height:1.06em; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; opacity:.92; }
.lb-head-ic { width:1.05em; height:1.05em; opacity:.9; }

/* Spoergerundens hint staar for sig selv paa skaermen og maa fylde mere end et
   almindeligt hint inde i et kort. Foerste linje er selve ordren, anden er reglen. */
#qRound .game-hint { font-size:16.5px; max-width:780px; padding:15px 20px; }
#qRound .game-hint .gh-stor { font-size:19px; font-weight:800; color:#16305e; }

/* Kvitteringen for gruppens valg. Samme opbygning som slutkortet - farvet top med
   maerke, hvid krop hvor det vigtige staar stort. Spoergsmaalet er det eneste, de
   skal huske herfra, saa det fylder mest. */
.valgt-kort { width:100%; background:linear-gradient(180deg,#ffffff,#f2fbf5); border-radius:26px;
  overflow:hidden; box-shadow:0 24px 64px rgba(6,18,50,.40); border:1px solid rgba(120,190,150,.30); }
.vk-top { background:linear-gradient(180deg, var(--green,#25a55c), var(--green-dark,#17864a));
  padding:24px 26px 19px; text-align:center; }
.vk-ic { display:flex; align-items:center; justify-content:center; width:74px; height:74px;
  margin:0 auto; border-radius:50%; background:rgba(255,255,255,.22); }
.vk-ic-in { display:flex; align-items:center; justify-content:center; width:55px; height:55px;
  border-radius:50%; background:#fff; box-shadow:0 3px 10px rgba(0,0,0,.16); }
.vk-tjek { width:29px; height:29px; fill:none; stroke:var(--green-dark,#17864a);
  stroke-width:3.1; stroke-linecap:round; stroke-linejoin:round; }
.vk-lbl { margin:13px 0 0; font-family:var(--font-display); font-weight:800; font-size:13.5px;
  letter-spacing:2.2px; text-transform:uppercase; color:rgba(255,255,255,.88); }
.vk-body { padding:26px 32px 20px; }
.vk-tekst { margin:0; font-family:var(--font-display); font-weight:800; line-height:1.28;
  font-size:clamp(22px,3.4vh,33px); color:var(--blue-dark); }
.vk-vent { margin:0; padding:0 26px 22px; font-size:15px; color:var(--muted); }

/* Spoergerunden paa storskaermen. Én lang lodret liste loeb ud over skaermkanten,
   saa snart der var mere end en haandfuld grupper. To spalter halverer hoejden, og
   maalene skalerer med skaermhoejden (samme greb som pointtavlen), saa 15 grupper
   altid kan staa der uden at rulle - ogsaa paa en 768px projektor. */
.claim-grid { display:grid; grid-template-columns:repeat(4,1fr); align-content:start;
  gap:clamp(6px,0.9vh,12px); padding:clamp(10px,1.6vh,18px); }
.claim-grid .lb-empty { grid-column:1 / -1; }
.claim-row { display:flex; flex-direction:column; gap:1px; min-width:0;
  background:rgba(232,239,250,.62); border-radius:14px;
  padding:clamp(7px,1.05vh,13px) clamp(12px,1.5vh,18px); }
/* FEJL VI RETTEDE: gruppenavnet flød ud over sin kasse og ind i nabokolonnen. Kassen er
   en lodret flexboks, og et flex-element krymper ikke under sit eget min-indhold, med
   mindre man siger det - derfor virkede hverken overflow:hidden eller ellipsis. Nu står
   der min-width:0 på selve navnet, og et langt gruppenavn ombrydes i stedet for at blive
   klippet af: "Panik Efter Klokken 8" skal kunne læses helt. */
.claim-row .cg { min-width:0; font-family:var(--font-display); font-weight:800; color:var(--blue);
  font-size:clamp(10.5px,1.35vh,15px); letter-spacing:.7px; text-transform:uppercase;
  line-height:1.2; overflow-wrap:anywhere; }
.claim-row .cq { min-width:0; font-weight:700; color:var(--blue-dark); line-height:1.26;
  font-size:clamp(13px,1.8vh,20px); overflow-wrap:anywhere; }
/* Taeller i overskriften - viser om alle grupper er med endnu */
.lb-taeller { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.30); color:#fff;
  border-radius:999px; padding:6px 14px; font-size:clamp(11px,1.35vh,14px);
  font-weight:800; letter-spacing:.4px; white-space:nowrap; }
/* Uden tekst er pillen kun en tom baggrund - den skal ikke ses. */
.lb-taeller:empty { display:none; }
#claimsCard .lb-head { flex-wrap:wrap; row-gap:8px; }
@media (max-width:1500px){ .claim-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:1150px){ .claim-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){ .claim-grid { grid-template-columns:1fr; } .claim-scene { flex-direction:column; } .claim-side { width:auto; } }

/* ---- SPOERGERUNDEN PAA STORSKAERMEN ---- */
/* Venstre: hvem mangler. Hoejre: hvad de har valgt. Den venstre halvdel er den
   sociale motor - naar hele klassen kan se, hvem der ikke har valgt endnu, skynder
   de sig selv. Derfor staar de manglende oeverst og skifter til groen, naar de er med. */
/* .live-stage centrerer sit indhold lodret. Spoergerunden vokser nedad, efterhaanden
   som grupperne vaelger - saa den skal staa fast i toppen, ellers glider hele billedet
   opad for hvert nyt spoergsmaal. */
.claim-scene { display:flex; align-items:stretch; align-self:flex-start; gap:18px;
  width:min(1560px,96%); margin-top:6px; max-height:calc(100vh - 190px); }
.claim-kort { width:auto; flex:1; min-width:0; display:flex; flex-direction:column;
  align-self:stretch; margin-top:0; }
.claim-kort .claim-grid { overflow:auto; }

.claim-side { flex:0 0 auto; width:clamp(190px,17vw,270px); display:flex; flex-direction:column;
  background:rgba(255,255,255,.94); border-radius:20px; box-shadow:var(--e3); overflow:hidden; }
.cs-head { display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--blue); color:var(--on-blue,#fff); font-family:var(--font-display); font-weight:900;
  letter-spacing:1.2px; font-size:clamp(14px,1.8vh,19px); padding:clamp(10px,1.5vh,16px) 14px; }
.cs-taeller { background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.32);
  border-radius:999px; padding:3px 10px; font-size:clamp(11px,1.3vh,14px); letter-spacing:.3px; }
.cs-taeller:empty { display:none; }
.cs-liste { flex:1; overflow:auto; padding:clamp(8px,1.1vh,13px); display:flex; flex-direction:column;
  gap:clamp(4px,0.6vh,8px); }
.cs-rk { display:flex; align-items:center; gap:9px; padding:clamp(6px,0.9vh,11px) clamp(9px,1vh,13px);
  border-radius:12px; background:#fdf3e3; border:1px solid #f2ddb8;
  font-weight:800; font-size:clamp(12px,1.55vh,17px); color:#7a5312;
  transition:background .3s, color .3s, border-color .3s; }
.cs-rk.valgt { background:#e6f7ec; border-color:#bfe6cd; color:#17864a; }
.cs-navn { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-mrk { flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:1.35em; height:1.35em; border-radius:50%; background:#f0dcb4; }
.cs-rk.valgt .cs-mrk { background:#17864a; }
.cs-mrk svg { width:.85em; height:.85em; fill:none; stroke:#fff; stroke-width:3.4;
  stroke-linecap:round; stroke-linejoin:round; }

/* Tom tilstand: skal se ud som en tilstand, ikke som et hul der mangler indhold. */
.claim-grid { min-height:clamp(120px,17vh,190px); }
.claim-tom { grid-column:1 / -1; align-self:center; margin:0; text-align:center;
  color:var(--muted); font-weight:700; font-size:clamp(14px,1.7vh,18px); }
.cs-tom { margin:auto 0; text-align:center; color:var(--muted); font-weight:700; font-size:14px; }
.cs-liste { min-height:clamp(90px,13vh,150px); }

/* ---- SPOERGESKEMAETS HOVED ---- */
/* Foer laa der fire ting med hver sin justering oven paa skolens baggrundsbillede:
   en centreret pille, en venstrestillet overskrift, en centreret hvid brOEdtekst og
   en venstrestillet hintboks. Nu staar de paa samme akse, og de to tekster er samlet
   i ÉN boks - de siger to dele af den samme besked. */
.sv-top { text-align:center; margin-bottom:18px; }
.sv-boks { background:linear-gradient(180deg,#eef3ff,#e2ebff); border:1px solid rgba(120,150,210,.38);
  border-radius:18px; box-shadow:0 10px 28px rgba(6,18,50,.28), inset 0 1px 0 #fff;
  max-width:760px; margin:0 auto; padding:18px 24px; text-align:center; }
body.play .sv-intro, .sv-intro { margin:0; color:#274690; text-shadow:none;
  font-size:16.5px; line-height:1.55; padding:0; }
.sv-intro:empty { display:none; }
.sv-gor { margin:12px 0 0; padding:11px 0 0; border-top:1px solid rgba(120,150,210,.34);
  font-family:var(--font-display); font-weight:800; font-size:17px; color:#16305e; }
.sv-intro:empty + .sv-gor { margin:0; padding:0; border-top:none; }

/* Elev-taelleren hoerer til overskriften, ikke til sin egen linje. */
.zt-chip { margin-left:.35em; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.32);
  border-radius:999px; padding:.2em .75em; font-size:.6em; font-weight:800; letter-spacing:.5px;
  color:rgba(255,255,255,.94); white-space:nowrap; }

/* Boksen: hvidt kort med dybde i stedet for en flad blaa flade. Skolens velkomst
   maa laeses roligt, saa den faar luft og linjeafstand - og instruksen er ikke laengere
   en fed linje under en streg, men en pille man kan SE er en opfordring. Pilen nedad
   siger hvor spoergsmaalene er. */
.sv-boks { background:linear-gradient(165deg,#fbfdff 0%,#eef4ff 55%,#e4ecfd 100%);
  border:3px solid color-mix(in srgb, var(--blue) 26%, #ffffff); border-radius:24px;
  box-shadow:0 20px 46px rgba(6,18,50,.34), inset 0 2px 0 rgba(255,255,255,.9);
  padding:24px 32px 22px; }
body.play .sv-intro, .sv-intro { font-family:var(--font-display); font-weight:600;
  font-size:18px; line-height:1.62; color:#31456d; }
.sv-gor { margin:15px auto 0; padding:13px 0 0; max-width:420px;
  border-top:1px solid color-mix(in srgb, var(--blue) 26%, transparent);
  font-family:var(--font-display); font-weight:800; font-size:16px;
  letter-spacing:.3px; color:var(--blue-dark); }
/* Ingen ramme om instruksen. Alt hvad der har kant og baggrund, ligner en knap -
   og en tekst man ikke kan trykke paa, maa ikke se ud som en. Den skiller sig ud
   med skrift og en tynd streg i stedet. */
.sv-intro:empty { display:none; }
.sv-intro:empty + .sv-gor { margin:0; }

/* ---- SPOERGESKEMAETS KORT PAA ELEVSIDEN ---- */
/* Fladt hvidt paa et fotografi ser billigt ud - kortene har ingen kant mod baggrunden
   og ingen dybde. Samme behandling som resten af spillet: blOEdt forloeb, tydelig skygge
   og en lys kant foroven. Alt ligger nu i ÉN spaltebredde, saa kanterne flugter hele
   vejen ned i stedet for at springe ind og ud. */
body.play .sv-q { background:linear-gradient(165deg,#fbfdff 0%,#eef4ff 55%,#e4ecfd 100%);
  /* Tyk, synlig kant i skolens farve. En 1px kant forsvinder mod et fotografi -
     kortet flyder ud i baggrunden og ligner et hul i stedet for et objekt. */
  border:3px solid color-mix(in srgb, var(--blue) 26%, #ffffff); border-radius:20px;
  box-shadow:0 18px 40px rgba(6,18,50,.34), inset 0 2px 0 rgba(255,255,255,.9);
  padding:20px 24px 22px; margin-bottom:16px; }
body.play .sv-q:focus-within { border-color:color-mix(in srgb, var(--blue) 55%, #ffffff); }
/* 74px hoejremargen er plads til editorens flytteknapper - dem har eleven ikke */
body.play .sv-q .sv-qtext { padding-right:0; display:flex; align-items:flex-start; gap:12px; }
.sv-nr { flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:27px; height:27px; margin-top:1px; border-radius:50%; color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb,var(--blue) 86%, #fff), var(--blue-dark));
  font-family:var(--font-display); font-size:14px; font-weight:800;
  box-shadow:0 3px 9px color-mix(in srgb,var(--blue) 42%, transparent); }
body.play #svSubmit { box-shadow:0 16px 34px rgba(6,18,50,.34); }

/* En ekskluderet raekke er daempet, saa den ikke stjaeler opmaerksomhed. Men knappen,
   der fortryder eksklusionen, er netop vejen UD af den tilstand - den maa ikke vaere
   daempet sammen med resten, ellers ser det ud som om den heller ikke virker. */
.sv-grow.excl { opacity:.55; }
.sv-grow.excl .btn-mini.tael-med { opacity:1; background:linear-gradient(180deg,#e6f7ec,#d2f0de);
  color:#127a3d; border:1px solid #b6e4c8; font-weight:800; box-shadow:0 4px 10px rgba(20,120,60,.20); }
.sv-grow.excl .btn-mini.tael-med:hover { background:linear-gradient(180deg,#d8f2e3,#bfe8cf); }
.sv-ok { width:1.05em; height:1.05em; stroke:var(--green-dark,#17864a); stroke-width:3.2;
  vertical-align:-3px; }
.sv-grow .sv-gstat { display:inline-flex; align-items:center; justify-content:flex-end; gap:5px;
  min-width:92px; }

/* Til/fra-knap: samme tekst hele tiden, tilstanden vises med udseendet. */
.btn-mini.vip.slaaet-til { background:linear-gradient(180deg,#e6f7ec,#cdedda); color:#127a3d;
  border:1px solid #a9dfbe; font-weight:800;
  box-shadow:inset 0 2px 5px rgba(16,90,50,.20); }
.btn-mini.vip.slaaet-til:hover { background:linear-gradient(180deg,#d8f2e3,#bde5cd); }

/* Afslut forloebet - staar hvor forloebet naturligt ender, saa underviseren ikke
   skal tilbage i menuen for at lukke. Roed, fordi den ikke kan fortrydes. */
.sv-slut { display:flex; justify-content:center; padding:clamp(6px,1vh,12px) 14px clamp(10px,1.6vh,18px); }
.btn-slut { font-family:var(--font-display); font-weight:800; font-size:16px; cursor:pointer;
  color:#fff; border:1px solid rgba(150,40,32,.5); border-radius:999px; padding:12px 30px;
  background:linear-gradient(180deg,#e0554a,#b5342a);
  box-shadow:0 8px 20px rgba(150,40,32,.34), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-slut:hover { background:linear-gradient(180deg,#e8695d,#c03b30); }
.sv-slut-note { font-size:12.5px; font-weight:700; color:var(--muted); }

/* Én saetning, ikke et tal med en note ved siden af. Kun tallet skifter, men hele
   linjen er beskeden - derfor samme stoerrelse og farve hele vejen. */
.sv-status { margin:0; padding:clamp(8px,1.5vh,16px) 20px 4px; text-align:center;
  font-family:var(--font-display); font-weight:800; line-height:1.15;
  font-size:clamp(22px,3.4vh,34px); color:var(--green-dark); }
.sv-status .sv-percent { font-size:1.28em; font-weight:900; }

/* ---- SPOERGESKEMAETS GRUPPELISTE ---- */
/* Én lodret liste kunne vise en haandfuld grupper. Med 50 grupper saa man kun toppen.
   Samme greb som spoergerunden: flere spalter, taettere raekker og maal der skalerer
   med skaermhoejden - og rul, hvis den alligevel vokser ud over kanten. */
/* Trukket helt op - .lb-card har en margen, der er tiltaenkt pointtavlen alene midt
   paa skaermen, og .live-stage centrerer oveni. Her skal hver pixel bruges. */
.lb-card.sv-kort { width:min(1400px,96%); display:flex; flex-direction:column;
  align-self:flex-start; margin-top:6px; max-height:calc(100vh - 116px); }
/* Kun gitteret ruller. Overskrift, procent og Afslut-knappen er laast fast, saa
   knappen aldrig kan glide ud under skaermkanten, uanset hvor mange grupper der er.
   min-height:0 er det, der faar en flex-boks til RENT FAKTISK at kunne krympe og rulle. */
.sv-kort .lb-head, .sv-kort .sv-status, .sv-kort .sv-slut { flex:0 0 auto; }
.sv-gitter { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  align-content:start; gap:clamp(6px,0.9vh,11px); padding:clamp(8px,1.3vh,16px);
  flex:1 1 auto; min-height:0; overflow:auto; }
.sv-gitter .lb-empty { grid-column:1 / -1; }
/* Navn og tal paa foerste linje, knappen paa anden - saa bliver spalten smal nok
   til at der kan vaere fem af dem. */
.sv-gitter .sv-grow { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin:0; padding:clamp(7px,1vh,12px) clamp(10px,1.2vh,14px); border-radius:13px; }
.sv-gitter .sv-gname { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:clamp(13px,1.6vh,17px); }
.sv-gitter .sv-gstat { flex:0 0 auto; min-width:0; font-size:clamp(12px,1.45vh,15px); }
.sv-gitter .btn-mini { flex:1 0 100%; padding:clamp(5px,0.75vh,8px) 10px;
  font-size:clamp(11.5px,1.35vh,14px); border-radius:9px; }

/* ======================= ELEVBESVARELSER ==================================
   To visninger, ét filter. Alt hvad der staar paa skaermen, foelger med i
   begge eksporter - derfor skal filterlinjen vaere det foerste oejet moeder.
   ======================================================================== */
.res-top { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; }
.res-hent { display:flex; gap:8px; flex-wrap:wrap; }

.res-filtre { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 18px;
  background:var(--card-2,#f2f6fd); border:1px solid #e2e9f6; border-radius:16px;
  padding:14px 18px; margin:14px 0 6px; }
.rf-felt { display:flex; flex-direction:column; gap:6px; min-width:0; }
.rf-felt > label { font-size:11.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); }
.rf-bred { flex:1 1 320px; }
.rf-hurtig { display:flex; gap:5px; }
.rf-h { font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; padding:6px 12px;
  border-radius:999px; border:1px solid #d7e0f0; background:#fff; color:var(--ink); }
.rf-h:hover { border-color:var(--blue); }
.rf-h.aktiv { background:var(--blue); border-color:var(--blue); color:var(--on-blue,#fff); font-weight:800; }
.rf-dato { display:flex; align-items:center; gap:7px; }
.rf-dato span { font-size:13px; color:var(--muted); font-weight:700; }
.res-filtre input[type=date], .res-filtre select { font-family:inherit; font-size:14px; color:var(--ink);
  background:#fff; border:1px solid #d7e0f0; border-radius:10px; padding:8px 11px; outline:none; min-width:0; }
.res-filtre input[type=date]:focus, .res-filtre select:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%, transparent); }
.res-filtre select:disabled { background:#f1f4fa; color:var(--muted); cursor:not-allowed; }
/* Samme egentegnede vinkel som elevernes rullemenu. Et select med egen baggrund og
   kant ligner ellers et skrivefelt - vinklen viser, at der er valg bag. Systemets
   egen pil slaas fra, saa den ser ens ud i Safari og Chrome. */
.res-filtre select { appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316305e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px 16px; }
.res-filtre select:disabled { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab6c9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px 16px; }
.res-filtre select::-ms-expand { display:none; }
.rf-svar { display:flex; gap:8px; }
.rf-svar select { flex:1 1 0; }
.rf-nul { margin-left:auto; }
.rf-status { margin:0 0 4px; padding:9px 14px; background:#fff7e6; border:1px solid #f2ddb8;
  border-radius:10px; font-size:13px; font-weight:700; color:#7a5312; display:none; }

.res-faner { display:flex; gap:6px; border-bottom:2px solid #e6ecf6; margin:16px 0 18px; }
.res-fane { font-family:var(--font-display); font-weight:800; font-size:15px; cursor:pointer;
  background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px;
  padding:10px 16px; color:var(--muted); border-radius:10px 10px 0 0; }
.res-fane:hover { color:var(--blue-dark); background: color-mix(in srgb, var(--blue) 6%, transparent); }
.res-fane.aktiv { color:var(--blue-dark); border-bottom-color:var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--card)); }

.res-qhead { display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.res-qhead .res-qtext { margin:0; flex:1 1 260px; }
/* Svarprocenten hoerer til spoergsmaalet, ikke til soejlerne - derfor staar den heroppe */
.res-rate { flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--muted); white-space:nowrap; }
.res-rate b { color:var(--blue-dark); }
.res-ingen { margin:0; padding:22px 4px; color:var(--muted); font-weight:700; }
.res-ingen.lille { padding:6px 2px; font-size:14px; }
.res-text { font-style:normal; }

.re-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.re-tael { font-family:var(--font-display); font-weight:700; color:var(--muted); }
.re-tael b { color:var(--blue-dark); font-size:18px; }
.re-kort { background:#f6f9ff; border:1px solid #e6ecf6; border-radius:16px; padding:6px 20px 14px; box-shadow:var(--e2); }
.re-meta { display:flex; flex-wrap:wrap; gap:8px 18px; padding:14px 0 12px; margin-bottom:6px;
  border-bottom:1px solid #e6ecf6; font-size:13px; font-weight:700; color:var(--muted); }
.re-linje { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #edf1f9; }
.re-linje:last-child { border-bottom:none; }
.re-nr { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:25px; height:25px;
  border-radius:50%; background:var(--blue-light); color:var(--blue-dark);
  font-family:var(--font-display); font-size:13px; font-weight:800; }
.re-txt { min-width:0; }
.re-spm { font-weight:700; color:var(--ink); font-size:15px; }
.re-svar { margin-top:3px; font-family:var(--font-display); font-weight:800; color:var(--blue-dark); font-size:16px; }
.re-svar.tom { color:var(--muted); font-weight:700; font-style:italic; }

/* ---- Udskrift. Browserens "Gem som PDF" bruges, saa der ikke skal hentes kode
   fra et fremmed domaene for at kunne lave en rapport. ---- */
#resPrint { display:none; }


/* ---- Ét spørgsmål som et rigtigt diagram ------------------------------------
   Soejler uden akse er bare farvede striber - man kan ikke aflaese noget af dem.
   Med en procentakse og lodrette hjaelpelinjer bliver det en graf, man kan pege
   paa i et moede. Skalaen rundes op over den stoerste soejle, saa smaa svar
   stadig er til at se forskel paa.
   Alt ligger i ÉT gitter, saa navne, soejler, andel og antal flugter praecist
   ned gennem hele kortet - ogsaa naar teksterne er forskellig laengde. */
.res-q { background:#fff; border:1px solid #e3e9f4; border-radius:18px; padding:22px 26px 20px; margin-bottom:18px; }
.rq-hoved { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid #eef2f9; }
.rq-titel { display:flex; align-items:baseline; gap:11px; flex:1 1 300px; min-width:0; }
.rq-nr { flex:0 0 auto; font-family:var(--font-display); font-weight:800; font-size:21px;
  letter-spacing:.4px; line-height:1; color:var(--blue); }
.rq-titel h3 { margin:0; font-family:var(--font-display); font-weight:800; font-size:17.5px;
  line-height:1.35; color:var(--ink); }
.rq-tael { flex:0 0 auto; text-align:right; font-size:12.5px; font-weight:700; color:var(--muted); line-height:1.5; }
.rq-tael b { font-family:var(--font-display); font-size:19px; color:var(--blue-dark); }
.rq-tael span { display:block; }
.rq-snit { display:flex; align-items:center; gap:11px; margin:-2px 0 18px; }
.rq-stjerne { flex:0 0 auto; width:32px; height:32px; fill:var(--gold,#f5b301);
  filter:drop-shadow(0 2px 4px color-mix(in srgb, var(--gold,#f5b301) 45%, transparent)); }
.rq-snit-tal { font-family:var(--font-display); font-weight:900; font-size:38px;
  line-height:1; color:var(--blue-dark); letter-spacing:-.5px; }
.rq-snit-af { font-family:var(--font-display); font-weight:800; font-size:17px; color:#9aa7bd; align-self:flex-end; margin-bottom:4px; }
.rq-snit-lbl { margin-left:6px; font-size:12px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); align-self:center; }

.rq-graf { display:grid; align-items:center;
  grid-template-columns:minmax(90px,210px) 1fr 62px 50px; column-gap:14px; row-gap:9px; }
/* Hjaelpelinjerne ligger bag soejlerne og daekker praecis sporets bredde */
/* Hjaelpelinjerne tegnes som baggrund PAA hvert spor. Alle spor er lige brede,
   saa linjerne flugter af sig selv - uden at skulle regnes ud eller placeres i
   gitteret, hvor de skubbede til alle de andre felter. */
.rq-kolhoved { font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:#9aa7bd; text-align:right; padding-bottom:2px; }
.rq-kolhoved:not(.h) { padding:0; }
.rq-navn { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:14.5px; font-weight:700; color:var(--ink); }
.rq-spor { position:relative; height:20px; border-radius:0 5px 5px 0;
  background-color:#eef2fa;
  background-image:repeating-linear-gradient(to right, #dbe3f1 0 1px, transparent 1px var(--trin,25%)); }
/* Ingen mindstebredde: 0% skal se ud som 0, ikke som en lille stump farve */
.rq-fyld { display:block; height:100%; border-radius:0 5px 5px 0;
  background:color-mix(in srgb, var(--blue) 62%, #ffffff); transition:width .45s cubic-bezier(.2,.8,.3,1); }
.rq-fyld.mest { background:var(--blue); }
.rq-pct { text-align:right; font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--blue-dark); }
.rq-antal { text-align:right; font-size:13.5px; font-weight:700; color:var(--muted); }
.rq-akse { position:relative; height:22px; }
.rq-akse span { position:absolute; top:5px; transform:translateX(-50%); font-size:11px;
  font-weight:700; color:#9aa7bd; white-space:nowrap; }

.rq-fritekst { max-height:420px; overflow:auto; border:1px solid #eef2f9; border-radius:12px; }
.rq-fritekst table { width:100%; border-collapse:collapse; font-size:14px; }
.rq-fritekst th { position:sticky; top:0; background:#f4f7fd; text-align:left; padding:9px 14px;
  font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#7b89a1;
  border-bottom:1px solid #e3e9f4; }
.rq-fritekst td { padding:9px 14px; border-bottom:1px solid #f1f4fa; color:var(--ink); vertical-align:top; }
.rq-fritekst tr:last-child td { border-bottom:none; }
.ft-nr { width:44px; text-align:right; color:#9aa7bd !important; font-weight:700; }
.ft-dato { width:150px; white-space:nowrap; color:var(--muted) !important; font-size:13px; }

@media (max-width:720px){
  .rq-graf { grid-template-columns:minmax(70px,120px) 1fr 54px 42px; column-gap:9px; }
}


/* Akut-knappen har fast plads i sidens overskriftsraekke - aldrig svaevende
   nederst til hoejre, hvor den lagde sig oven paa feedback-knappen. */
.side-hoved { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  justify-content:space-between; margin:0 0 16px; }
/* Yderst til hoejre uanset hvad der ellers ligger i raekken */
.side-hoved .sos-mini, .panel-head .sos-mini, #lobbyView .sos-mini, #editorView .sos-mini { margin-left:auto; }

/* Flueben i filterlinjen - skal ikke ligne en overskrift som de andre labels */
.rf-tjek { display:inline-flex; align-items:center; gap:7px; align-self:flex-end; margin-bottom:9px;
  font-size:13px; font-weight:700; color:var(--ink); cursor:pointer;
  text-transform:none; letter-spacing:0; }
.rf-tjek input { width:16px; height:16px; accent-color:var(--blue); cursor:pointer; margin:0; }
.rf-felt input[type=checkbox]:disabled + span, .rf-tjek:has(input:disabled) { opacity:.45; cursor:not-allowed; }

/* Deltagelseskortet - det ene tal, en leder faktisk spoerger om. Ringen er lavet
   af en konisk gradient, saa der ikke skal bruges et diagrambibliotek. */
.dk-kort { display:flex; align-items:center; gap:20px; margin:16px 0 2px;
  padding:18px 24px; border-radius:18px; color:#fff;
  background:linear-gradient(120deg, var(--blue-dark), var(--blue));
  box-shadow:0 14px 32px color-mix(in srgb, var(--blue) 34%, transparent); }
.dk-ring { flex:0 0 auto; position:relative; width:96px; height:96px; border-radius:50%;
  background:conic-gradient(#fff calc(var(--p)*1%), rgba(255,255,255,.24) 0); }
.dk-ring::after { content:""; position:absolute; inset:9px; border-radius:50%;
  background:linear-gradient(120deg, var(--blue-dark), var(--blue)); }
.dk-ring span { position:absolute; inset:0; z-index:1; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-display); font-weight:900; font-size:22px; }
.dk-tekst { min-width:0; }
.dk-stor { margin:0; font-family:var(--font-display); font-weight:800; font-size:20px; line-height:1.3; }
.dk-lille { margin:6px 0 0; font-size:14px; line-height:1.55; color:rgba(255,255,255,.86); }
.dk-lille b { color:#fff; }
@media (max-width:600px){ .dk-kort { flex-direction:column; text-align:center; } }

/* Slet-knappen paa en enkelt besvarelse. Roed og lidt nedtonet - den skal kunne
   findes, men ikke friste. Forklaringen staar ved siden af, saa skolen ved hvornaar. */
.re-slet { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.re-slet-btn { flex:0 0 auto; font-family:inherit; font-weight:800; font-size:13.5px; cursor:pointer;
  color:#b2352f; background:#fdeceb; border:1px solid #f2c9c5; border-radius:10px; padding:8px 16px; }
.re-slet-btn:hover { background:#fbdedb; border-color:#e9b1ab; }
.re-slet-hj { flex:1 1 240px; min-width:0; font-size:12.5px; color:var(--muted); line-height:1.5; }

/* Hent-knapper paa telefon- og mail-spoergsmaal. De svar vil man typisk traekke ud
   alene for at bruge dem, saa knapperne sidder direkte paa kortet. */
.rq-hoejre { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; justify-content:flex-end; }
.rq-hent { display:inline-flex; align-items:center; gap:6px; }
.rq-hent-lbl { font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#9aa7bd; margin-right:2px; }
.rq-hent-b { font-family:inherit; font-weight:800; font-size:12.5px; cursor:pointer;
  color:var(--blue-dark); background:#eaf1ff; border:1px solid #cfdcf6; border-radius:8px; padding:5px 12px; }
.rq-hent-b:hover { background:#dbe7ff; border-color:var(--blue); }

/* Fornavn-kolonne i telefon/mail-oversigten - smal og dæmpet, kontakten er hovedsagen */
.rq-fritekst .ft-navn { width:120px; font-weight:800; color:var(--blue-dark); }

/* ---- "I er færdige" efter spørgeskemaet ----
   Samme opbygning som slutkortet - farvet top med maerke, hvid krop - men GROEN,
   fordi det er spoergeskemaet der er fuldfoert. Loefter beskeden op paa spillets niveau. */
.sv-faerdig { width:min(460px,94%); margin:0 auto; overflow:hidden; border-radius:26px;
  background:linear-gradient(180deg,#ffffff,#f1fbf4); box-shadow:0 26px 70px rgba(6,30,18,.34);
  border:1px solid rgba(120,190,150,.30); }
.svf-top { padding:30px 28px 24px; text-align:center; color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--green,#25a55c) 88%,#fff),var(--green,#25a55c) 60%,var(--green-dark,#17864a)); }
.svf-medal { width:78px; height:78px; margin:0 auto; border-radius:50%;
  background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.svf-medal-in { width:58px; height:58px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(6,30,18,.22); }
.svf-tjek { width:30px; height:30px; fill:none; stroke:var(--green-dark,#17864a);
  stroke-width:3.1; stroke-linecap:round; stroke-linejoin:round; }
.svf-top h1 { margin:16px 0 0; font-family:var(--font-display); font-weight:800; font-size:28px; letter-spacing:.3px; }
.svf-info { margin:8px 0 0; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.85); }
.svf-body { padding:22px 28px 26px; text-align:center; }
.svf-vent { margin:0; font-size:15px; line-height:1.55; color:var(--muted); }
.svf-tael { margin:16px 0 12px; font-size:14.5px; color:var(--muted); }
.svf-tael b { color:var(--green-dark,#17864a); font-family:var(--font-display); }

/* ================= LOBBY - klar til at starte spil =================
   Loeftet til spillets niveau: spilkoden i et fremhaevet kort, en ren indstillingslinje
   og en levende "grupper paa vej ind"-sektion med en pulsende prik. */
.lobby-kort { max-width:780px; margin:0 auto; }
.lobby-code { text-align:center; border-radius:20px; padding:14px 24px 16px;
  background:linear-gradient(160deg, color-mix(in srgb,var(--blue) 12%, #fff), color-mix(in srgb,var(--blue) 22%, #fff));
  border:1px solid color-mix(in srgb,var(--blue) 28%, #fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
.lco-lbl { display:inline-flex; align-items:center; gap:8px; justify-content:center;
  color:var(--blue-dark); font-weight:800; text-transform:uppercase; font-size:12px; letter-spacing:2px; opacity:.72; }
.lco-mark { width:18px; height:18px; background:var(--mark) center/contain no-repeat; }
.lco-num { margin-top:4px; font-family:var(--font-display); font-size:82px; font-weight:900;
  letter-spacing:12px; color:var(--blue-dark); text-indent:12px; line-height:1.06;
  text-shadow:0 2px 10px color-mix(in srgb,var(--blue) 24%, transparent); }

.lobby-linje { display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin:22px 0 4px; }
.lobby-titel { font-family:var(--font-display); font-weight:800; font-size:21px; color:var(--ink); }
.lobby-len { display:flex; align-items:center; gap:12px; }
.ll-lbl { font-size:13px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); }
.ll-ctrl { display:inline-flex; align-items:center; gap:8px; padding:6px;
  background:linear-gradient(180deg,#f4f8ff,#e9f0fd); border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff); border-radius:999px;
  box-shadow:inset 0 1px 0 #fff; }
/* Runde skru-knapper med tegnet minus/plus og et lille "5" - som en tidsvaelger i et spil */
.ll-knap { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  width:44px; height:44px; border:none; border-radius:50%; cursor:pointer;
  background:linear-gradient(180deg,#ffffff,#eaf1ff); color:var(--blue-dark);
  box-shadow:0 3px 8px rgba(20,50,120,.18), inset 0 1px 0 #fff; transition:transform .12s, box-shadow .15s; }
.ll-knap:hover { background:linear-gradient(180deg,#fff,#dde8ff); }
.ll-knap:active { transform:scale(.92); box-shadow:0 1px 4px rgba(20,50,120,.2); }
.ll-knap svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }
.ll-knap small { font-size:9px; font-weight:800; letter-spacing:.5px; margin-top:-2px; opacity:.72; }
.ll-tid { display:inline-flex; align-items:center; gap:7px; min-width:104px; justify-content:center; }
.ll-ur { width:19px; height:19px; fill:none; stroke:var(--blue); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ll-tid b { font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--blue-dark); }

.lobby-grp { margin-top:22px; padding-top:18px; border-top:1px solid #eef2f9; }
.lg-head { display:flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-weight:800; font-size:16px; color:var(--ink); }
.lg-dot { width:10px; height:10px; border-radius:50%; background:#22c065; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(34,192,101,.55); animation:lgPuls 1.8s ease-out infinite; }
.lg-tal { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px;
  padding:0 7px; border-radius:999px; background:var(--blue); color:var(--on-blue,#fff);
  font-size:13px; font-weight:800; }
@keyframes lgPuls { 0%{box-shadow:0 0 0 0 rgba(34,192,101,.5);} 70%{box-shadow:0 0 0 8px rgba(34,192,101,0);} 100%{box-shadow:0 0 0 0 rgba(34,192,101,0);} }
@media (prefers-reduced-motion: reduce){ .lg-dot { animation:none; } }
.lobby-start { margin-top:22px; font-size:18px; padding:16px; box-shadow:0 12px 28px rgba(20,120,60,.32); }

/* ================= ELEVERNES VENTESKAERM (i lobbyen) =================
   Loeftet til spillets niveau: farvet top med maerke, hvid krop med en levende
   "venter"-animation. Centreret paa hele skaermen, som slutkortet. */
.vent-wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:20px; box-sizing:border-box; z-index:5; }
.vent-kort { width:min(440px,92%); overflow:hidden; border-radius:26px;
  background:linear-gradient(180deg,#ffffff,#f4f8ff); box-shadow:0 26px 70px rgba(6,18,50,.42); }
.vent-kort .vk-top { padding:32px 28px 26px; text-align:center; color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 82%,#fff),var(--blue) 60%,var(--blue-dark)); }
.vent-kort .vk-medal { width:78px; height:78px; margin:0 auto; border-radius:50%;
  background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.vent-kort .vk-medal-in { width:58px; height:58px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(6,18,50,.22); }
.vent-kort .vk-check { width:30px; height:30px; fill:none; stroke:var(--blue-dark);
  stroke-width:3.1; stroke-linecap:round; stroke-linejoin:round; }
.vent-kort .vk-top h1 { margin:16px 0 0; font-family:var(--font-display); font-weight:800; font-size:30px; }
/* "I er med!" er nu en lille overraskelse OVER navnet - navnet er det store */
.vent-kort .vk-med { margin:14px 0 0; font-family:var(--font-display); font-weight:800; font-size:15px;
  letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.78); }
.vent-kort h1.vk-navn { display:block; margin:4px 0 0; padding:0; background:none; box-shadow:none;
  font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.4vw,38px); color:#fff; line-height:1.15; }
/* Kode-paamindelse - det de SKAL huske, saa den er tydelig */
.vent-kort .vk-kode { background:#eef3ff; border:1px solid rgba(120,150,210,.32); border-radius:16px;
  padding:14px 18px; margin:0 0 4px; }
.vent-kort .vk-kode-lbl { display:block; font-family:var(--font-display); font-weight:800; font-size:13.5px;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); }
.vent-kort .vk-kode-tal { display:block; margin:3px 0 6px; font-family:var(--font-display); font-weight:900;
  font-size:40px; letter-spacing:8px; color:var(--blue-dark); text-indent:8px; }
.vent-kort .vk-kode-note { display:block; font-size:15px; line-height:1.55; color:#4a5a76; }

.vent-kort .vk-navn { display:inline-block; margin:12px 0 0; padding:6px 16px; border-radius:999px;
  background:rgba(255,255,255,.20); color:#fff; font-family:var(--font-display); font-weight:800; font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.vent-kort .vk-krop { padding:24px 28px 28px; text-align:center; }
.vent-kort .vk-vent { margin:14px 0 0; font-size:16.5px; line-height:1.5; color:var(--muted); }
/* Tre prikker der "aander" paa skift - venlig venteanimation i stedet for et timeglas */
.vk-prikker { display:flex; align-items:center; justify-content:center; gap:9px; }
.vk-prikker span { width:12px; height:12px; border-radius:50%; background:var(--blue);
  animation:ventPrik 1.3s ease-in-out infinite; }
.vk-prikker span:nth-child(2){ animation-delay:.18s; }
.vk-prikker span:nth-child(3){ animation-delay:.36s; }
@keyframes ventPrik { 0%,100%{ transform:scale(.6); opacity:.35; } 50%{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .vk-prikker span { animation:none; opacity:.7; } }

.wp-reopen-ic { width:18px; height:18px; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; flex:0 0 auto; }

/* ---- Hjaelpe-knapper paa overblikket (stak i venstre hjoerne) ---- */

/* Rundvisningen ligger diskret nederst i venstre hjoerne - lys, halvgennemsigtig */
/* "Sådan spiller I" (elev): samme guld-form som spilstyrerens knap, placeret oppe under
   "Læs startbeskeden igen" (i stedet for nede i hjørnet). Guld/padding/kant fra #tourBtn-reglen. */
.wp-tour { position:absolute; left:24px; top:74px; z-index:4;
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display);
  font-weight:700; font-size:14px; line-height:1; cursor:pointer; border-radius:8px;
  transition:filter .12s ease, transform .12s ease; }
.wp-tour:hover { transform:translateY(-1px); filter:brightness(1.05); }
/* Elev-skærm (body.play): billeder (område-ikoner/logoer) kan ikke "trækkes" ud ved et uheldigt
   hold-og-træk. Tekst-markering er BEVIDST tilladt - ordblinde elever bruger oplæsningsprogrammer
   der skal kunne markere tekst, så vi må ALDRIG sætte user-select:none her. */
body.play img { -webkit-user-drag:none; }
/* Spilstyrer-siden (teacher): INTET kan markeres = rigtig app-følelse. De skal aldrig have læst op.
   Undtaget: felter man skriver i (input/textarea/select) og spilkoden man skal kunne kopiere. */
body.teacher, body.teacher * { -webkit-user-select:none; -moz-user-select:none; user-select:none; }
body.teacher input, body.teacher textarea, body.teacher select { -webkit-user-select:text; -moz-user-select:text; user-select:text; }
body.teacher .codepill2, body.teacher .codepill, body.teacher #lhCode,
body.teacher #gamesTable, body.teacher #gamesTable * { -webkit-user-select:text; -moz-user-select:text; user-select:text; }
/* BOOKING er ikke et spil - det er kontorarbejde (23/8). Her SKAL man kunne markere en
   mailadresse eller et telefonnummer og kopiere det ud, fx over i et brev eller et
   regneark. Reglen lige ovenfor slukker markering i HELE body.teacher, og booking arvede
   den, så man kun kunne KLIKKE på mailen og få sit mailprogram op - ikke tage teksten.
   Her tændes den igen, men kun for data: tabeller, noter, svar og brødtekst. */
#bookView .bk-tabel, #bookView .bk-tabel *,
#bookView .bk-note, #bookView .bk-note *,
#bookView .bk-det-linje, #bookView .bk-det-linje *,
#bookView .bk-ud-rk, #bookView .bk-ud-rk *,
#bookView p, #bookView .hint, #bookView h1, #bookView h2, #bookView h3
  { -webkit-user-select:text; -moz-user-select:text; user-select:text; }
/* ...men ikke knapperne og mærkaterne inde i dem. Trækker man hen over en række for at
   tage mailen, skal "Se alle svar" ikke blive markeret med. */
#bookView button, #bookView .btn, #bookView .btn-mini, #bookView .bk-x,
#bookView .tag, #bookView .bk-fane, #bookView th
  { -webkit-user-select:none; -moz-user-select:none; user-select:none; }
/* Et link kan ikke markeres ved at trække hen over det - browseren tror, man vil trække
   selve linket ud. Derfor slås det fra på mail-links, så de opfører sig som tekst. */
#bookView a { -webkit-user-drag:none; }
/* Spil-chrome (knapper, topbar, kort-knuder, labels, badges) kan IKKE markeres = rigtig spil-følelse.
   Indholds-tekst (spørgsmål, svar, hints, område-/udfordrings-beskrivelser) forbliver markerbar til oplæsning. */
body.play button, body.play .btn, body.play .btn-mini,
body.play .topbar, body.play .oh-left, body.play .oh-right, body.play .oh-pill, body.play .oh-logout,
body.play .area-hub, body.play .task-node, body.play .nd-label,
body.play .ch-crumb, body.play .task-badges, body.play .all-done-badge, body.play .chip,
body.play .scoreTag, body.play #scoreTag, body.play .sk-score {
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
}
.wp-tour-ic { width:16px; height:16px; fill:none; stroke:var(--blue); stroke-width:2; flex:0 0 auto; }

/* ---- Rundvisning (spotlight) - samme sprog som editorens ---- */
#walkBlocker { position:fixed; inset:0; z-index:9000; }
#walkHole { position:fixed; z-index:9001; border-radius:18px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(8,18,44,.66); border:3px solid #ffd75e; transition:all .25s ease; }
#walkTip { position:fixed; z-index:9002; font-family:var(--font-body); color:#4a4638;
  background:linear-gradient(180deg,#fdfbf7,#f4eee2);
  border-radius:18px; box-shadow:0 26px 64px rgba(40,30,18,.42);
  border:1px solid #e5dbc7; padding:20px 22px; }
#walkTip .wt-step { font-family:'Nunito',sans-serif; font-size:12px; font-weight:800; color:#9c3f4d; letter-spacing:1.5px; text-transform:uppercase; }
#walkTip h3 { font-family:'Fraunces',serif; font-weight:700; margin:7px 0 9px; font-size:22px; color:#231a1c; line-height:1.15; }
#walkTip p { margin:0 0 14px; font-size:14.5px; line-height:1.6; color:#6b5f5a; white-space:pre-line; }
#walkTip .wt-dots { display:flex; gap:6px; margin:0 0 15px; }
#walkTip .wt-dots i { width:7px; height:7px; border-radius:50%; background:rgba(60,50,30,.2); transition:all .22s; }
#walkTip .wt-dots i.on { background:#9c3f4d; width:20px; border-radius:4px; }
#walkTip .wt-btns { display:flex; align-items:center; gap:8px; }
#walkTip .btn-mini { background:#efe7d9; color:#3b3a34; border:none; }
#walkTip .btn-mini:hover { background:#e6dbc7; }
#walkTip #wtSkip { background:none; border:none; box-shadow:none; border-radius:0; color:#8a8270; text-decoration:underline; cursor:pointer; font-family:inherit; font-size:14px; padding:6px 4px; }
#walkTip #wtSkip:hover { color:#5b5647; background:none; }
#walkTip #wtNext { background:#9c3f4d; color:#fff; border:1px solid #9c3f4d; font-weight:700; box-shadow:0 6px 18px rgba(156,63,77,.32); padding:11px 22px; transition:transform .2s, box-shadow .2s, background .2s; }
#walkTip #wtNext:hover { transform:translateY(-1px); background:#8a3646; border-color:#8a3646; box-shadow:0 9px 24px rgba(156,63,77,.4); }

/* ---- FIND FEJL PÅ BILLEDE (spot) ---- */
.spot-count { display:inline-flex; align-items:center; gap:7px; background:var(--blue-light); color:var(--blue-dark);
  font-weight:800; font-size:16px; padding:8px 16px; border-radius:999px; margin:2px 0 12px; line-height:1;
  box-shadow:0 3px 9px color-mix(in srgb, var(--blue) 20%, transparent); }
.spot-count b { font-weight:900; font-size:1.1em; }
.spot-wrap { position:relative; display:inline-block; max-width:100%; line-height:0;
  border-radius:16px; overflow:hidden; cursor:crosshair; box-shadow:0 10px 26px rgba(6,18,50,.30); }
.spot-img { display:block; max-width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
.spot-marks { position:absolute; inset:0; }
/* Elevens maerke - en ring der sidder, hvor de trykkede */
.spot-mark { position:absolute; width:34px; height:34px; transform:translate(-50%,-50%); padding:0;
  border-radius:50%; border:3px solid #fff; background:color-mix(in srgb,var(--blue) 62%, transparent);
  box-shadow:0 2px 8px rgba(0,0,0,.45); cursor:pointer; transition:transform .1s; }
.spot-mark:hover { transform:translate(-50%,-50%) scale(1.08); }
.spot-mark.correct { background:rgba(33,160,90,.82); border-color:#eafff2; }
.spot-mark.wrong { background:rgba(200,60,50,.82); border-color:#ffecec; }
.spot-mark.spot-fade { opacity:0; transform:translate(-50%,-50%) scale(.35); transition:opacity .32s ease, transform .32s ease; pointer-events:none; }
/* Facit: hvor problemerne var, med et lille nummer + tekst */
.spot-reveal { position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:8px;
  pointer-events:none; z-index:2; }
.spot-reveal .sr-no { flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:#17864a; color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800;
  border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.45); }
.spot-reveal .sr-lb { background:rgba(23,134,74,.94); color:#fff; font-size:13px; font-weight:700;
  padding:5px 10px; border-radius:9px; white-space:nowrap; box-shadow:0 3px 9px rgba(0,0,0,.35); }
.spot-mark.dev { width:auto; height:auto; padding:3px 7px; border-radius:8px; font-size:11px; font-weight:800; color:#fff; }

/* "Afslut"-knap i spil-listen - roedtonet, men mindre alarmerende end slet-krydset */
.g-actions { white-space:nowrap; text-align:right; }
.btn-mini.luk-mini { margin-right:8px; background:#fdeceb; color:#b2352f; border:1px solid #f2c9c5; font-weight:800; }
.btn-mini.luk-mini:hover { background:#fbdedb; border-color:#e9b1ab; }

/* Opgave-titlen som et "quest-badge" - farve, dybde og en stjerne, så det føles
   som navnet på en bane i stedet for en flad label. */
.opg-badge { display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--blue) 88%, #fff), var(--blue-dark));
  color:#fff; padding:13px 24px; border-radius:999px;
  font-family:var(--font-display); font-weight:800; font-size:17px; line-height:1.15; letter-spacing:.3px;
  max-width:100%; overflow-wrap:anywhere;
  box-shadow:0 7px 18px color-mix(in srgb,var(--blue) 40%, transparent), inset 0 1.5px 0 rgba(255,255,255,.34), inset 0 -4px 7px rgba(0,0,0,.20); border:1px solid rgba(0,0,0,.16); }
.opg-badge::before { content:""; flex:0 0 auto; width:16px; height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffd873'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 18l-5.9 3.2 1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
/* Sti i navne-badgen: område › opgavenavn - begge hvide og ens */
.opg-badge .tb-sep { opacity:.7; margin:0 9px; font-weight:700; }
/* De to badges (navn + løst) flugter på linje */
.task-badges { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
/* Fast header-layout: sti på række 1, point (+ evt. Vis hint til højre) på række 2. */
.task-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:12px; }
.task-meta .hint-btn { margin:0; }
/* Grøn "løst"-boks ved siden af opgavens navn-badge (pop ind når man svarer rigtigt) */
.opg-solved { display:inline-flex; align-items:center;
  background:linear-gradient(180deg,#43cf70,#22a24a); color:#fff; padding:13px 24px; border-radius:999px;
  font-family:var(--font-display); font-weight:800; font-size:17px; line-height:1; letter-spacing:.3px;
  box-shadow:0 7px 18px rgba(34,162,74,.42), inset 0 1.5px 0 rgba(255,255,255,.36), inset 0 -4px 7px rgba(0,0,0,.20); border:1px solid rgba(0,0,0,.16); }
.opg-solved.pop { animation:solvedPop .5s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes solvedPop { 0%{opacity:0; transform:scale(.4) translateY(4px);} 60%{transform:scale(1.14);} 100%{opacity:1; transform:scale(1) translateY(0);} }
/* Levende point-nedtaeller paa opgaven */
.opg-points { display:inline-flex; align-items:center; padding:13px 24px; border-radius:999px;
  font-family:var(--font-display); font-weight:800; font-size:17px; line-height:1; letter-spacing:.3px; color:#fff;
  box-shadow:0 6px 15px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.3); border:1px solid rgba(0,0,0,.16); }
.opg-points::before { content:"🎯"; margin-right:7px; font-size:14px; }
.opg-points.pt-groen { background:linear-gradient(180deg,#43cf70,#22a24a); box-shadow:0 6px 15px rgba(34,162,74,.4), inset 0 1.5px 0 rgba(255,255,255,.34), inset 0 -4px 7px rgba(0,0,0,.20); }
.opg-points.pt-gul   { background:linear-gradient(180deg,#ffc247,#f0a412); box-shadow:0 6px 15px rgba(230,150,10,.4), inset 0 1.5px 0 rgba(255,255,255,.38), inset 0 -4px 7px rgba(0,0,0,.18); }
.opg-points.pt-roed  { background:linear-gradient(180deg,#ff6a6a,#e23b3b); box-shadow:0 6px 15px rgba(200,40,40,.4), inset 0 1.5px 0 rgba(255,255,255,.32), inset 0 -4px 7px rgba(0,0,0,.20); }
.opg-points.tael { animation:ptDrop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes ptDrop { 0%{transform:scale(1) rotate(0);} 25%{transform:scale(1.3) rotate(-3deg);} 55%{transform:scale(.94) rotate(2deg);} 100%{transform:scale(1) rotate(0);} }
/* Konfetti - kun ved fuld pot (100 point) */
.konfetti { position:fixed; left:0; right:0; top:34%; height:0; pointer-events:none; z-index:9998; }
.konfetti i { position:absolute; top:0; width:9px; height:14px; border-radius:2px; opacity:0;
  animation:konfFly 1.15s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes konfFly { 0%{opacity:1; transform:translate(0,0) rotate(0);}
  100%{opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--rot));} }

/* "Bygges senere"-opgaver: pæn placeholder i stedet for et tomt felt */
.task-todo { display:flex; align-items:center; gap:16px; padding:22px 24px; margin:6px 0;
  background:linear-gradient(180deg,#fff8ec,#fdeecb); border:1px dashed #e6c078; border-radius:16px; }
.task-todo .tt-ic { font-size:34px; flex:0 0 auto; }
.task-todo p { margin:0; font-size:15px; line-height:1.5; color:#7a5a1e; }
.task-todo b { color:#5f4413; }
.hint-btn { margin:12px 0 6px; width:auto; }

/* Følg os på sociale medier - elevernes oversigt (klik-brik under spillet) */
/* "Følg os"-dropdown: en lille panel-liste der folder ud under knappen i højre side.
   Hver række: klikbart brand-ikon + navn til venstre, lille scanbar QR til højre.
   Premium-look der matcher spillets øvrige kort: dyb blød skygge, fin kant, blød indtoning. */
.soc-drop{ position:absolute; top:86px; right:24px; z-index:99999; width:330px; max-width:calc(100vw - 40px);
  background:linear-gradient(180deg,#ffffff,#f7f9fe); border-radius:20px; padding:10px;
  box-shadow:0 2px 0 rgba(255,255,255,.7) inset, 0 30px 70px rgba(10,25,60,.34), 0 8px 22px rgba(10,25,60,.18);
  border:1px solid rgba(255,255,255,.9); outline:1px solid rgba(20,50,120,.08);
  animation:socDropIn .22s cubic-bezier(.2,.9,.25,1.1); transform-origin:top right; }
.soc-drop::before{ content:""; position:absolute; top:-9px; right:34px; width:18px; height:18px;
  background:#fff; border-left:1px solid rgba(20,50,120,.08); border-top:1px solid rgba(20,50,120,.08);
  transform:rotate(45deg); border-radius:4px 0 0 0; }
@keyframes socDropIn{ from{ opacity:0; transform:translateY(-10px) scale(.96);} to{ opacity:1; transform:none;} }
.soc-drop-head{ font-family:var(--font-display); font-weight:800; font-size:16px; color:#16233d; padding:8px 10px 10px; letter-spacing:.2px; }
.soc-drop-foot{ color:#8794a8; font-size:12px; text-align:center; padding:9px 6px 3px; border-top:1px solid rgba(20,50,120,.08); margin-top:5px; }
.soc-row{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:13px; transition:background .12s ease, transform .12s ease; }
.soc-row:hover{ background:#eef3fc; transform:translateX(2px); }
.soc-ico{ display:flex; align-items:center; gap:13px; flex:1; min-width:0; text-decoration:none; color:#16233d; }
.soc-ico-noclick{ cursor:default; }
.soc-badge{ width:46px; height:46px; border-radius:13px; flex:0 0 auto; overflow:hidden;
  box-shadow:0 3px 9px rgba(0,0,0,.18); transition:transform .12s ease; }
.soc-row:hover .soc-badge{ transform:scale(1.06); }
.soc-badge svg, .soc-badge img{ width:100%; height:100%; display:block; object-fit:cover; }
.soc-nm{ font-weight:800; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
a.soc-ico:hover .soc-nm{ text-decoration:underline; }
.soc-qr-mini{ width:70px; height:70px; flex:0 0 auto; border:1px solid #e7ebf3; border-radius:11px; padding:4px; background:#fff; box-shadow:0 2px 6px rgba(20,50,120,.08); }

/* Stor, tydelig til/fra-kontakt til "Vis Følg os-brikken" i editoren - så teksten ikke overses. */
.soc-toggle{ display:flex; align-items:center; gap:13px; margin:0 0 12px; cursor:pointer;
  padding:12px 14px; border-radius:14px; background:#f3f6fc; border:1.5px solid #e2e8f4; transition:border-color .12s ease, background .12s ease; }
.soc-toggle:hover{ border-color:#c9d6ee; }
.soc-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.soc-toggle-track{ position:relative; flex:0 0 auto; width:56px; height:32px; border-radius:999px; background:#c4cddd; transition:background .18s ease; box-shadow:inset 0 1px 3px rgba(0,0,0,.14); }
.soc-toggle-knob{ position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.28); transition:transform .18s cubic-bezier(.3,.9,.3,1.2); }
.soc-toggle input:checked + .soc-toggle-track{ background:#2a8a3d; }
.soc-toggle input:checked + .soc-toggle-track .soc-toggle-knob{ transform:translateX(24px); }
.soc-toggle input:focus-visible + .soc-toggle-track{ outline:2px solid #2a8a3d; outline-offset:2px; }
.soc-toggle-txt{ font-weight:800; font-size:15.5px; color:#16233d; }

/* Følg os - aktivitet på statistiksiden: én række pr. platform med klik / scan / i alt. */
.soc-st-list{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.soc-st-row{ display:flex; align-items:center; gap:10px; background:#f6f8fc; border:1px solid #e7edf7; border-radius:12px; padding:12px 14px; }
.soc-st-name{ flex:1; min-width:0; font-weight:800; font-size:15px; color:#16233d; }
.soc-st-cell{ flex:0 0 auto; text-align:center; min-width:58px; display:flex; flex-direction:column; line-height:1.1; }
.soc-st-cell b{ font-size:19px; color:#16305e; }
.soc-st-cell span{ font-size:11.5px; color:#7a889e; margin-top:2px; }
.soc-st-tot b{ color:#2a8a3d; }

/* ===== IKON PR. GRUPPE I KONTROLPANELET ======================================
   Grupperne skal kunne skelnes - men farvede kanter OG farvede overskrifter OG et
   farveskær blev til for meget, da rammen først var faldet til ro. Tilbage står ikonet:
   det siger hvad gruppen ER, virker i gråtoner og på det mørke tema, og lader farven
   blive dér, hvor den betyder noget - på knapperne. */
#sideEditor h3, #sideResults h3, #sidePlay h3, #sideInvite h3 { display:flex; align-items:center; gap:8px; }
#sideEditor h3::before, #sideResults h3::before, #sidePlay h3::before, #sideInvite h3::before {
  content:''; width:16px; height:16px; flex:0 0 auto; background: currentColor;
  -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
#sideEditor  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
#sideResults { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='4' y1='20' x2='4' y2='12'/%3E%3Cline x1='10' y1='20' x2='10' y2='4'/%3E%3Cline x1='16' y1='20' x2='16' y2='9'/%3E%3Cline x1='22' y1='20' x2='2' y2='20'/%3E%3C/svg%3E"); }
#sidePlay    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V4h9l1 2h6v9h-7l-1-2H4'/%3E%3C/svg%3E"); }
#sideInvite  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
/* ===== RAMME KONTRA HANDLING =================================================
   Problemet: primærfarven blev brugt til ALT - topbjælke, sidefane, hver eneste knap.
   Når alt er brandfarven, betyder brandfarven ingenting, og øjet får intet sted at hvile.
   I STX faldt den grønne opret-knap oveni og forsvandt.
   Reglen nu: RAMMEN er en dyb nuance af spillets farve, HANDLINGERNE er den rene farve.
   Topbjælken og "Kontrolpanel"-fanen hører til rammen - de skal kunne ses, ikke råbe.
   Knapperne beholder den fulde farve, for det er dem, man skal klikke på, og opret-
   knappen beholder sin egen grønne, så den står alene som dagens ene store handling.
   Nuancen regnes ud af skolens EGEN farve, så den følger alle fire spil og alle temaer. */
.topbar { background: linear-gradient(180deg,
  color-mix(in srgb, var(--blue) 42%, #0e1b29), color-mix(in srgb, var(--blue) 30%, #0b1524)) !important; }
.page-tab { background: linear-gradient(180deg,
  color-mix(in srgb, var(--blue) 46%, #0e1b29) 0%,
  color-mix(in srgb, var(--blue) 34%, #0b1524) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--blue) 55%, #0b1524) !important; }

/* ===========================================================================
   BOOKING (§12) - skolens booking-skærm i kontrolpanelet.
   Den OFFENTLIGE side (book.html) har sin egen styling i filen selv, fordi den
   vender ud mod grundskoler og ikke skal trække spillets udseende med sig.
   Her styles KUN skolens egen skærm, og den følger produktets øvrige sprog:
   ramme i dyb nuance, handling i fuld farve (§5w), dybde på knapper (§5j).
   =========================================================================== */
#sideBooking { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3Cpath d='M8.5 14.5l2 2 4.5-4.5'/%3E%3C/svg%3E"); }
.bk-adr { display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:space-between;
  background: color-mix(in srgb, var(--blue) 7%, #fff); border:1px solid color-mix(in srgb, var(--blue) 26%, #fff);
  border-radius:16px; padding:16px 20px; margin:18px 0 6px; }
.bk-adr b { font-size:16px; }
.bk-adr-hoejre { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.bk-adr-hoejre input { width:min(430px, 60vw); font-weight:700; background:#fff; }
.bk-adr-hoejre .btn-mini { text-decoration:none; }
/* FLETTEKODER, to dele (§12g). VAERKTOEJSLINJEN staar over selve tekstfeltet og ligner en
   vaerktoejslinje: smaa knapper paa én raekke, klistret op ad feltet de virker paa.
   FORKLARINGEN under feltet er almindelig tekst, saa den kan markeres og kopieres. */
.bk-flet-bar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 -1px;
  padding:7px 9px; border:1.5px solid #e2e9f6; border-bottom:0; border-radius:10px 10px 0 0; background:#f6f9ff; }
.bk-flet-lbl { font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#93a3bb; margin-right:2px; }
.bk-flet-kode { font-weight:700; font-size:12.5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:4px 9px; border-radius:7px; cursor:pointer; flex:0 0 auto; line-height:1.3;
  border:1px solid #d6e0f2; background:#fff; color:var(--blue-dark); transition:all .12s; }
.bk-flet-kode:hover { border-color:var(--blue); background:color-mix(in srgb, var(--blue) 10%, #fff); }
/* Feltet under linjen skal se ud som ÉN ting sammen med den - ellers svaever knapperne. */
.bk-flet-bar + textarea { border-top-left-radius:0; border-top-right-radius:0; }
.bk-flet-liste { margin-top:9px; font-size:13px; line-height:1.75; color:var(--muted); }
.bk-flet-liste code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  font-weight:700; color:#4a5f80; background:none; padding:0; }
.bk-faner { display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 20px; border-bottom:2px solid color-mix(in srgb, var(--blue) 18%, #fff); padding-bottom:0; }
.bk-fane { font:inherit; font-weight:800; font-size:15px; padding:11px 20px; border:none; background:none; cursor:pointer;
  color:#5a6b82; border-bottom:3px solid transparent; margin-bottom:-2px; border-radius:10px 10px 0 0; }
.bk-fane:hover { color:var(--blue-dark); background:color-mix(in srgb, var(--blue) 7%, #fff); }
.bk-fane.on { color:var(--blue-dark); border-bottom-color:var(--blue); background:color-mix(in srgb, var(--blue) 10%, #fff); }
/* ANDEN RÆKKE: fanerne inde i det valgte emne. De skal vaere tydeligt UNDERORDNEDE, men
   stadig tydeligt FANER. Foerste forsoeg var kun "lettere" - mindre tekst, ingen ramme,
   ingen streg - og saa lignede de broedtekst, der laa og flød under overskriften.
   Loesningen er en bakke: raekken faar sin egen ramme, saa oejet ser EN gruppe knapper,
   og den valgte loefter sig op som et hvidt kort med skygge (samme greb som en
   segmenteret kontakt). Underordningen ligger nu i stoerrelsen og i bakken - ikke i at
   goere dem svage at se. */
/* UNDERFANERNE. To ting skulle loeses paa én gang: de forsvandt i siden, da de laa i
   skolens egen farve - og en moerk bjaelke blev for tung og gjorde den graa skrift
   svaer at laese. Loesningen er en almindelig segmenteret kontrol: en rolig, kold
   graa flade med den valgte som en HVID, loeftet brik. Kontrasten mellem flad graa og
   loeftet hvid er dét, der goer den tydelig - ikke maengden af farve.
   Bevidst uafhaengig af skolens farve, saa en lys guldfarve fungerer lige saa godt. */
.bk-underfaner { border-bottom:none; margin:-2px 0 22px; padding:5px; gap:3px;
  background:#eef1f6; border:1px solid #dde4ee;
  border-radius:13px; width:fit-content; max-width:100%; align-items:center;
  box-shadow:inset 0 1px 2px rgba(22,35,61,.05); }
.bk-und-lbl { color:#4a5975; font-size:11.5px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; padding:0 13px 0 11px; white-space:nowrap; }
/* Fravalgte: MOERK tekst paa lys bund - altid til at laese. */
.bk-underfaner .bk-fane { font-size:14.5px; font-weight:800; padding:9px 18px; border-bottom:none;
  border-radius:9px; color:#3c4a63; border:1px solid transparent; margin-bottom:0; }
.bk-underfaner .bk-fane:hover { background:rgba(255,255,255,.75); color:#16233d; border-color:transparent; }
/* Den valgte er en hvid brik, der ligger OVEN PAA fladen. */
.bk-underfaner .bk-fane.on { background:#fff; color:#16233d; border-color:#d5dded;
  box-shadow:0 1px 3px rgba(22,35,61,.16), 0 3px 8px rgba(22,35,61,.07); }
@media (max-width:700px) {
  .bk-underfaner { width:100%; flex-wrap:wrap; }
  .bk-und-lbl { width:100%; padding:2px 4px 6px; }
}
.bk-to { display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); align-items:start; }
/* En spalte med flere kasser under hinanden. Kasserne arver spaltens bredde, saa to ting,
   der hoerer til det samme, ogsaa SER ens ud - forskellig bredde ligner en fejl. */
.bk-spalte { min-width:0; display:flex; flex-direction:column; }
.bk-boks { background:#fbfcfe; border:1px solid #e3e9f3; border-radius:16px; padding:20px 22px; }
.bk-boks h3 { margin:0 0 12px; font-size:18px; }
/* TRE NIVEAUER I ÉT KORT. Stod alt som h3, saa "Træk jeres regneark ind" ud til at
   vaere en helt tredje ting - i stedet for den ene af to maader at goere det samme paa.
   h3 = hvad man kan her. h4 = hvordan. Forskellen skal kunne SES paa et blik, ellers
   er hierarkiet kun noget, der staar i koden. */
.bk-boks h4.bk-under-h {
  margin:20px 0 8px; font-size:14px; font-weight:800; color:#5a6b88;
  letter-spacing:.03em; display:flex; align-items:center; gap:10px;
}
/* En fin streg ud til kanten, saa underoverskriften ikke svaever. */
.bk-boks h4.bk-under-h::after {
  content:''; flex:1; height:1px; background:var(--card-2);
}
/* Ret/Gem/Fortryd kan staa PAA underoverskriften (§12c, 27/8). Stregen ovenfor skubber
   dem ud til hoejre af sig selv - og paa en smal skaerm falder de ned under i stedet for
   at klemme overskriften sammen. */
.bk-boks h4.bk-under-h { flex-wrap:wrap; }
/* Raekkefoelgen: overskrift, streg, knapper. Uden "order" lander ::after sidst, og saa
   staar knappen klemt inde mellem ordet og en streg, der peger ud i ingenting. */
.bk-boks h4.bk-under-h::after { order:1; }
.bk-boks h4.bk-under-h .btn-mini { order:2; flex:0 0 auto; font-weight:700; letter-spacing:0; }
/* Skillelinjen mellem kortets to halvdele. */
.bk-boks hr.bk-del {
  border:none; border-top:2px solid var(--card-2); margin:26px 0 20px;
  /* display+width SKAL staa der: er kortet et flex-element, bliver en <hr> uden
     indhold nul pixels bred og render som en lille prik i venstre kant. */
  display:block; width:100%; height:0;
}
/* KORTETS HOVED: overskrift til venstre, ret/gem/fortryd øverst til højre. Ét fast sted
   i hele booking - lå knapperne nederst i det ene kort og midt i det andet, skulle man
   lede efter dem hver gang. Knapperne er btn-mini: det er en handling på kortet, ikke
   sidens vigtigste knap, og i fuld størrelse fyldte de mere end det, de retter i. */
.bk-boks-h { margin:0 0 14px; gap:8px; align-items:center; flex-wrap:wrap; }
.bk-boks-h .btn-mini { flex:0 0 auto; }
/* Gem er den, man skal ramme - den har farve, de andre er stille. */
.bk-boks-h .bk-gem { background:var(--blue); color:#fff; }
.bk-boks-h .bk-gem:hover { background:var(--blue-dark); }
.bk-boks label { display:block; font-weight:800; font-size:14px; margin-bottom:5px; }
.bk-boks input[type=text], .bk-boks input[type=time], .bk-boks input[type=number], .bk-boks select, .bk-boks textarea { width:100%; }
.bk-rk { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bk-rk2 { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
.bk-tjek { display:flex !important; align-items:center; gap:9px; font-weight:700; font-size:14px; cursor:pointer; margin:0; }
.bk-tjek input { width:18px; height:18px; flex:0 0 auto; }
.bk-farve { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bk-farve input[type=color] { width:44px; height:34px; padding:2px; border:1px solid #e3e9f3; border-radius:9px; background:#fff; cursor:pointer; }
/* --- nøgletal --- */
.bk-tal { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }
.bk-tal-kort { background:#fff; border:1px solid #e3e9f3; border-radius:14px; padding:16px 18px; box-shadow:0 5px 16px rgba(14,27,41,.06); }
.bk-tal-kort b { display:block; font-size:30px; font-weight:900; color:var(--blue-dark); line-height:1.15; }
.bk-tal-kort span { color:#5a6b82; font-size:14px; font-weight:700; }
/* KLIKBARE nøgletal (§12m): kortet er både tallet og filtret. Det skal derfor se ud som
   noget, man kan trykke på - og det valgte skal kunne ses uden at man leder efter det. */
.bk-tal-klik { font:inherit; text-align:left; cursor:pointer; transition:border-color .12s, box-shadow .12s, background .12s; }
.bk-tal-klik:hover { border-color:var(--blue); }
.bk-tal-klik.valgt { border-color:var(--blue); background:color-mix(in srgb, var(--blue) 8%, #fff);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--blue) 28%, #fff); }
.bk-st-vaelg { width:auto !important; min-width:150px; }
/* Krydset står ved siden af selve noteringen, ikke ude i rækkens ende - så kan man se,
   at det er MAILEN, det gælder, og ikke hele skolen (som krydset yderst til højre). */
.bk-st-mail { display:flex; align-items:center; gap:8px; font-size:13.5px; }
.bk-st-mail .bk-x { width:22px; height:22px; font-size:11px; opacity:.4; }
.bk-st-mail:hover .bk-x { opacity:1; }
/* KOMPAKTE LISTER I HELE BOOKING (23/8). Det er de her tabeller, der vokser med hver
   booking og hver skole - og når de vokser, er HØJDEN det, der afgør, om man kan overskue
   dem. Mindre luft, ikke mindre indhold: hver celle siger stadig præcis det samme.
   Gælder bookingoversigten, kartoteket, status og de automatiske mails på én gang, så
   listerne ikke driver fra hinanden, næste gang én af dem bliver rettet. */
#bookView .bk-tabel td { padding:8px 12px; }
#bookView .bk-tabel th { padding:9px 12px; }
#bookView .bk-tabel td .hint { line-height:1.35; }
#bookView .bk-tabel .bk-mail { font-size:13px; line-height:1.4; }
#bookView .bk-tabel .btn-mini { padding:6px 13px; }
#bookView .bk-ud-rk { padding:7px 12px; }
/* Markeringsbjælken KLÆBER til toppen, mens man ruller. Markerer man noget nederst i
   "Tidligere besøg", skal man ikke hele vejen op igen for at trykke hent.
   Den står der ALTID - ellers kan man kun se knappen, hvis man allerede har gjort det
   rigtige, og så opdager ingen, at funktionen findes. Dæmpet indtil der er markeret
   noget, fremhævet når der er. */
.bk-mark-flyd { position:sticky; top:8px; z-index:6; margin:14px 0 0;
  background:#fbfcfe; border:1px solid #e3e9f3;
  border-radius:12px; padding:10px 14px; transition:background .15s, border-color .15s, box-shadow .15s; }
.bk-mark-flyd b { color:#7c8aa0; font-weight:700; }
.bk-mark-flyd.har { background:color-mix(in srgb, var(--blue) 10%, #fff);
  border-color:color-mix(in srgb, var(--blue) 30%, #fff); box-shadow:0 6px 18px rgba(14,27,41,.10); }
.bk-mark-flyd.har b { color:var(--ink); font-weight:800; }
.bk-mark-flyd .btn-mini:disabled { opacity:.45; cursor:default; }
.bk-mark-flyd .btn-mini:disabled:hover { background:var(--blue-light); }
/* Status-listen er den længste af dem alle, så den må gå et hak længere ned: statusfeltet
   er et helt rullefelt i hver eneste række, og i fuld størrelse sætter det højden alene. */
#bkStListe .bk-tabel td { padding:7px 12px; vertical-align:middle; }
#bkStListe .bk-st-vaelg { padding:7px 34px 7px 12px; font-size:14px; border-width:1.5px;
  border-radius:9px; background-position:right 11px center; background-size:13px; min-width:138px; }
#bkStListe .bk-x { width:26px; height:26px; font-size:12px; }
/* FARVE kun på de tre, der betyder noget: gul mens den er i gang, grøn når den er i hus,
   rød når den ikke blev til noget. "Ingen kontakt" og "Mail afsendt" er hverdagen -
   farver man dem også, er hele listen farvet, og så siger farven ingenting.
   Reglerne hænger på st-* ALENE, ikke på .bk-st-vaelg - status-feltet inde på skolen er
   bredt og har ikke den klasse, og så ville farven kun virke det ene af de to steder.
   ⚠ background-COLOR, aldrig kortformen `background`. Kortformen nulstiller
   background-image, og pilen på select-feltet ER et baggrundsbillede - så forsvandt den
   på præcis de tre farvede, og feltet så ikke længere ud som noget, man kan klikke på. */
select.st-dialog { background-color:#fff8e1; border-color:#e8c65c; color:#7a5b00; }
select.st-booket { background-color:#e9f8ee; border-color:#5bb877; color:#166b34; }
select.st-nej    { background-color:#fdeceb; border-color:#e08a82; color:#982c23; }
/* Afsluttede rækker er dæmpet, ikke skjult - man skal kunne se, at de ER der. */
.bk-st-slut td { opacity:.55; }
/* Klikbare overskrifter. Pilen står altid der (↕ når kolonnen ikke sorterer), så man kan
   se, at der er noget at trykke på - uden at skulle prøve sig frem. */
.bk-sort { font:inherit; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  color:inherit; background:none; border:none; padding:0; cursor:pointer; display:inline-flex; align-items:center; }
.bk-sort:hover { text-decoration:underline; }
.bk-sort-pil { opacity:.5; margin-left:3px; }
.bk-sort.paa .bk-sort-pil { opacity:1; }
.bk-link { font:inherit; font-size:inherit; background:none; border:none; padding:0; cursor:pointer;
  color:var(--blue); font-weight:800; text-decoration:underline; }
/* --- tabel --- */
.bk-tabel { width:100%; border-collapse:collapse; background:#fff; border:1px solid #e3e9f3; border-radius:14px; overflow:hidden; }
.bk-tabel th { text-align:left; font-size:13px; text-transform:uppercase; letter-spacing:.4px; padding:12px 14px;
  background: color-mix(in srgb, var(--blue) 34%, #0e1b29); color:#fff; }
.bk-tabel td { padding:12px 14px; border-top:1px solid #eef2f8; font-size:14.5px; vertical-align:top; }
/* STRIBER. Der VAR en stribe-regel i forvejen, men #fafbfe mod #fff er under 2% forskel -
   den var reelt usynlig. Med en synlig (men stadig rolig) stribe kan oejet foelge en
   raekke hele vejen ud til hoejre uden at hoppe en linje op eller ned.
   nth-child taeller inden for <tbody>, saa overskriftsraekken forstyrrer ikke takten. */
.bk-tabel tbody tr:nth-child(even) td { background:#f4f7fc; }
/* Musen over en raekke fremhaever HELE raekken. Naar man leder efter én bestemt skole i en
   lang liste, er det den markering, der goer at man ikke laeser en forkert dato. */
.bk-tabel tbody tr:hover td { background: color-mix(in srgb, var(--blue) 9%, #ffffff); }
/* Mail-adressen er en OPLYSNING, ikke et link man skal klikke paa hver gang. Blaa og
   understreget i hver eneste raekke stjaeler oejet fra skolens navn, som er dét man scanner
   efter. Den bliver et tydeligt link, naar man peger paa den. */
/* ARRANGEMENT-LINJE (mange tilmeldte til samme tidspunkt) + de foldede skoler under den.
   Gruppelinjen skal LIGNE en overskrift, saa man kan se at de indrykkede hoerer til den. */
.bk-tabel tbody tr.bk-gruppe td { background: color-mix(in srgb, var(--blue) 7%, #ffffff) !important; font-weight:700; }
.bk-tabel tbody tr.bk-gruppe.aaben td { border-bottom:2px solid color-mix(in srgb, var(--blue) 26%, #ffffff); }
.bk-tabel tbody tr.bk-barn td { background:#fbfcfe !important; border-top:1px solid #f2f5fa; }
.bk-tabel tbody tr.bk-barn td:nth-child(5) { padding-left:30px; position:relative; }
.bk-tabel tbody tr.bk-barn td:nth-child(5)::before { content:'└'; position:absolute; left:13px; color:#b9c6da; }
/* TILMELDTE: "20 / 20". Tallet laeses paa tvaers af raekker, saa det skal staa ens hver gang -
   derfor tabular-nums (cifre med samme bredde), ellers danser kolonnen. */
.bk-tabel .bk-tilmeldt { white-space:nowrap; font-variant-numeric:tabular-nums; color:#5a6b82; }
.bk-tabel .bk-tilmeldt b { font-size:15.5px; color:var(--ink); }
.bk-tabel .bk-tilmeldt.fuld { color:#2a8a3d; font-weight:700; }
.bk-tabel .bk-tilmeldt.fuld b { color:#2a8a3d; }
/* Arrangement UDEN tilmeldte: skal kunne ses, men aldrig forveksles med en rigtig booking. */
.bk-tabel tbody tr.bk-tom td { background:#fcfdff !important; color:#7a879b; }
.bk-tabel tbody tr.bk-tom i { font-style:normal; color:#8b97a9; }
.bk-tabel tbody tr.bk-tom:hover td { background: color-mix(in srgb, var(--blue) 6%, #ffffff) !important; }
.bk-vis-tomme { display:flex !important; align-items:center; gap:8px; margin:0 0 0 auto; font-weight:700;
  font-size:13.5px; color:#5a6b82; cursor:pointer; white-space:nowrap; }
.bk-vis-tomme input { width:17px; height:17px; flex:0 0 auto; cursor:pointer; }
.bk-tabel tbody tr.bk-barn:hover td { background: color-mix(in srgb, var(--blue) 7%, #ffffff) !important; }
.bk-tabel .bk-mail { display:block; font-size:13.5px; color:#5a6b82; text-decoration:none; }
.bk-tabel .bk-mail:hover { color:var(--blue-dark); text-decoration:underline; }
.bk-tabel tr.bk-aflyst td { opacity:.5; text-decoration:line-through; }
.bk-tabel tr.bk-aflyst td:last-child { text-decoration:none; }
.bk-det-linje { display:grid; grid-template-columns:minmax(150px,38%) 1fr; gap:14px; padding:10px 0; border-bottom:1px solid #eef2f8; }
.bk-det-linje b { font-size:14px; color:#42506a; }
.bk-det-linje span { font-weight:700; word-break:break-word; }
/* --- kalender (multi-valg: hele ugen åbnes med tre klik) --- */
.bk-kal { margin:12px 0 8px; background:#fff; border:1px solid #e3e9f3; border-radius:14px; padding:12px; }
.bk-kal-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.bk-kal-top b { font-size:16px; text-transform:capitalize; }
.bk-kal-grid { display:grid; grid-template-columns:34px repeat(7, 1fr); gap:5px; }
.bk-kal-uge { text-align:center; font-size:12px; font-weight:800; color:#8494ab; text-transform:uppercase; padding-bottom:4px; }
/* Ugenummeret skal kunne læses, men ikke stjæle blikket fra de dage, man klikker på. */
.bk-kal-ugetop { color:#aab5c6; }
.bk-kal-ugenr { display:flex; align-items:center; justify-content:center; font-size:12px;
  font-weight:800; color:#aab5c6; border-right:1px solid #eef2f8; }
.bk-kal-dag { font:inherit; font-weight:700; font-size:15px; padding:9px 0; border-radius:10px; cursor:pointer;
  border:1.5px solid #e3e9f3; background:#fff; color:#16212e; }
.bk-kal-dag:hover { border-color:var(--blue); }
.bk-kal-dag.fortid { opacity:.3; cursor:default; }
.bk-kal-dag.aaben { background:color-mix(in srgb, var(--blue) 12%, #fff); border-color:color-mix(in srgb, var(--blue) 40%, #fff); }
.bk-kal-dag.valgt { background:var(--blue); border-color:var(--blue); color:#fff;
  box-shadow: var(--hi), 0 4px 10px color-mix(in srgb, var(--blue) 45%, transparent); }
/* --- lister med en luk-knap i højre side --- */
.bk-aab { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e3e9f3; border-radius:12px;
  padding:11px 14px; margin-bottom:9px; }
.bk-aab > div { flex:1; min-width:0; }
.bk-aab b { display:block; font-size:15px; }
.bk-aab .hint { margin:1px 0 0; }
.bk-aab-h { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.bk-x { font:inherit; font-weight:800; font-size:15px; line-height:1; width:30px; height:30px; flex:0 0 auto; cursor:pointer;
  border:1px solid #f0c4bf; background:#fff6f5; color:#a03027; border-radius:9px; }
.bk-x:hover { background:#ffe9e6; }
/* --- udtryk: smaa knaprækker + billedgalleri paa booking-siden --- */
.bk-valg { display:flex; gap:8px; flex-wrap:wrap; }
.bk-valg button { font:inherit; font-weight:800; font-size:14.5px; padding:9px 20px; border-radius:11px; cursor:pointer;
  border:1.5px solid #d9e1ee; background:#fff; color:#31465f; }
.bk-valg button:hover { border-color:var(--blue); }
.bk-valg button.on { background:var(--blue); border-color:var(--blue); color:#fff;
  box-shadow: var(--hi), 0 4px 11px color-mix(in srgb, var(--blue) 42%, transparent); }
/* ET VALG MED EN FORKLARING. De almindelige .bk-valg-knapper er ord i en raekke, og det
   raekker til "Ja / Nej". Skal man vaelge mellem to maader at gøre noget paa, skal
   forskellen staa PAA knappen - ikke i en hjaelpetekst under, som ingen laeser foer de
   har valgt. */
/* ⚠ RAMMEN SKAL VEJE DET SAMME som felterne over og under. Kortene arvede 1,5 px fra
   .bk-valg, mens alle input-felter har 2 px. Kasserne laa paa samme x, men den tyndere
   streg laeses som om kanten springer ind - Nick: "kan du se det ikke flugter?".
   Det er ikke positionen, det er stregtykkelsen. */
.bk-valg-k { display:block; text-align:left; flex:1 1 240px; padding:12px 15px !important;
  border-radius:12px !important; border-width:2px !important; }
.bk-valg-k b { display:block; font-size:14.5px; margin-bottom:3px; }
.bk-valg-k span { display:block; font-size:12.5px; font-weight:600; line-height:1.45; color:#6b7c96; }
.bk-valg-k.on span { color:color-mix(in srgb, #fff 82%, var(--blue)); }
.bk-galleri { display:grid; gap:11px; grid-template-columns:repeat(auto-fill, minmax(152px, 1fr)); margin-top:12px; }
.bk-bil { padding:0; border:2px solid #e3e9f3; border-radius:12px; overflow:hidden; cursor:pointer; background:#fff;
  font:inherit; text-align:left; position:relative; transition:border-color .15s, transform .15s; }
.bk-bil:hover { border-color:var(--blue); transform:translateY(-2px); }
.bk-bil.on { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.bk-bil.on::after { content:'✓'; position:absolute; top:7px; right:7px; width:22px; height:22px; border-radius:50%;
  background:var(--blue); color:#fff; font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(10,25,60,.35); }
.bk-bil img { display:block; width:100%; height:94px; object-fit:cover; background:#eef2f8; }
.bk-bil span { display:block; padding:8px 10px; font-size:12.5px; font-weight:800; color:#42506a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-top:1px solid #eef2f8; }
#bkFilZone { margin:0; }
#bkFilVis .bk-tabel { font-size:13.5px; }
/* --- bekraeftelsesmail i bookinglisten. Groen = sendt, samme maerke som et spil "I gang". --- */
.bk-tabel .tag { display:inline-block; vertical-align:middle; }
.tag.bek-fejl { background:#fdeceb; color:#a03027; cursor:help; }
/* Maerket og "Send nu" stod under hinanden og gjorde HVER raekke to linjer hoejere,
   selv om de tilsammen fylder mindre end en halv kolonne. Side om side i stedet. */
.bk-sendnu { display:inline-block; margin:0 0 0 8px; vertical-align:middle; font:inherit; font-weight:700; font-size:12px; padding:3px 10px;
  border-radius:999px; cursor:pointer; border:1px solid #dce4f0; background:#f4f7fc; color:#5a6b82; }
.bk-sendnu:hover { border-color:var(--blue); color:var(--blue-dark); }
.bk-sendnu:disabled { opacity:.55; cursor:default; }
.bk-advarsel { background:#fff7e6; border:1px solid #f0d9a8; color:#7a5b12; border-radius:14px;
  padding:14px 18px; margin:0 0 18px; font-size:15px; line-height:1.55; }
.bk-advarsel b { display:block; margin-bottom:3px; }
/* --- kartoteket over grundskoler --- */
/* Listen skal have plads: staar knapperne i to raekker pr. skole, ser tredive skoler
   ud som en mur. Formularen til hoejre klarer sig fint paa mindre bredde. */
@media (min-width: 1180px) { #bkPaneSkoler .bk-to { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); } }
#bkSkListe .bk-aab-h { flex-wrap: nowrap; }
.bk-sendt { display:inline-block; font-weight:800; font-size:13px; color:#1e6b3d; background:#e6f6ec;
  border:1px solid #bfe4cd; border-radius:999px; padding:3px 10px; white-space:nowrap; }
#bkSkListe .bk-tabel td { vertical-align:middle; }
#bkSkImport { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; }
/* ⚠ KNAPPER I EN RAEKKE. Basis-.btn har `margin-top:18px` (den er bygget til at staa
   alene i en formular). Ligger to knapper side om side i en .bk-rk, haenger den ene
   derfor 18 px lavere end den anden. Nulstil marginen i raekken - IKKE paa .btn globalt,
   for saa falder alle formularer sammen. */
.bk-rk .btn, .bk-rk2 .btn { margin: 0; }
.bk-rk .btn, .bk-rk .btn-mini, .bk-rk a.btn-mini { flex: 0 0 auto; }
/* Tid, dato og tal manglede i basis-reglen (den daekker kun text/password/number/textarea/select),
   saa browseren tegnede sin egen graa systemboks midt i et pænt kort - samme faelde som §5m. */
.bk-boks input[type=time], .bk-boks input[type=date], .bk-boks input[type=number],
.bk-adr-ret input[type=text] {
  width: 100%; padding: 12px 14px; border: 1.5px solid #e3e9f3; border-radius: 11px;
  font: inherit; background: #fff; color: inherit; box-shadow: inset 0 1px 3px rgba(18,36,80,.05);
}
.bk-boks input[type=time]:focus, .bk-boks input[type=date]:focus, .bk-boks input[type=number]:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}
.bk-boks input[type=time]::-webkit-calendar-picker-indicator,
.bk-boks input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.bk-boks input[type=time]:hover, .bk-boks input[type=date]:hover, .bk-boks input[type=number]:hover { border-color: color-mix(in srgb, var(--blue) 45%, #e3e9f3); }
.bk-boks select { width: 100%; }
/* FELTERNE HER ER NEUTRALE - IKKE SKOLENS FARVE.
   To globale regler farver ELLER dropdown og felt efter skolens temafarve:
   linje ~1342 (`select` med `!important`, 2px ramme i color-mix af --blue) og
   fokus-ringen (~1508, 3px outline i --blue). Paa en skole med en varm primaerfarve
   gav det en tyk guldkant om hver eneste dropdown paa booking-skaermen - den lignede
   en fejlmarkering, ikke et felt.
   Booking er et VAERKTOEJ: en formular man udfylder, ikke en flade der skal saelge.
   Faner, knapper og overskrifter foelger stadig skolens farve - kun selve
   indtastningsfelterne er neutrale. Ringen fjernes IKKE, kun affarvet: man skal
   stadig kunne se, hvor man er, naar man taster sig frem uden mus.
   `!important` er noedvendigt her, fordi den globale select-regel selv bruger det. */
#bookView select { border-color: #dbe4f5 !important; }
#bookView select:hover, #bookView input:hover { border-color: #b9cbe9 !important; }
#bookView input:focus, #bookView textarea:focus, #bookView select:focus {
  border-color: #1b4fd8 !important;
  box-shadow: 0 0 0 3px rgba(27, 79, 216, .15), inset 0 1px 2px rgba(18, 36, 80, .05);
}
#bookView input:focus-visible, #bookView textarea:focus-visible, #bookView select:focus-visible {
  outline: 3px solid rgba(27, 79, 216, .42); outline-offset: 2px;
}
#bookView .bk-laast, #bookView .bk-laast:hover { border-color: #e6ecf7 !important; }
#bookView .bk-laast:focus, #bookView .bk-laast:focus-visible { outline: none; box-shadow: none; border-color: #e6ecf7 !important; }
/* --- laaste tekstfelter: man skal aktivt ville rette, og aktivt gemme --- */
.bk-boks .bk-laast { background:#f4f7fc; color:#3f4f66; border-color:#e6ecf7; cursor:default; }
/* Låste bokse - flueben, valgknapper, logofelt. Samme dæmpede look som et låst tekstfelt,
   så man kan SE, at kortet er lukket, i stedet for at trykke og undre sig over ingenting. */
#bookView .bk-laast-boks { opacity:.62; }
#bookView .bk-laast-boks, #bookView .bk-laast-boks * { cursor:default !important; }
#bookView .bk-laast-boks.drop-zone, #bookView .bk-laast-boks.bk-logo-vis { pointer-events:none; }
#bookView .bk-laast-boks .bk-logo-h { display:none; }
.bk-boks .bk-laast:focus { outline:none; box-shadow:none; border-color:#e6ecf7; }
/* --- adressen kan rettes af skolen selv --- */
.bk-adr-ret { background:#fbfcfe; border:1px solid #e3e9f3; border-radius:14px; padding:16px 20px; margin:12px 0 0; }
.bk-adr-ret label { display:block; font-weight:800; font-size:14px; margin-bottom:6px; }
/* --- hold: navn, pause og handlinger paa én linje --- */
.bk-hold { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:#fff; border:1px solid #e3e9f3;
  border-radius:12px; padding:11px 14px; margin-bottom:9px; }
.bk-hold > div:first-child { flex:1; min-width:120px; }
.bk-hold b { display:block; font-size:15px; }
.bk-hold .hint { margin:1px 0 0; }
.bk-hold-skole { background:#f4f7fc; }
.bk-hold-pause { display:flex !important; align-items:center; gap:8px; font-weight:800; font-size:13.5px;
  color:#5a6b82; margin:0; flex:0 0 auto; }
.bk-hold-pause select { width:auto !important; min-width:104px; padding:8px 12px; }
/* --- markering + noter i kartoteket --- */
.bk-tjekkol { width:38px; text-align:center; }
.bk-tjekkol input { width:18px; height:18px; cursor:pointer; }
.bk-sk-tabel td { vertical-align:top; }
.bk-noteknap { display:inline-block; margin-top:5px; font:inherit; font-weight:700; font-size:12.5px; padding:3px 10px;
  border-radius:999px; cursor:pointer; border:1px solid #dce4f0; background:#f4f7fc; color:#5a6b82; }
.bk-noteknap:hover { border-color:var(--blue); color:var(--blue-dark); }
.bk-note-rk td { background:#f6f9ff !important; border-top:none; padding:14px 16px 18px; }
.bk-noter { margin-top:12px; display:grid; gap:7px; }
.bk-note { display:flex; align-items:flex-start; gap:11px; background:#fff; border:1px solid #e3e9f3;
  border-radius:10px; padding:9px 12px; }
.bk-note-dato { flex:0 0 auto; font-size:12.5px; font-weight:800; color:#8494ab; white-space:nowrap; padding-top:1px; }
.bk-note-tekst { flex:1; min-width:0; font-size:14.5px; word-break:break-word; }
.bk-note .bk-x { width:26px; height:26px; font-size:13px; }
/* --- feltbyggeren: EN TABEL, ikke en stak kort (bygget om 23/8) ---
   Foerste udgave gav hver linje sit eget hvide kort med ramme og skygge, en tolinjers
   etiket og ordene "Skal udfyldes" gentaget hele vejen ned ad siden. Elleve kort i stak
   fylder en hel skaerm, og oejet kan ikke se, hvilke kolonner der hoerer sammen.
   Nu: kolonnenavnene staar ÉN gang i toppen, linjerne er lave og stribede, og pilene er
   graa til man peger paa dem. Samme greb som alle andre lister i booking (§12e). */
/* ⚠ KASSEN SKAL VAERE LIGE SAA BRED SOM KASSERNE OVENOVER. Foerste forsoeg gav den en
   max-bredde, saa listen ikke blev for bred - men saa flugtede dens hoejre kant ikke med
   noget som helst, og siden saa skaev ud. To kasser under hinanden med forskellig bredde
   ligner en fejl, ikke et design. Bredden foelger nu gitteret som alt andet, og linjen
   holdes laesbar med musemarkering paa hele raekken i stedet. */
.bk-felt-hoved, .bk-felt { display:grid; grid-template-columns:26px 32px 1fr 104px 92px;
  align-items:center; gap:10px; }
.bk-felt-hoved { padding:0 12px 8px; margin-top:14px; font-size:11.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:#8494ab;
  border-bottom:2px solid color-mix(in srgb, var(--blue) 16%, #fff); }
.bk-felt-hoved span:nth-child(2), .bk-felt-hoved span:nth-child(4), .bk-felt-hoved span:nth-child(5) { text-align:center; }
.bk-felt { padding:8px 12px; border-radius:9px; }
#bkFeltListe > .bk-felt:nth-child(odd) { background:#f4f7fc; }
.bk-felt:hover { background:color-mix(in srgb, var(--blue) 9%, #fff); }
.bk-felt > input[type=checkbox] { width:18px; height:18px; justify-self:center; margin:0; }
.bk-felt.af .bk-felt-navn { opacity:.6; }
.bk-felt.af .bk-felt-navn b { color:#8494ab; font-weight:700; }
.bk-felt-navn { min-width:0; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.bk-felt-navn b { font-size:14.5px; }
/* Typen er et lille maerke PAA linjen, ikke en tekstlinje under - det var den anden
   linje i hver etiket, der gjorde listen dobbelt saa hoej som noedvendigt. */
.bk-felt-navn span { font-size:11.5px; font-weight:800; color:#6b7c96; letter-spacing:.02em;
  background:color-mix(in srgb, var(--blue) 10%, #fff); border-radius:6px; padding:2px 7px; white-space:nowrap; }
.bk-felt-kr { display:flex; justify-content:center; margin:0; cursor:pointer; }
.bk-felt-kr input[type=checkbox] { width:18px; height:18px; margin:0; }
.bk-felt-h { display:flex; align-items:center; justify-content:center; gap:2px; }
/* Pilene bar foer knap-chromet fra .btn-mini. Toogtyve guldknapper ned ad en side er
   stoej; her er de graa tegn, der foerst bliver til knapper, naar man peger paa dem. */
.bk-pil { font:inherit; font-size:11px; line-height:1; width:24px; height:24px; padding:0;
  border:1px solid transparent; background:none; color:#7b8ca6; border-radius:7px; cursor:pointer; }
.bk-pil:hover:not(:disabled) { background:#fff; border-color:color-mix(in srgb, var(--blue) 28%, #fff); color:var(--blue-dark); }
.bk-pil:disabled { opacity:.25; cursor:default; }
.bk-felt .bk-x { width:24px; height:24px; font-size:11px; }
.bk-felt-tom { width:24px; }
/* Jeres eget spoergsmaal: foldet ind i samme kasse. Foer var det en kasse nummer to ved
   siden af listen, og den var kort - saa der stod en halv skaerm tom luft under den. */
.bk-nyfelt { margin-top:14px; padding:16px; border-radius:12px;
  background:color-mix(in srgb, var(--blue) 7%, #fff);
  border:1px solid color-mix(in srgb, var(--blue) 20%, #fff); }
.bk-nyfelt-rk { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.bk-nyfelt-rk label { margin:0 0 5px; }
.bk-nyfelt-rk input[type=text], .bk-nyfelt-rk select { margin:0; }
.bk-nyfelt-bred { flex:1 1 260px; min-width:0; }
.bk-nyfelt-smal { flex:0 0 190px; }
.bk-nyfelt-kr { margin:0 0 9px !important; font-size:13.5px !important; }
.bk-nyfelt-kr input[type=checkbox] { margin:0; }
@media (max-width:640px){
  .bk-felt-hoved { display:none; }
  .bk-felt { grid-template-columns:28px 1fr 40px 68px; gap:6px; }
}
/* --- logo-feltet: viser spillets logo som standard, og tager træk og slip --- */
/* Logoet skal FYLDE boksen, som alle andre billedfelter i produktet. Et lille logo
   klemt i venstre hjørne ser ud som en fejl - man skal kunne se, hvad kunden faar. */
.bk-logo-vis { display:block; background:#fff; border:2px dashed #d9e1ee; border-radius:14px;
  padding:20px; cursor:pointer; transition:border-color .15s, background .15s; text-align:center; }
.bk-logo-vis:hover { border-color:var(--blue); background:#f7faff; }
.bk-logo-vis.drag { border-color:var(--blue); background:var(--blue-light); border-style:solid; }
.bk-logo-vis.drag * { pointer-events:none; }
.bk-logo-vis img { display:block; width:100%; max-width:100%; max-height:150px; object-fit:contain; margin:0 auto; }
.bk-logo-h { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px;
  padding-top:12px; border-top:1px solid #eef2f8; }
.bk-logo-cta { font-weight:700; font-size:13.5px; color:#5a6b82; }
#bkLogoBoks.drop-zone { margin:0; }
/* --- lille rig-tekst-editor til skolens egen tekst --- */
.bk-vaerk { display:flex; align-items:center; gap:5px; flex-wrap:wrap; background:#eef2f8; border:1px solid #e3e9f3;
  border-bottom:none; border-radius:12px 12px 0 0; padding:7px 9px; }
.bk-vaerk button { font:inherit; font-weight:700; font-size:13.5px; padding:6px 11px; border-radius:8px; cursor:pointer;
  border:1px solid #d9e1ee; background:#fff; color:#31465f; }
.bk-vaerk button:hover { border-color:var(--blue); color:var(--blue-dark); }
.bk-del { width:1px; height:20px; background:#d2dbe8; margin:0 3px; }
/* ⚠ 25/8: her stod 'max-height:460px; overflow:auto'. Skolerne skriver LANGE tekster -
   en hel invitation med overskrifter og punkter - og saa skrev de ned i en lille rude
   med sin egen rullebjaelke, hvor man ikke kan overskue det, man er ved at skrive.
   Feltet vokser nu med teksten. Siden har allerede en rullebjaelke; man skal ikke
   rulle inde i en rude, der ruller inde i en side. */
.bk-rig { border:1px solid #e3e9f3; border-radius:0 0 12px 12px; background:#fff; padding:16px 18px;
  min-height:230px; font-size:15.5px; line-height:1.6; }
.bk-rig:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent); }
.bk-rig h1, .bk-rig h2, .bk-rig h3 { margin:16px 0 6px; line-height:1.3; }
.bk-rig h1 { font-size:22px; } .bk-rig h2 { font-size:19px; } .bk-rig h3 { font-size:17px; }
.bk-rig p { margin:0 0 10px; }
.bk-rig ul, .bk-rig ol { margin:0 0 10px; padding-left:22px; }
.bk-pane { animation: none; }
@media (max-width: 820px) {
  .bk-adr-hoejre input { width:100%; }
  .bk-faner { overflow-x:auto; flex-wrap:nowrap; }
}

/* ---- KONTAKTPERSONER pr. grundskole (§12b). Foldet ud under skolen, som noterne. ---- */
.bk-kontakter { display:flex; flex-direction:column; gap:2px; }
.bk-kontakt { display:flex; align-items:flex-start; gap:11px; padding:9px 12px; border-radius:10px; background:#fff;
  border:1px solid #eef2f8; }
.bk-kontakt:hover { border-color:#dbe4f5; }
.bk-kontakt > input[type=checkbox] { width:17px; height:17px; margin-top:2px; flex:0 0 auto; cursor:pointer; }
.bk-kontakt-midt { flex:1; min-width:120px; }
.bk-kontakt-midt b { font-size:14.5px; }
/* Maerkerne skal kunne SES uden at raabe: hovedkontakten er den, mailen gaar til som standard,
   og "fra en booking" fortaeller at systemet selv har fundet personen. */
.bk-hoved, .bk-fra-booking { display:inline-block; margin-left:8px; font-size:11.5px; font-weight:800;
  padding:2px 8px; border-radius:999px; vertical-align:1px; }
.bk-hoved { background: color-mix(in srgb, var(--blue) 13%, #ffffff); color: var(--blue-dark); }
.bk-fra-booking { background:#eef7f0; color:#2a7a3d; }

/* ---- HISTORIK pr. grundskole (§12b). Foldet ud under skolen, som noter og kontakter. ---- */
.bk-hist-tal { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.bk-hist-tal > div { background:#fff; border:1px solid #eef2f8; border-radius:11px; padding:9px 16px; min-width:96px; }
.bk-hist-tal b { display:block; font-size:21px; line-height:1.1; }
.bk-hist-tal span { font-size:12.5px; color:#5a6b82; font-weight:700; }
.bk-hist-tabel { font-size:13.5px; }
.bk-hist-tabel th { padding:9px 12px; font-size:12px; }
.bk-hist-tabel td { padding:9px 12px; }
/* "Aldrig booket" skal kunne SES i en lang liste - det er dem, man skal skrive til. */
.bk-noteknap.bk-aldrig { color:#93a0b3; }

/* ---- FLET to grundskoler (§12b). Inline-kort, ikke en popup - man skal kunne se listen
   bagved og selv lukke det igen. ---- */
.bk-flet { background:#fbfcfe; border:1px solid #dbe4f5; border-radius:14px; padding:18px 20px; margin:0 0 14px; }
.bk-flet h3 { font-size:17px; }
.bk-flet-rk { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:8px 0; border-top:1px solid #eef2f8; }
.bk-flet-rk > b { min-width:110px; font-size:13.5px; color:#5a6b82; }
.bk-flet-valg { display:flex !important; align-items:center; gap:8px; margin:0; cursor:pointer; font-weight:700;
  background:#fff; border:1.5px solid #e3e9f3; border-radius:10px; padding:7px 13px; }
.bk-flet-valg:hover { border-color:#b9cbe9; }
.bk-flet-valg input { width:16px; height:16px; flex:0 0 auto; cursor:pointer; }
.bk-flet-en { color:#3f4f66; }

/* ---- UDSEND MAILS (§12g) ---- */
.bk-mailliste { display:flex; gap:8px; flex-wrap:wrap; }
.bk-mailkort { font:inherit; text-align:left; cursor:pointer; background:#fff; border:1.5px solid #e3e9f3;
  border-radius:12px; padding:10px 15px; min-width:150px; max-width:230px; }
.bk-mailkort:hover { border-color:#b9cbe9; }
.bk-mailkort.on { border-color:#1b4fd8; background:#f4f7fc; }
.bk-mailkort b { display:block; font-size:14.5px; }
.bk-mailkort span { display:block; font-size:12.5px; color:#5a6b82; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-ud-liste { max-height:340px; overflow:auto; border:1px solid #e3e9f3; border-radius:12px; background:#fff; }
.bk-ud-rk { display:flex !important; align-items:center; gap:11px; padding:9px 13px; margin:0;
  border-top:1px solid #f2f5fa; cursor:pointer; font-weight:600; }
.bk-ud-rk:first-child { border-top:none; }
.bk-ud-rk:hover { background: color-mix(in srgb, var(--blue) 5%, #ffffff); }
.bk-ud-rk input { width:17px; height:17px; flex:0 0 auto; cursor:pointer; }
.bk-ud-navn { flex:1; min-width:90px; }
.bk-ud-rk.tom { opacity:.55; }
.bk-ud-rk .btn-mini { margin:0; padding:3px 12px; font-size:12.5px; }

/* Tom udsendelsesliste: en RIGTIG tom-tilstand, ikke en linje klemt inde i rullefeltet. */
.bk-ud-liste.tom { border-style:dashed; background:#fbfcfe; }
.bk-ud-tom { display:flex; flex-direction:column; align-items:center; gap:7px; padding:30px 22px; text-align:center; }
.bk-ud-tom b { font-size:15px; color:#3f4f66; }
.bk-ud-tom span { font-size:13.5px; color:#7a879b; max-width:280px; line-height:1.45; }
.bk-ud-tom .btn-mini { margin-top:5px; }

/* ---- ÉN SKOLE (§12i): deres eget CRM-overblik ---- */
.bk-skole-top { display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap;
  background:#fbfcfe; border:1px solid #e3e9f3; border-radius:14px; padding:18px 22px; margin:0 0 16px; }
.bk-skole-navn { flex:1; min-width:200px; }
.bk-skole-navn h2 { margin:0; font-size:24px; }
.bk-skole-navn .hint { margin:4px 0 0; }
.bk-sk-meta { font-size:12.5px; color:#8b97a9; font-weight:700; margin-top:4px; }
#bkSsKontakter .bk-kontakt { margin-bottom:6px; }

/* ===========================================================================
   §13 MINISPILLET - 3-minutters quizzen (public/quiz.html)

   Siden staar frit fremme paa en messe og ses paa afstand, mens nogen gaar forbi.
   Derfor er ALT stoerre end i spillet: overskrifter, knapper, svarmuligheder.
   Farverne kommer fra skolens egne brand-variabler, saa quizzen ligner deres spil -
   men chromen (uret, kortet) er neutral, saa den ikke slaas med motivet bagved.
   Opgavernes egne brikker (.opt, .order-item, .dragitem, .pair-card) genbruges
   DIREKTE fra spillet - de er ikke gentegnet her.
   =========================================================================== */
.quiz-body { min-height:100vh; overflow-x:hidden; }
/* Ingen markering af tekst paa knapper og chrome. Selve SPOERGSMAALET og svarene
   maa stadig markeres - ordblinde bruger oplaesning, der kraever det. */
.qz-top, .qz-stige, .qz-fod, .qz-nedtael, .qz-vel, .qz-tael { user-select:none; }

/* ---- topbjaelken: uret til venstre, point til hoejre ---- */
.qz-top {
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; gap:16px; pointer-events:none;
}
.qz-ur { display:flex; align-items:center; gap:6px; }
.qz-cif {
  background:#fff; color:#16233d; font-family:var(--font-display); font-weight:900;
  font-size:46px; line-height:1; width:58px; height:76px; border-radius:12px;
  border:2px solid color-mix(in srgb, var(--blue) 32%, #ffffff);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.7);
}
.qz-kolon { font-family:var(--font-display); font-weight:900; font-size:40px; color:#fff; text-shadow:0 2px 8px rgba(0,20,50,.55); }
/* Cifret vender, naar det skifter - saa oejet fanger at tiden loeber, uden en animation der koerer hele tiden */
.qz-cif.flip { animation:qzFlip .34s ease; }
@keyframes qzFlip { 0%{ transform:rotateX(-70deg); opacity:.35 } 100%{ transform:rotateX(0); opacity:1 } }
.qz-ur.sidste .qz-cif { background:var(--red); color:#fff; border-color:rgba(255,255,255,.5); }
.qz-hoejre { display:flex; align-items:center; gap:10px; }
.qz-pt, .qz-tael {
  background:rgba(255,255,255,.92); color:#16233d; font-weight:800; font-size:17px;
  padding:9px 16px; border-radius:999px; font-variant-numeric:tabular-nums;
  box-shadow:0 4px 14px rgba(10,20,40,.22), inset 0 1px 0 rgba(255,255,255,.8);
}
.qz-pt b { font-size:21px; }
.qz-tael { background:rgba(255,255,255,.72); font-size:15px; }

/* ---- scener ---- */
/* 'safe center' i stedet for 'center': er indholdet hoejere end skaermen (slutskaermen
   med stige, kort, QR og knap), skal det kunne scrolles - ellers klippes knappen af
   i bunden paa en lav skaerm, og gaesten kan ikke komme videre. Samme faelde som
   velkomst-kuverten i §5l. */
.qz-scene { min-height:100vh; display:none; flex-direction:column; align-items:center; justify-content:safe center; padding:104px 20px 40px; gap:18px; overflow-y:auto; }
#qSlut { padding-top:24px; padding-bottom:24px; gap:10px; }

/* ---- forsiden ---- */
/* ⚠ 25/8: her laa et stykke tid en moerk plade bag teksten. Den var grim, og den
   aad skolens eget billede - og skolens logo forsvandt i den, hvis logoet var
   moerkt. Laesbarhed loeses paa BAGGRUNDEN (se .quiz-body.cbg::after), ikke med en
   kasse midt paa skaermen. */
.qz-start { text-align:center; max-width:760px; }
.qz-logo { max-height:110px; max-width:min(420px,80vw); margin:0 auto 18px; display:block; object-fit:contain; }
.qz-vel { color:#fff; text-shadow:0 1px 2px rgba(0,10,30,.95), 0 0 10px rgba(0,10,30,.85), 0 3px 20px rgba(0,10,30,.6); font-weight:800; letter-spacing:.22em; text-transform:uppercase; font-size:19px; margin:0 0 14px; }
.qz-navn {
  font-family:var(--font-display); font-weight:800; font-size:clamp(38px,7vw,74px); line-height:1.05;
  color:var(--on-blue,#fff); background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #ffffff), var(--blue));
  padding:20px 44px; border-radius:20px; display:inline-block;
  border:1px solid rgba(0,0,0,.16); box-shadow:var(--hi), 0 14px 34px color-mix(in srgb, var(--blue) 42%, transparent);
}
/* Linjen med tiden er den ENE oplysning, en forbipasserende skal naa at laese.
   Derfor stoerre og fed - ikke en fodnote under overskriften. */
.qz-und { color:#fff; text-shadow:0 1px 2px rgba(0,10,30,.95), 0 0 12px rgba(0,10,30,.85), 0 3px 22px rgba(0,10,30,.6); font-size:clamp(20px,2vw,24px); font-weight:700; margin:22px 0 26px; }
.btn.qz-stor { width:auto; min-width:260px; font-size:24px; padding:20px 46px; margin:0 auto; }
.qz-fin { color:#eaf1ff; text-shadow:0 1px 2px rgba(0,10,30,.95), 0 0 10px rgba(0,10,30,.8); font-size:15px; margin-top:26px; opacity:.92; }

/* ---- opgavekortet ---- */
/* Kortet er en LODRET STABEL med et loft (rettet 25/8). Loftet er den plads, scenen
   faktisk har - saa naar billedet bliver stort, er det billedet der giver sig, og ikke
   OK-knappen der bliver skubbet ud under skaermkanten. En gaest paa en stand skal kunne
   se hele opgaven uden at rulle. */
.qz-kort {
  width:min(980px,100%); background:var(--card); border-radius:20px; overflow:hidden;
  box-shadow:0 22px 60px rgba(10,25,60,.34); border:1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  display:flex; flex-direction:column; max-height:calc(100vh - 144px);
}
.qz-kort-top {
  background:color-mix(in srgb, var(--blue) 14%, #ffffff);
  border-bottom:1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  padding:16px 26px; display:flex; align-items:center; justify-content:center; gap:14px;
}
.qz-grad { font-family:var(--font-display); font-weight:800; letter-spacing:.12em; font-size:21px; color:var(--ink); }
.qz-stjerner { font-size:24px; letter-spacing:2px; line-height:1; }
.qz-stjerner .fyldt { color:var(--gold); }
.qz-stjerner .tom { color:color-mix(in srgb, var(--ink) 22%, transparent); }
.qz-kort-krop { padding:28px 30px 30px; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.qz-spm { font-size:clamp(20px,2.4vw,27px); line-height:1.4; margin:0 0 22px; }
/* BILLEDET SKAL KUNNE SES (rettet 25/8). Det stod fast paa 230px hoejde i et kort,
   der er over 1200px bredt - saa et foto af en studietur endte som et frimaerke, og
   man kunne ikke se, hvad der var paa det. Nu maaler det sig efter skaermen: 40% af
   hoejden, dog aldrig over 420px, saa der stadig er plads til spoergsmaal, svar og
   OK-knappen uden at rulle. Kilderne er store nok (de fleste 1500px brede), saa der
   er intet at tabe ved at give dem pladsen. */
.qz-kort-krop .task-illu { display:block; max-height:min(40vh, 420px); margin:0 auto 20px; border-radius:12px; flex:0 1 auto; min-height:120px; object-fit:contain; }
/* Svarmuligheder maa fylde - der er ingen sidebar og ingen kort at dele pladsen med */
.qz-kort-krop .opt { font-size:18px; padding:16px 18px; }
.qz-besked { min-height:26px; margin:16px 0 4px; font-weight:800; font-size:17px; text-align:center; }
.qz-besked.rigtig { color:var(--green); }
.qz-besked.forkert { color:var(--red); }
.btn.qz-ok { width:auto; min-width:220px; margin:12px auto 0; display:block; font-size:19px; padding:15px 40px; }

/* ---- rank-stigen paa slutskaermen ---- */
.qz-stige { display:flex; align-items:flex-start; justify-content:center; gap:0; flex-wrap:wrap; margin-bottom:4px; }
.qz-trin { display:flex; flex-direction:column; align-items:center; gap:7px; width:110px; position:relative; }
/* Stregen mellem trinnene. Tegnet med ::before paa selve trinnet, saa den foelger
   antallet af trin - skolen kan have alt fra to til otte. */
.qz-trin + .qz-trin::before {
  content:''; position:absolute; left:-55px; top:23px; width:110px; height:3px;
  background:rgba(255,255,255,.42); border-radius:2px;
}
/* Stregen hoerer til trinnet FOER den. Farves den paa det efterfoelgende trin, bliver
   segmentet efter den opnaaede rank ogsaa gyldent, og stigen ser ud som om man er
   naaet laengere, end man er. */
.qz-trin.naaet::before, .qz-trin.passeret::before { background:var(--gold); }
.qz-trin-ik {
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:28px; background:rgba(255,255,255,.82); position:relative; z-index:1;
  box-shadow:0 4px 12px rgba(10,20,40,.28); filter:grayscale(1); opacity:.55;
}
.qz-trin-nv { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; text-shadow:0 1px 8px rgba(0,20,50,.7); opacity:.6; text-align:center; line-height:1.2; }
.qz-trin.passeret .qz-trin-ik { filter:none; opacity:.85; }
.qz-trin.passeret .qz-trin-nv { opacity:.85; }
.qz-trin.naaet .qz-trin-ik { filter:none; opacity:1; background:#fff; transform:scale(1.16); box-shadow:0 0 0 4px var(--gold), 0 8px 20px rgba(10,20,40,.4); }
.qz-trin.naaet .qz-trin-nv { opacity:1; color:var(--gold); }

/* ---- SLUTKORTET: her skal det FOELES som en spillemaskine ----------------
   ⚠ Omtegnet 25/8. Foer var det en hvid kasse med en linje tekst og et lille ikon -
   korrekt, men doedt. Det her er sekundet, hvor gaesten har praesteret noget, og
   hvor skolen har deres opmaerksomhed. Det skal ligne en praemie.
   Og QR-koden staar VED SIDEN AF, ikke under: den er skolens ene chance for at tage
   gaesten med videre, og den skal kunne scannes fra en meters afstand. */
.qz-slut-rk { display:flex; align-items:flex-start; justify-content:center; gap:24px; flex-wrap:wrap; width:100%; }
.qz-slutkort { width:min(620px,100%); }
.qz-slut-krop { text-align:center; overflow-y:auto; }

/* Toppen er en guldbjaelke - rangen er en titel, man har vundet. */
.qz-slut-top {
  background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 82%, #ffffff), var(--gold));
  border-bottom:1px solid color-mix(in srgb, var(--gold) 60%, #000000);
  padding:18px 26px;
}
.qz-sluttitel {
  font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.4vw,38px);
  color:var(--on-gold,#16233d); letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.45), 0 2px 6px rgba(90,60,0,.22);
}

/* Ikonet: stort, med en glorie bag - og det POPPER ind, saa oejet fanger det. */
.qz-rank-ikon {
  font-size:92px; line-height:1; margin:6px auto 12px; width:132px; height:132px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--gold) 34%, transparent), transparent 68%);
  animation:qzPop .5s cubic-bezier(.18,1.5,.4,1) both;
}
@keyframes qzPop { 0%{transform:scale(.4) rotate(-14deg); opacity:0;} 60%{transform:scale(1.12) rotate(4deg); opacity:1;} 100%{transform:scale(1) rotate(0);} }
@media (prefers-reduced-motion:reduce){ .qz-rank-ikon { animation:none; } }

.qz-slut-tekst { font-size:17.5px; line-height:1.55; margin:0 0 16px; color:var(--ink); }

/* Pointene er tallet, man praler med. Saa er det ogsaa det stoerste paa kortet. */
.qz-resultat { display:flex; flex-direction:column; align-items:center; gap:2px; margin-bottom:16px; }
.qz-res-pt {
  font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums;
  display:flex; flex-direction:column; align-items:center; gap:0; line-height:1;
}
.qz-res-pt b {
  display:block; font-size:clamp(52px,7vw,74px); line-height:1; letter-spacing:0;
  color:var(--blue); text-shadow:0 2px 0 color-mix(in srgb, var(--blue) 55%, #000000);
}
.qz-res-af { color:var(--muted); font-size:15.5px; }

/* ---- HIGHSCORE (aldrig "tavlen" - det hedder highscore, som i en arkade) ---- */
.qz-tavle-boks { border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent); padding-top:16px; text-align:left; }
.qz-hs-hoved {
  text-align:center; font-family:var(--font-display); font-weight:800;
  font-size:20px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); margin-bottom:12px;
}
.qz-navnefelt { background:color-mix(in srgb, var(--gold) 16%, transparent); border:1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  border-radius:14px; padding:14px 16px; margin-bottom:12px; }
.qz-navnefelt label { display:block; font-weight:800; margin-bottom:9px; text-align:center; font-size:16.5px; }
.qz-navnerk { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.qz-navnerk input { width:min(260px,58vw); margin:0; }
/* .btn har margin-top:18px fordi den er bygget til at staa alene i en formular.
   I en raekke haenger den skaevt - nulstil i RAEKKEN, ikke globalt (§12e). */
.qz-navnerk .btn { margin:0; width:auto; }
.qz-hs-naeh { text-align:center; color:var(--muted); font-size:15.5px; margin:0 0 12px; }
.qz-proeve-note { text-align:center; margin:0 0 12px; font-size:14.5px; color:var(--muted); font-style:italic; }
.qz-plads { text-align:center; font-size:20px; margin-bottom:14px; }
.qz-plads b { font-size:28px; color:var(--blue); }
.qz-tavle { list-style:none; margin:12px 0 0; padding:0; }
.qz-tavle li { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; font-variant-numeric:tabular-nums; }
.qz-tavle li:nth-child(odd) { background:color-mix(in srgb, var(--blue) 6%, transparent); }
.qz-tavle li.mig { background:color-mix(in srgb, var(--gold) 30%, transparent); font-weight:800; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 62%, transparent); }
.qz-tv-pl { width:34px; font-weight:800; color:var(--muted); text-align:center; }
.qz-tavle li:nth-child(1) .qz-tv-pl, .qz-tavle li:nth-child(2) .qz-tv-pl, .qz-tavle li:nth-child(3) .qz-tv-pl { font-size:19px; }
.qz-tv-nv { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qz-tv-pt { font-weight:800; }
.qz-tv-tom { color:var(--muted); justify-content:center; }

/* ---- QR + sociale medier: UDFOLDET, ikke bag en knap ---- */
/* Gaesten rejser sig om lidt. Skal de trykke paa noget for at se, hvor de kan
   foelge skolen, sker det ikke. */
.qz-fod { display:flex; flex-direction:column; align-items:stretch; gap:16px; width:min(300px,100%); }
.qz-qr { text-align:center; background:#fff; padding:18px 18px 20px; border-radius:18px; box-shadow:0 10px 30px rgba(10,20,40,.3); }
/* STOR. En QR-kode paa 108px kunne ikke scannes fra andet end en armslaengde,
   og gaesten staar op og har travlt. */
.qz-qr img { width:min(232px,54vw); height:auto; aspect-ratio:1; display:block; margin:0 auto; }
.qz-qr-tekst { margin:0 0 12px; font-weight:800; color:#16233d; font-size:17px; line-height:1.35; }
.qz-social { text-align:center; background:#fff; padding:16px 18px; border-radius:18px; box-shadow:0 10px 30px rgba(10,20,40,.3); }
.qz-soc-lbl { margin:0 0 10px; font-weight:800; color:#16233d; font-size:15px; }
.qz-soc-rk { display:flex; gap:16px; align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.qz-soc { display:flex; flex-direction:column; align-items:center; gap:6px; }
.qz-soc-ik { width:34px; height:34px; object-fit:contain; }
.qz-soc-qr { width:84px; height:84px; }
.qz-soc-hint { color:#4a5975; font-size:13px; margin:10px 0 0; }

.qz-slutkort.qz-kort { max-height:calc(100vh - 190px); }
.btn.qz-igen { width:auto; min-width:230px; font-size:19px; padding:14px 40px; margin:4px auto 0; }
.qz-nedtael { color:#eaf1ff; text-shadow:0 1px 8px rgba(0,20,50,.6); font-size:14px; margin:10px 0 0; opacity:.8; }

/* Laesbarhed oven paa skolens eget baggrundsbillede - samme greb som booking-siden (§12c):
   sikret i CSS, ikke i billedvalget, saa et lyst foto ikke goer siden ubrugelig. */
/* Sloeret over skolens baggrundsfoto.
   ⚠ 25/8: det var oppe paa .60 i midten, og Nick havde ret i, at det aad billedet.
   Baggrunden ER salgsmaterialet - det er dét, der faar en forbipasserende til at gaa
   hen til standen. Et moerkt filter over hele fotoet loeser laesbarhed paa den dyreste
   maade, der findes. Derfor er sloeret nu SVAGT og ligger foerst og fremmest i top og
   bund, hvor der staar smaa tekster; midten, hvor billedet er, er naesten fri.
   Teksterne baerer sig selv i stedet - se skyggerne paa .qz-vel/.qz-und/.qz-fin. */
.quiz-body.cbg::after {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,16,38,.30), rgba(6,16,38,.10) 42%, rgba(6,16,38,.34));
}

@media (max-width:760px){
  .qz-cif { font-size:32px; width:42px; height:56px; }
  .qz-scene { padding-top:92px; }
  .qz-kort-krop { padding:20px 16px 22px; }
  .qz-trin { width:78px; }
  .qz-trin + .qz-trin::before { left:-39px; width:78px; }
  .qz-rank-ikon { font-size:68px; }
  .qz-navn { padding:14px 22px; }
}

/* ---- §13 MINISPILLET: skolens egen skaerm (#quizView i teacher.html) ----
   Genbruger bookings sprog (.bk-adr, .bk-faner, .bk-rk, .main-card), saa de to
   tilkoebs-agtige skaerme foeles som ét produkt og ikke som to. Kun det, quizzen
   har og booking ikke har, faar egne klasser. */
.qv-vaelg { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 0 12px; }
.qv-vaelg label { margin:0; font-weight:800; }
.qv-vaelg select { width:auto; min-width:210px; margin:0; }
.qv-vaelg .hint { margin:0; }

/* --- ét kort pr. version --- */
.qv-vers {
  border:1px solid color-mix(in srgb, var(--blue) 26%, transparent);
  border-left:5px solid color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius:14px; padding:14px 16px; margin-bottom:14px; background:var(--card-2);
  box-shadow:0 3px 12px rgba(20,40,90,.07);
}
/* En taendt version er den, gaester kan naa lige nu. Det skal kunne ses paa
   en meter afstand, naar man staar med maskinen paa en stand. */
.qv-vers.taendt { border-left-color:var(--green); }
.qv-vers-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.qv-vers-navn { flex:1; min-width:200px; margin:0; font-weight:800; font-size:17px; }
.qv-mrk { background:var(--gold); color:var(--on-gold,#16233d); font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.qv-vers-rk { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:9px; }
.qv-vers-rk label { margin:0; display:flex; align-items:center; gap:6px; font-weight:700; }
.qv-vers-rk input[type=number] { width:74px; margin:0; }
.qv-lbl { font-weight:800; }
.qv-antal-note { margin:0; }
.qv-kontakt { display:inline-flex; align-items:center; gap:6px; font-weight:700; cursor:pointer; margin:0; }
.qv-kontakt input { width:auto; margin:0; }
.qv-vers-adr { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0 9px; }
.qv-vers-adr input { flex:1; min-width:220px; margin:0; font-size:13px; }
.qv-vers-bund { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* .btn har margin-top:18px, fordi den er bygget til at staa alene i en formular.
   I en knap-raekke haenger den 18 px lavere end naboen (§12e). */
.qv-vers-bund .btn, .qv-vers-adr .btn { margin:0; }
.qv-svar { color:var(--green); font-weight:700; }

/* --- opgavelisten --- */
.qv-filtre { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
.qv-filtre .btn-mini.on { background:var(--blue); color:var(--on-blue,#fff); }
.qv-opg {
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
.qv-opg:nth-child(odd) { background:color-mix(in srgb, var(--blue) 5%, transparent); }
/* Fravalgt er DAEMPET, ikke skjult - skolen skal kunne se hvad de har slaaet fra
   og fortryde. Samme regel som "Rediger opgaver" i hovedspillet. */
.qv-opg.fra { opacity:.42; }
.qv-opg-grad { font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.qv-opg-grad.g-let { background:#e3f5e8; color:#1a7a3d; }
.qv-opg-grad.g-middel { background:#fdf1d8; color:#8a6210; }
.qv-opg-grad.g-svaer { background:#fbe3e3; color:#a32626; }
.qv-opg-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.qv-opg-tx b { font-size:15px; }
.qv-opg-tx span { font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qv-opg-type { font-size:12px; color:var(--muted); font-weight:700; white-space:nowrap; }

/* --- ranks --- */
.qv-rank { display:grid; grid-template-columns:26px 56px 1fr 2fr; gap:10px; align-items:start; margin-bottom:10px; }
/* Trinnets nummer. Skolen skal kunne SE raekkefoelgen - de bestemmer bare ikke,
   hvad der skal til for at naa dem. */
.qv-rank-trin { font-weight:900; color:var(--muted); font-size:14px; padding-top:12px; text-align:right; font-variant-numeric:tabular-nums; }
.qv-rank input, .qv-rank textarea { margin:0; }
.qv-rank-ik { text-align:center; font-size:20px; }
.qv-rank-fra { display:flex; align-items:center; gap:5px; margin:0; font-weight:700; white-space:nowrap; }
.qv-rank-fra input { width:64px; }
.qv-rank-tx { resize:vertical; font-family:inherit; line-height:1.4; }
.qv-rank .btn-mini { margin-top:2px; }
@media (max-width:900px){ .qv-rank { grid-template-columns:26px 56px 1fr; } .qv-rank-tx { grid-column:1 / -1; } }

/* --- udtryk --- */
.qv-boks { border:1px solid color-mix(in srgb, var(--blue) 22%, transparent); border-radius:14px; padding:16px 18px; margin-bottom:16px; background:var(--card-2); }
.qv-boks h3 { margin:0 0 12px; }
.qv-boks .btn { margin-top:0; }
.qv-logo-rk { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-top:12px; }
.qv-logo-rk .drop-zone { flex:1; min-width:250px; }
.qv-flueben { display:flex; align-items:center; gap:8px; font-weight:700; margin:12px 0 0; cursor:pointer; }
.qv-flueben input { width:auto; margin:0; }
.qv-qr-vis { margin:12px 0 0; }
.qv-qr-vis img { width:120px; height:120px; border:1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius:10px; background:#fff; padding:6px; }
.qv-tavle { max-width:620px; }

/* ---- §13b PRØVETUR i minispillet ----
   Det ENESTE sted i quizzen med en udgang. Bjaelken skal vaere tydelig nok til at
   man aldrig er i tvivl om, at man staar i en proeve og ikke i det rigtige - men
   ikke saa tung at den skygger for det, man er kommet for at se. */
.qz-proevebar {
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 18px; background:#0e1b29; color:#e7eefb;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.qz-pb-mrk { background:var(--gold); color:#16233d; font-weight:800; font-size:12px; letter-spacing:.1em; padding:4px 11px; border-radius:999px; }
.qz-pb-tx { flex:1; min-width:180px; font-size:14px; opacity:.92; }
.qz-proevebar .btn-mini { margin:0; }
/* Bjaelken ligger oven i toppen af scenen - skub indholdet ned, ellers ryger uret ind under den */
body.qz-proeve .qz-top { top:44px; }
/* Prøvebjaelken + vaelgeren tager plads i toppen. Vi strammer luften i stedet for at
   lade svar-knapperne falde ud under skaermkanten - i en gennemgang skal man kunne se
   baade opgaven og "Vis det rigtige svar" uden at scrolle. */
body.qz-proeve .qz-scene { padding-top:112px; padding-bottom:24px; }
body.qz-proeve .qz-kort { max-height:calc(100vh - 136px); }

/* ---- opgave-vaelgeren i gennemgangen ----
   Nummererede brikker med svaerhedsfarve. Haek = besvaret. Det er dét, der goer det
   muligt at gaa efter ÉN bestemt opgave i stedet for at spille sig frem til den. */
.qz-vaelger {
  display:flex; gap:7px; flex-wrap:wrap; justify-content:center;
  max-width:min(980px,100%); margin-bottom:2px;
  background:rgba(255,255,255,.9); padding:7px 10px; border-radius:12px;
  box-shadow:0 6px 20px rgba(10,20,40,.22);
}
.qz-brik {
  width:31px; height:31px; border-radius:8px; border:1px solid rgba(0,0,0,.14);
  font-weight:800; font-size:14px; cursor:pointer; color:#16233d;
  font-variant-numeric:tabular-nums; position:relative;
  transition:transform .12s ease, box-shadow .12s ease;
}
.qz-brik.g-let { background:#e3f5e8; }
.qz-brik.g-middel { background:#fdf1d8; }
.qz-brik.g-svaer { background:#fbe3e3; }
.qz-brik:hover { transform:translateY(-2px); box-shadow:0 4px 10px rgba(10,20,40,.2); }
.qz-brik.paa { outline:3px solid var(--blue); outline-offset:1px; }
/* Besvaret: et lille haek i hjoernet i stedet for at farve hele brikken - saa
   svaerhedsgraden stadig kan ses paa den, man allerede har vaeret igennem. */
.qz-brik.klar::after {
  content:'✓'; position:absolute; right:-3px; top:-5px;
  background:var(--green); color:#fff; width:15px; height:15px; border-radius:50%;
  font-size:10px; line-height:15px; font-weight:800;
}
.qz-knapper { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.qz-knapper .btn { margin:0; width:auto; }
.btn.qz-facit { font-size:15px; padding:12px 22px; }
.btn.qz-naeste { font-size:17px; padding:13px 30px; }
#qzFacitBoks { margin-top:14px; }

/* ---- to døre til prøveturen (§13b) ---- */
.qv-doere { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0 6px; }
@media (max-width:640px){ .qv-doere { grid-template-columns:1fr; } }
.qv-doer {
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left;
  padding:18px 18px 16px; border-radius:14px; cursor:pointer;
  background:var(--card-2); border:1px solid color-mix(in srgb, var(--blue) 26%, transparent);
  box-shadow:0 3px 12px rgba(20,40,90,.08); transition:transform .12s ease, box-shadow .12s ease;
}
.qv-doer:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(20,40,90,.16); border-color:var(--blue); }
.qv-doer-ik { font-size:30px; line-height:1; }
.qv-doer b { font-size:17px; }
.qv-doer span:last-child { font-size:13.5px; color:var(--muted); line-height:1.45; }
.qv-proev { background:var(--blue); color:var(--on-blue,#fff); }

/* I gennemgangen skal opgaven kunne ses PAA ÉN SKAERM sammen med svar-knapperne.
   Billedet er der for genkendelsens skyld og maa gerne vaere mindre her end for en
   gaest, der kigger paa det i ro. */
/* ⚠ RETTET 25/8: reglerne spurgte foer efter [style*="display: none"] - med mellemrum
   - men HTML'en skriver "display:none" uden. Testen slog derfor ALDRIG fejl, og
   gennemgangens sammenpressede udseende laa hen over det rigtige spil ogsaa. Nu
   saetter quiz.html klassen .qz-gennemgang paa <body>, og den kan ikke misforstaas. */
body.qz-gennemgang .qz-kort-krop .task-illu { max-height:min(26vh, 260px); }
body.qz-gennemgang .qz-kort-krop { padding:18px 26px 20px; }
body.qz-gennemgang .qz-kort-krop .opt { padding:12px 16px; }

/* Start-knappen ved den faste adresse. Den er DEN handling, man kommer for paa
   selve dagen - derfor stoerre og groen, mens Kopiér og Åbn er smaa hjaelpere. */
.btn.qv-start-stor { width:auto; margin:0; font-size:16px; padding:12px 22px; white-space:nowrap; }
.qv-startk { background:var(--green); color:var(--on-green,#fff); }

/* ---- §13 MINISPIL: LISTEN er forsiden ----
   Ét kort pr. version med to knapper. Start er den store groenne - det er dén,
   man kommer for paa selve dagen. Alt andet ligger bag Rediger. */
.qv-kort {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  border:1px solid color-mix(in srgb, var(--blue) 24%, transparent);
  border-left:6px solid color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius:16px; padding:18px 20px; margin-bottom:14px; background:var(--card-2);
  box-shadow:0 3px 14px rgba(20,40,90,.08);
}
/* En taendt version er den, gaester kan naa lige nu. Det skal kunne ses paa en
   meter afstand, naar man staar med maskinen paa en stand. */
.qv-kort.taendt { border-left-color:var(--green); }
.qv-kort-tx { flex:1; min-width:220px; }
.qv-kort-navn { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--font-display); font-weight:800; font-size:23px; }
.qv-kort-meta { color:var(--muted); font-size:14px; margin-top:5px; font-variant-numeric:tabular-nums; }
.qv-status { font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.qv-status.paa { background:color-mix(in srgb, var(--green) 20%, transparent); color:var(--green-dark); }
.qv-status.af { background:color-mix(in srgb, var(--ink) 12%, transparent); color:var(--muted); }
.qv-kort-knap { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
/* .btn har margin-top:18px, fordi den er bygget til at staa alene i en formular.
   I en knap-raekke haenger den skaevt (§12e). */
.qv-kort-knap .btn { margin:0; width:auto; }
.btn.qv-kort-start { font-size:19px; padding:15px 32px; }
.btn.qv-kort-ret { font-size:15px; padding:13px 20px; }

.qv-nyrk { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 6px; }
.qv-adrfod {
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:26px; padding-top:18px; border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.qv-adrfod-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.qv-adrfod-h input { width:min(340px,60vw); margin:0; font-size:13px; }

/* ---- REDIGER én version ---- */
.qe-top { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.qe-navn-rk { flex:1; min-width:260px; }
.qe-navn-rk input { margin:0; font-weight:800; font-size:18px; }
.qe-taend { padding-bottom:10px; }
.qe-top .btn-mini { margin-bottom:8px; }
.btn.qe-start { font-size:16px; padding:12px 22px; white-space:nowrap; }
/* Opgavens nummer i arket - saa en fejl kan findes i regnearket */
.qv-opg-nr { min-width:26px; text-align:right; font-weight:800; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }

/* Minispillet arver spillets udtryk - der er ikke noget at vaelge. Linjen forklarer
   hvorfor der IKKE staar en udseende-boks, saa fravaeret ikke ligner en mangel. */
.qe-arvet { border-left:4px solid color-mix(in srgb, var(--blue) 35%, transparent); padding-left:14px; margin-top:18px; }

/* ============================================================================
   §13g STORSKAERMEN - highscore-tavlen paa et arrangement (public/tavle.html)
   Den ses paa afstand, ofte fra en projektor bagest i et lokale. Derfor er alt
   stort: en tavle, man skal gaa hen til for at laese, er ingen tavle.
   ========================================================================== */
.tv-body { min-height:100vh; display:flex; align-items:stretch; justify-content:center; overflow:hidden; }
.tv-body .tv-side {
  flex:1; display:flex; flex-direction:column; gap:clamp(10px,1.6vh,22px);
  padding:clamp(16px,2.4vh,34px) clamp(18px,3vw,54px); max-width:1500px; width:100%;
}
.tv-body .tv-top { display:flex; align-items:center; gap:clamp(12px,2vw,26px); }
.tv-body .tv-logo { height:clamp(46px,7vh,82px); width:auto; object-fit:contain; flex-shrink:0; }
.tv-body .tv-titler { flex:1; min-width:0; }
.tv-body .tv-titler h1 {
  margin:0; font-size:clamp(30px,4.6vh,58px); line-height:1.05; letter-spacing:-.01em;
  color:var(--on-blue,#fff);
}
.tv-body .tv-titler p { margin:2px 0 0; font-size:clamp(15px,2.1vh,26px); font-weight:700; opacity:.72; }
.tv-body .tv-tael {
  text-align:center; flex-shrink:0; padding:clamp(6px,1vh,12px) clamp(12px,1.6vw,22px);
  border-radius:16px; background:color-mix(in srgb, var(--gold) 22%, transparent);
}
.tv-body .tv-tael b { display:block; font-size:clamp(22px,3.4vh,42px); line-height:1; font-variant-numeric:tabular-nums; }
.tv-body .tv-tael span { font-size:clamp(11px,1.4vh,15px); font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:.75; }

.tv-body .tv-liste { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(6px,.9vh,12px); flex:1; min-height:0; }
.tv-body .tv-rk {
  display:grid; grid-template-columns:clamp(52px,5vw,84px) 1fr auto auto;
  align-items:center; gap:clamp(10px,1.6vw,24px);
  padding:clamp(8px,1.2vh,16px) clamp(14px,1.8vw,26px);
  border-radius:18px; background:rgba(255,255,255,.90);
  box-shadow:0 2px 0 rgba(22,35,61,.10);
}
.tv-body .tv-plads { font-size:clamp(22px,3.2vh,40px); font-weight:900; text-align:center; color:var(--muted); font-variant-numeric:tabular-nums; }
.tv-body .tv-navn { font-size:clamp(22px,3.4vh,44px); font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-body .tv-rank { font-size:clamp(11px,1.5vh,17px); font-weight:800; letter-spacing:.05em; text-transform:uppercase; opacity:.62; white-space:nowrap; }
.tv-body .tv-point { font-size:clamp(22px,3.2vh,42px); font-weight:900; font-variant-numeric:tabular-nums; min-width:3.2ch; text-align:right; }

/* Top 3 skal kunne ses fra bagerste raekke - derfor pokalfarver, ikke bare fed skrift. */
.tv-body .tv-top1 { background:linear-gradient(100deg, #fff6d8, #ffe9a8); box-shadow:0 3px 0 rgba(160,120,10,.28); }
.tv-body .tv-top1 .tv-plads, .tv-body .tv-top1 .tv-point { color:#8a6a04; }
.tv-body .tv-top2 { background:linear-gradient(100deg, #f6f8fb, #e3e9f2); }
.tv-body .tv-top2 .tv-plads { color:#6b7891; }
.tv-body .tv-top3 { background:linear-gradient(100deg, #fdefe4, #f6dcc6); }
.tv-body .tv-top3 .tv-plads { color:#9a6534; }

/* Et lysglimt paa den, der LIGE er kommet paa. Kun den ene - blinker hele tavlen,
   hver gang nogen spiller, betyder glimtet ingenting. */
@keyframes tvNy { 0%{ transform:scale(1); box-shadow:0 0 0 0 var(--green); } 22%{ transform:scale(1.022); box-shadow:0 0 0 8px color-mix(in srgb, var(--green) 40%, transparent); } 100%{ transform:scale(1); box-shadow:0 0 0 0 transparent; } }
.tv-body .tv-ny { animation:tvNy 1.5s ease-out 1; }

.tv-body .tv-tom { text-align:center; margin:auto; font-size:clamp(22px,3.4vh,40px); font-weight:800; opacity:.85; color:var(--on-blue,#fff); }
.tv-body .tv-tom span { display:block; margin-top:6px; font-size:clamp(14px,1.9vh,22px); font-weight:700; opacity:.7; }
.tv-body .tv-fod { margin:0; text-align:center; font-size:clamp(12px,1.6vh,19px); font-weight:700; opacity:.6; color:var(--on-blue,#fff); }

@media (prefers-reduced-motion: reduce) { .tv-body .tv-ny { animation:none; } }

/* Adressen til storskaermen paa skolens rediger-skaerm */
.qe-tavle-adr { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.qe-tavle-adr input { flex:1; min-width:220px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }

/* ============================================================================
   §13h MINISPILLETS REDIGER-SKAERM - sammenklappede afsnit og laast redigering
   Skaermen var en kilometer lang og lige saa bred som vinduet. Man landede midt
   i den uden at vide hvad der var hvor, og ALT stod aabent til at rette.
   ========================================================================== */

/* --- TALFELTER: ingen op/ned-pile. De laa hen over tallet og lignede en fejl. --- */
.qe-tal, .qv-rank input[type="number"], #quizEditView input[type="number"] {
  -moz-appearance:textfield; appearance:textfield;
}
.qe-tal::-webkit-outer-spin-button, .qe-tal::-webkit-inner-spin-button,
#quizEditView input[type="number"]::-webkit-outer-spin-button,
#quizEditView input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance:none; margin:0;
}
.qe-tal {
  width:64px; text-align:center; font-variant-numeric:tabular-nums; font-weight:800;
  padding:8px 6px;
}

/* --- AFSNIT --- */
.qe-af {
  border:2px solid var(--card-2); border-radius:16px; background:var(--card);
  margin:0 0 12px; overflow:hidden;
}
.qe-af-hoved {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:14px 18px; border:0; background:transparent; cursor:pointer;
  font:inherit; text-align:left; color:inherit;
}
.qe-af-hoved:hover { background:color-mix(in srgb, var(--blue) 5%, transparent); }
.qe-af-pil { font-size:14px; opacity:.55; transition:transform .16s ease; flex-shrink:0; }
.qe-af.aaben .qe-af-pil { transform:rotate(90deg); }
.qe-af-titel { font-weight:800; font-size:16px; flex-shrink:0; }
.qe-af-kort { font-size:13px; font-weight:600; opacity:.62; margin-left:auto; text-align:right; }
.qe-af-krop { display:none; padding:0 18px 18px; }
.qe-af.aaben .qe-af-krop { display:block; }

/* Ugemte aendringer: en gul kant, saa man kan SE hvor de ligger, ogsaa naar
   afsnittet er klappet sammen. */
.qe-af.snavs { border-color:color-mix(in srgb, var(--gold) 65%, transparent); }
.qe-af.snavs .qe-af-kort::after { content:' · ikke gemt'; font-weight:800; color:#a07a08; }

/* --- LÅS --- */
.qe-laas {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:12px;
  background:color-mix(in srgb, var(--blue) 5%, transparent);
}
.qe-laas-tx { font-size:13px; opacity:.65; font-weight:600; }
.qe-af.ulaast .qe-laas { display:none; }
.qe-felter { display:none; }
.qe-af.ulaast .qe-felter { display:block; }
/* Afsnit UDEN laas (tavlen, adressen) viser bare deres indhold. */
.qe-af-krop > .qe-felter:only-child { display:block; }

/* --- TO KOLONNER, saa en boks ikke fylder hele skaermens bredde --- */
.qe-to-kol { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; }
.qe-to-kol input { width:100%; }

/* --- OPGAVELISTEN i flere spalter: 32 raekker under hinanden var en kilometer --- */
.qe-opg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(430px, 1fr)); gap:6px 18px; }
.qe-opg-grid .qv-opg { margin:0; }

/* --- SOCIALE MEDIER (§13i) --- */
.qe-soc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; margin:12px 0; }
.qe-soc { border:2px solid var(--card-2); border-radius:12px; padding:10px 12px; background:var(--card); }
.qe-soc-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:13.5px; }
.qe-soc-ik { width:22px; height:22px; border-radius:5px; object-fit:contain; }
.qe-soc-klar { font-size:11px; font-weight:800; color:#2a8a3d; margin-left:auto; }
.qe-soc-rk { display:flex; gap:8px; align-items:center; }
.qe-soc-rk input { flex:1; min-width:0; font-size:12.5px; padding:8px; }
.qe-soc-qr { width:38px; height:38px; border-radius:6px; border:1px solid var(--card-2); background:#fff; padding:2px; flex-shrink:0; }

/* Ranks: trinnene staar paa række i stedet for i én lang spalte */
.qv-rank-fra { white-space:nowrap; }

@media (max-width:900px) {
  .qe-opg-grid, .qe-soc-grid { grid-template-columns:1fr; }
  .qe-af-kort { display:none; }
}

/* Følg os paa minispillets slutskaerm - samme greb som i hovedspillet: ikon, navn
   og en lille QR. Ikonet er et LINK, saa den, der sidder ved maskinen, kan klikke,
   og den, der staar med telefonen, kan scanne. */
.qz-soc { text-decoration:none; color:inherit; }
.qz-soc-nv { font-size:12px; font-weight:800; color:#16233d; }
.qz-soc-hint { margin:10px 0 0; font-size:11.5px; font-weight:700; color:#5a6782; }


/* ---------- TRÆK OG SLIP i bookingformularens felter ----------
   Pilene alene var noget rod, naar et spoergsmaal skulle fire pladser ned. Grebet
   staar yderst til venstre, saa det er tydeligt, at raekken kan tages. Pilene bliver
   liggende: de er den eneste vej for en, der bruger tastatur. */
.bk-greb {
  display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
  color:#b6c1d4; font-size:17px; line-height:1; letter-spacing:-1px;
  border-radius:6px; align-self:stretch;
}
.bk-greb:hover { color:var(--blue); background:color-mix(in srgb, var(--blue) 10%, transparent); }
.bk-greb:active { cursor:grabbing; }
/* Overskriftsraekken har ingen greb - men skal have samme foerste kolonne. */
.bk-felt-hoved > span:first-child { }

/* Raekken, man har fat i: loeftet fra papiret, saa man kan se hvad man flytter. */
.bk-felt.traekkes {
  background:#fff; box-shadow:0 10px 24px rgba(22,35,61,.18); position:relative; z-index:3;
  outline:2px solid color-mix(in srgb, var(--blue) 45%, transparent);
}
.bk-felt.traekkes .bk-greb { cursor:grabbing; color:var(--blue); }
/* De andre raekker glider paa plads. Selve glidningen styres fra JS (FLIP), saa
   der staar bevidst INGEN transition her - den ville spaende ben for maalingen. */
.bk-felt-liste.traek-i-gang { cursor:grabbing; }
.bk-felt-liste.traek-i-gang .bk-felt:hover { background:none; }
.bk-felt.traekkes { will-change:transform; }

/* Linjen der forklarer, hvorfor navnefeltet ikke er der i en proevetur. */
.qz-proeve-note { margin:2px 0 10px; font-size:14.5px; color:var(--muted); font-style:italic; }

/* Rammen om "Gælder for disse besøg" i mailskabelonerne (§12f).
   Fluebenet afgoer, HVILKEN mail man sidder og skriver - saa det maa ikke se ud som
   endnu en linje i formularen. En svag ramme og en tone er nok: det skal springe i
   oejnene uden at raabe. */
.bk-gaelder {
  margin-top:14px; padding:12px 14px; border-radius:12px;
  background:color-mix(in srgb, var(--blue) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--blue) 20%, transparent);
}
.bk-gaelder .bk-tjek { margin-top:6px; }

/* Formularen er en DEL af besoeget, ikke et kort for sig (§12, 25/8). Den skal se ud
   som et afsnit inde i kortet - derfor ingen ramme og ingen skygge, kun luft. */
.bk-underdel { margin-top:4px; }
.bk-underdel h4.bk-under-h { margin:0 0 4px; font-size:16px; }

/* "Sendes altid" staar dér, hvor et flueben ellers ville staa. Det skal se ud som en
   oplysning, ikke som en slukket kontakt man kan taende. */
.bk-altid { margin:2px 0 0; font-weight:800; color:var(--ink); font-size:15px; }
.bk-altid::before { content:'✓'; color:var(--green); font-weight:800; margin-right:8px; }

/* Tekstfelter, der vokser med det, man skriver (§12f). Samme grund som .bk-rig:
   en mail paa tyve linjer skal ikke skrives gennem et vindue paa fem. JavaScript
   saetter hoejden - her sikrer vi bare, at den ikke kan traekkes mindre end starten,
   og at man ikke faar to rullebjaelker oven i hinanden. */
textarea.bk-vokser { overflow:hidden; resize:vertical; }

/* Farvekode-feltet ved siden af farvevaelgeren (§12c, 25/8). En skole faar tit sin farve
   oplyst som en kode af deres designbureau - de skal kunne skrive den, ikke ramme den. */
/* ⚠ 27/8: feltet var 106px hoejt og bredt som et almindeligt tekstfelt - klodset til
   syv tegn, der aldrig bliver flere. Det er nu praecis saa stort, som koden fylder,
   og lige saa hoejt som farvevaelgeren ved siden af. */
.bk-hex {
  width:94px; margin:0; padding:6px 9px; height:34px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:13px; text-transform:lowercase; letter-spacing:.02em;
}
.bk-hex:disabled { opacity:.5; }
/* Overskriften over HEX-feltet. Den stod FOER 27/8 til hoejre for feltet - altsaa efter
   det, den forklarede. Nu staar den mellem nuancerne og feltet, dér hvor valget skifter
   fra "peg paa en" til "skriv jeres egen". Og der staar HEX, fordi det er dét ord, deres
   designbureau bruger, naar de udleverer farven. */
.bk-hex-h {
  font-size:12.5px; font-weight:800; color:#7c8aa3; letter-spacing:.02em;
  margin:2px 0 6px;
}
/* Fluebenet ved HEX-feltet. Nuancerne faar et flueben, naar de er valgt - uden det her
   var deres egen kode det ene valg paa skaermen, man ikke kunne SE var taget imod. */
.bk-hex-ok {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; flex:0 0 auto;
  background:var(--blue); color:#fff; font-size:14px; font-weight:800; line-height:1;
}

/* BOOKING-PALETTEN (§12c, 25/8). Faerdige nuancer, valgt til en side der skriver ud af
   huset - ikke til elevernes spilskaerm. Knappen ER farven; navnet staar under, saa man
   kan tale om den i et team ("vi tog Skifer") uden at citere en talkode. */
.bk-palet { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.bk-sw {
  width:74px; height:52px; border-radius:12px; border:2px solid transparent; cursor:pointer;
  position:relative; padding:0; box-shadow:0 2px 6px rgba(10,20,40,.16);
  display:flex; align-items:flex-end; justify-content:center;
}
.bk-sw span {
  position:absolute; top:calc(100% + 4px); left:0; right:0; text-align:center;
  font-size:11.5px; font-weight:700; color:var(--muted); white-space:nowrap;
}
.bk-palet { margin-bottom:22px; }
.bk-sw:hover { transform:translateY(-2px); }
.bk-sw.on { border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 14%, transparent), 0 4px 10px rgba(10,20,40,.2); }
.bk-sw.on::after { content:'✓'; color:#fff; font-weight:800; font-size:20px; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-shadow:0 1px 3px rgba(0,0,0,.45); }
/* LYSE NUANCER (baggrundspaletten). Hvid paa braekket hvid er ikke et diskret flueben -
   det er intet flueben. Og en hvid proeve paa en hvid skaerm har ingen kant, saa man kan
   ikke se, hvor den slutter. Begge dele faar en moerk streg i stedet. */
.bk-sw.lys { box-shadow:inset 0 0 0 1px #dde3ec, 0 2px 6px rgba(10,20,40,.10); }
.bk-sw.lys.on::after { color:#1e2a3a; text-shadow:none; }

/* ===== DESIGN-SKAERMEN I TO SPALTER (§12c, 25/8) =====
   Skaermen var ÉN spalte i fuld bredde. Et felt til to linjers velkomst blev
   1200 pixels bredt - og fordi alt laa under hinanden, skulle man rulle op og
   ned mellem teksten og den farve, den skulle staa paa. Teksterne staar nu til
   venstre, udtrykket til hoejre, og felterne er ikke bredere end deres indhold.
   Under 1000px falder de tilbage til ét spor - to spalter aa 300px er ulaeselige. */
.bk-side-grid {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:4px 44px; align-items:start;
}
.bk-side-spalte { min-width:0; }
/* Den foerste underoverskrift i hver spalte staar i toppen - dens normale
   luft ovenover er til at skille afsnit, og her er der intet at skille fra. */
.bk-side-spalte > h4.bk-under-h:first-child { margin-top:0; }
/* Et felt skal have den bredde, det skal rumme. En overskrift paa 80 tegn og en
   velkomst paa to linjer bliver ikke bedre af at vaere en meter lang. */
#bkPaneSide input[type=text], #bkPaneSide textarea, #bkPaneSide select { max-width:440px; }
/* "input" SKAL staa der. #bkPaneSide input[type=text] ovenover vejer ét element mere
   end #bkPaneSide .bk-hex - saa blev farvekoden 440 pixels bred til seks tegn. */
#bkPaneSide input.bk-hex { max-width:94px; }
#bkPaneSide .hint { max-width:440px; }
/* Traek-logoet-herind-feltet er ikke et input og blev derfor ikke fanget ovenfor.
   Uden loft var det spaltens bredeste element - og saa saa spalten skaev ud. */
#bkPaneSide #bkLogoBoks { max-width:440px; }
/* Underoverskriften slutter, hvor felterne slutter. Uden loftet loeb stregen - og med
   den ret-knappen - 200 pixels laengere ud end det, den staar over, og saa svaevede
   knappen i tomrummet i stedet for at hoere til teksterne. */
#bkPaneSide .bk-side-spalte h4.bk-under-h { max-width:440px; }
/* Farvevaelger, kode og forklaring hoerer til den samme handling og skal blive
   paa linjen - braekker den om, ligner koden et felt for sig selv. */
#bkPaneSide .bk-farve { flex-wrap:nowrap; }
#bkPaneSide .bk-farve .hint { flex:1 1 auto; min-width:0; }
/* Mindre prøver: seks farver skal kunne staa paa to raekker i en halv spalte. */
#bkPaneSide .bk-sw { width:58px; height:42px; border-radius:10px; }
#bkPaneSide .bk-palet { gap:9px; margin-bottom:20px; }
@media (max-width: 1000px) {
  .bk-side-grid { grid-template-columns:1fr; gap:0; }
  .bk-side-spalte > h4.bk-under-h:first-child { margin-top:20px; }
  .bk-side-spalte:first-child > h4.bk-under-h:first-child { margin-top:0; }
}