: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); }
/* 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-input { width: 46px; height: 40px; padding: 0; border: 2px solid #d7deec; border-radius: 10px; background: none; cursor: pointer; flex: 0 0 auto; }
.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 var(--card-2); 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:1px solid rgba(0,0,0,.08); 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; 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; 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:rgba(8,20,48,.4); }
.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; }
.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; }

.lb-btn { background:linear-gradient(180deg,#ffffff,#eef2f8); color:var(--ink); border:1px solid rgba(0,0,0,.10); border-radius:999px; padding:14px 26px; font-weight:800; font-size:16px; cursor:pointer; box-shadow:var(--hi), 0 4px 14px rgba(0,0,0,.25); }
.lb-btn:hover { background:#eef3ff; }
/* 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. */
.lb-btn.center { background:#eaf0ff; color:var(--blue-dark); min-width:224px; text-align:center; }
.lb-btn.danger { color:#c0392b; }
@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; }
.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); }

/* 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:1px solid rgba(120,150,210,.28); 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; }
.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:1px solid rgba(20,40,90,.14); }
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:1px solid rgba(20,40,90,.14); }
.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 { font-family:var(--font-display); background:linear-gradient(180deg,#ffffff,#e9f1fc); color:#1a2b47;
  font-weight:700; padding:9px 20px; border-radius:999px; font-size:16px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.85); 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:1px solid rgba(20,40,90,.14);
  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); }
.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; }
}

/* 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; }
.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:1px solid rgba(120,150,210,.28); 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) */
#introClose { position:absolute; bottom:28px; left:26px; z-index:10; 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; }

.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 { 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:1px solid rgba(255,255,255,.85); 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; }
.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 */
.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); }
@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, 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:36px; }
#edTourBtn, #tourBtn, #tvTourBtn { gap:8px; padding:8px 16px !important; font-size:14px; }
/* 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); }
.area-layout .area-intro { position:absolute; left:0; top:0; z-index:3; width:min(360px,42%); }
.area-layout .ai-body { max-height:min(46vh,380px); overflow:auto; }   /* vokser med teksten (kort intro = ingen scroll); højt loft så en meget lang intro stadig ikke når boblerne */
.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:1px solid rgba(20,40,90,.14); 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)); 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 { 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; }
.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; }
.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; }
/* 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(--shadow); padding:18px 20px; }
.tv-lbl { font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.6px;
  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:1px solid #e6ecf6; border-radius:12px; padding:12px 14px; margin-bottom:10px; background:#fafcff; }
.tv-udf.laast { background:var(--card-2); }
.tv-udf-top { display:flex; align-items:center; gap:9px; font-size:15px; }
.tv-udf-top b { flex:1; min-width:0; }
.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; }
/* --- 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-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 { margin-top:8px; padding-left:6px; border-left:2px solid #e6ecf6; }
.tv-lbl small { color:var(--muted); text-transform:none; letter-spacing:0; font-weight:700; }
/* 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; }
/* Ogsaa i spillets bundbjaelke - samme genkendelige roede */
.lb-btn.lb-sos { background:linear-gradient(180deg,#e05a4e,#c0392b); color:#fff; }
.lb-btn.lb-sos svg { stroke:#fff; }
.lb-btn.lb-sos:hover { background:linear-gradient(180deg,#e8695d,#b5342a); }
/* 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); }
/* "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); }
.claim-row .cg { 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;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.claim-row .cq { font-weight:700; color:var(--blue-dark); line-height:1.26;
  font-size:clamp(13px,1.8vh,20px); }
/* 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); }
.res-fane:hover { color:var(--blue-dark); }
.res-fane.aktiv { color:var(--blue-dark); border-bottom-color:var(--blue); }

.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:1px solid #d9e3f5; 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 */
.wp-tour { position:absolute; left:20px; bottom:20px; z-index:4;
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display);
  font-weight:700; font-size:13.5px; cursor:pointer; border-radius:999px; padding:9px 15px;
  background:rgba(255,255,255,.82); color:var(--blue-dark); border:1px solid rgba(255,255,255,.7);
  box-shadow:0 4px 12px rgba(0,20,60,.20); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:.9; transition:opacity .15s, background .15s; }
.wp-tour:hover { opacity:1; background:#fff; }
.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-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; }
/* 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; }
/* 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; margin-left:10px;
  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; margin-left:10px; 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; }