/* Felles oppsett. Farger og bakgrunn styres av variablene under – en profil (profiler/<navn>/profil.css) overstyrer dem. */
:root {
  --bg:#14102a; --bakgrunn:radial-gradient(circle at 20% 0%, #2b1f5c 0, #14102a 60%) fixed;
  --kort:#221b45; --kant:#3a2f72; --tekst:#f3f0ff; --dempet:#a59fd0; --felt:#120e26;
  --aksent:#33e1ff; --aksent2:#ff4fa3; --uthev:#ffd23f; --gronn:#3ddc84; --rod:#ff5c5c;
  --knapp-tekst:#14102a; --knapp2-tekst:#fff; --valgt-bg:#123049; --riktig-bg:#123a2a; --feil-bg:#3a1420;
  --nav-bg:rgba(20,16,42,.96); --tittel:linear-gradient(90deg,var(--aksent2),var(--aksent));
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --radius:16px; --logo-hoyde:56px;
}
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bakgrunn); color:var(--tekst); font-family:var(--font); -webkit-tap-highlight-color:transparent; }
main { max-width:640px; margin:0 auto; padding:16px 16px 120px; }
.topp { max-width:640px; margin:0 auto; padding:14px 16px 0; display:flex; align-items:center; gap:12px; }
.topp[hidden] { display:none; }
.topp img { height:var(--logo-hoyde); width:auto; display:block; }
.topp .undertittel { color:var(--dempet); font-size:.95rem; }
h1 { font-size:1.6rem; margin:.4em 0; background:var(--tittel); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2 { font-size:1.2rem; margin:.6em 0; }
.kort { background:var(--kort); border:1px solid var(--kant); border-radius:var(--radius); padding:16px; margin:12px 0; }
.dempet { color:var(--dempet); }
input[type=text] { width:100%; font-size:1.2rem; padding:14px; border-radius:12px; border:2px solid var(--kant); background:var(--felt); color:var(--tekst); }
input[type=text]:focus { outline:none; border-color:var(--aksent); }
button { font:inherit; cursor:pointer; border:none; border-radius:12px; padding:14px 18px; font-size:1.05rem; font-weight:600; color:var(--knapp-tekst); background:var(--aksent); }
button.stor { width:100%; margin-top:12px; font-size:1.2rem; }
button.rosa { background:var(--aksent2); color:var(--knapp2-tekst); }
button.gul { background:var(--uthev); color:var(--knapp-tekst); }
button.rod { background:var(--rod); color:#fff; }
button.grå { background:var(--kant); color:var(--tekst); }
button:disabled { opacity:.4; }
.valg { display:grid; gap:10px; margin-top:14px; }
.valg button { text-align:left; background:var(--felt); color:var(--tekst); border:2px solid var(--kant); padding:16px; font-weight:500; display:flex; gap:12px; align-items:center; }
.valg button .bokstav { flex:0 0 32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--kant); color:var(--tekst); font-weight:700; }
.valg button.valgt { border-color:var(--aksent); background:var(--valgt-bg); }
.valg button.valgt .bokstav { background:var(--aksent); color:var(--knapp-tekst); }
.valg div { padding:10px 12px; border-radius:10px; border:2px solid var(--kant); display:flex; gap:10px; align-items:center; }
.valg div.riktig { border-color:var(--gronn); background:var(--riktig-bg); }
.valg div.feil { border-color:var(--rod); background:var(--feil-bg); }
video, audio { width:100%; border-radius:12px; margin-top:10px; }
video { background:#000; }
.nav { position:fixed; left:0; right:0; bottom:0; background:var(--nav-bg); border-top:1px solid var(--kant); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); }
.nav .rad { max-width:640px; margin:0 auto; display:flex; gap:8px; }
.nav .rad button { flex:1; }
.prikker { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.prikker span { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:.8rem; background:var(--felt); border:1px solid var(--kant); cursor:pointer; }
.prikker span.ok { background:var(--kant); }
.prikker span.her { outline:2px solid var(--uthev); }
.merke { display:inline-block; padding:2px 10px; border-radius:99px; background:var(--kant); color:var(--tekst); font-size:.85rem; margin-right:6px; }
.merke.ok { background:var(--gronn); color:#fff; }
.merke.nei { background:var(--rod); color:#fff; }
.liste { list-style:none; padding:0; margin:0; }
.liste li { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 4px; border-bottom:1px solid var(--kant); }
.liste li:last-child { border-bottom:none; }
.liste li.deg { color:var(--aksent); font-weight:700; }
.plass { width:2.2em; font-weight:800; }
.stolpe { height:8px; background:var(--felt); border-radius:4px; overflow:hidden; flex:1; margin:0 10px; }
.stolpe i { display:block; height:100%; background:linear-gradient(90deg,var(--aksent2),var(--aksent)); }
.feilmld { color:var(--rod); margin-top:8px; min-height:1.2em; }
.pall { display:flex; align-items:flex-end; justify-content:center; gap:8px; margin:20px 0 6px; }
.pall div { text-align:center; flex:1; max-width:160px; }
.pall .blokk { border-radius:12px 12px 0 0; display:grid; place-items:center; font-size:1.8rem; font-weight:800; color:#14102a; }
.pall .navn { font-weight:700; margin-bottom:6px; word-break:break-word; }
.qrboks { background:#fff; border-radius:12px; padding:8px; }
.lydboks { display:flex; gap:14px; align-items:flex-start; border-color:var(--aksent); }
.lydboks .lydikon { font-size:2rem; line-height:1; }
.lydboks p { margin:4px 0 10px; }
.lydboks button { padding:10px 14px; font-size:1rem; }
.lydboks .lydsvar { display:block; margin-top:8px; font-size:.95rem; }
.lydhint { margin:8px 0 0; font-size:.9rem; color:var(--dempet); }