:root {
  --hav: #101418;
  --land: #2a241d;
  --kyst: #6e5c46;
  --grense: #4a3f33;
  --tekst: #ece4d6;
  --svak: #a89c8a;
  --flate: #1b1713;
  --flate-2: #241f19;
  --kant: #3a3128;
  /* Glødfargene per ætt (vår design): Frøys ætt ravgul, Hagals ætt isblå, Tys ætt stålhvit */
  --rav: #f2a93b;
  --is: #8fd3ff;
  --staal: #c9d6e3;
  --uthev: var(--rav);
  /* Funn fra vikingtiden (yngre futhark) på kartet (vår design) */
  --vikingtid: #e0775a;
  /* Funn fra middelalderen (middelalderruner) på kartet (vår design) */
  --middelalder: #8cc79a;
  /* Runer som bare kulturminneregistrene nevner (vår design) */
  --register: #c8a2e0;
  --skrift: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --system: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--hav);
  color: var(--tekst);
  font-family: var(--system);
  overflow: hidden;
}

/* Topplinja */
.topp {
  position: fixed; inset: 0 0 auto 0; z-index: 1150; /* over panelet (1100), så Kartvalg ikke skjules bak et åpent funn */
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: linear-gradient(var(--flate) 70%, transparent);
  pointer-events: none;
}
.topp > * { pointer-events: auto; }
.tittel h1 { margin: 0; font: 600 1.35rem/1.1 var(--skrift); letter-spacing: .01em; }
.undertittel { margin: 2px 0 0; color: var(--svak); font-size: .8rem; }
.filter { display: flex; gap: 6px; flex-wrap: wrap; }
.filter button {
  font: inherit; font-size: .85rem; color: var(--tekst);
  background: var(--flate-2); border: 1px solid var(--kant); border-radius: 999px;
  padding: 6px 12px; cursor: pointer;
}
.filter button[aria-pressed="true"] { border-color: var(--uthev); color: var(--uthev); }
.filter button:focus-visible, .lukk:focus-visible { outline: 2px solid var(--uthev); outline-offset: 2px; }

/* Kartet */
#kart { position: fixed; inset: 0; background: var(--hav); }
.leaflet-container { background: var(--hav); font-family: var(--system); }
.detaljkart { filter: invert(1) sepia(.55) saturate(.6) brightness(.8) contrast(1.1); }
.leaflet-control-attribution { background: rgba(20, 17, 14, .8) !important; color: var(--svak) !important; }
.leaflet-control-attribution a { color: var(--tekst) !important; }
.leaflet-bar a { background: var(--flate-2); color: var(--tekst); border-color: var(--kant); }
.leaflet-bar a:hover { background: var(--kant); color: var(--tekst); }

/* Symbolene for nøyaktighet, brukt både på kartet og i tegnforklaringen */
.symbol { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; }
.symbol[data-noyaktighet="funnsted"] { background: var(--uthev); box-shadow: 0 0 0 2px #14110e, 0 0 8px var(--uthev); }
.symbol[data-noyaktighet="gard"] { border: 2px solid var(--uthev); background: radial-gradient(var(--uthev) 0 3px, transparent 3.5px); }
.symbol[data-noyaktighet="omrade"] { border: 2px dashed var(--uthev); }
.symbol[data-noyaktighet="eldst"] { border: 1.5px dotted var(--uthev); background: radial-gradient(var(--uthev) 0 4px, transparent 4.5px); }
.symbol[data-noyaktighet="register"] { border: 1.5px solid var(--uthev); background: radial-gradient(var(--uthev) 0 4px, transparent 4.5px); }
.symbol[data-noyaktighet="punkt"] { background: radial-gradient(var(--uthev) 0 4.5px, transparent 5px); }
.markor { background: none; border: none; display: flex; align-items: center; justify-content: center; }
.markor .symbol { width: 18px; height: 18px; transition: transform .15s; }
.markor.valgt .symbol { transform: scale(1.5); }
.markor.ukontrollert .symbol { opacity: .85; }

.tegnforklaring .symbol { margin-right: 6px; }
/* Periodene: funn fra vikingtiden får egen farge */
.periode-vikingtid { --uthev: var(--vikingtid); }
.periode-middelalder { --uthev: var(--middelalder); }
.periode-register { --uthev: var(--register); }
[data-periode="register"] .periodemerke, .funnvalg .periode-register.periodemerke { background: var(--register); box-shadow: 0 0 6px var(--register); }
.registerfunn { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--register); border-radius: 8px; }
.registerfunn p { margin: 0 0 4px; }
.panel blockquote.sitat { margin: 0 0 6px; padding: 10px 14px; border-left: 3px solid var(--uthev); background: var(--flate-2, rgba(255,255,255,.04)); border-radius: 0 8px 8px 0; font-family: var(--skrift); }
.periodevalg { display: grid; gap: 4px; }
.periodevalg button {
  display: flex; align-items: center; gap: 6px; font: inherit; color: var(--tekst); text-align: left;
  background: none; border: 0; padding: 3px 2px; cursor: pointer; border-radius: 6px;
}
.periodevalg button .liten { color: var(--svak); }
.periodevalg button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.periodevalg button:focus-visible { outline: 2px solid var(--uthev); }
.periodemerke { width: 12px; height: 12px; border-radius: 3px; background: var(--rav); box-shadow: 0 0 6px var(--rav); }
[data-periode="vikingtid"] .periodemerke { background: var(--vikingtid); box-shadow: 0 0 6px var(--vikingtid); }
[data-periode="middelalder"] .periodemerke, .funnvalg .periode-middelalder.periodemerke { background: var(--middelalder); box-shadow: 0 0 6px var(--middelalder); }

/* Panelet for et funn */
.panel {
  position: fixed; z-index: 1100; overflow-y: auto;
  top: 72px; right: 12px; bottom: 28px; width: min(400px, calc(100vw - 24px));
  padding: 20px 20px 24px;
  background: var(--flate); border: 1px solid var(--kant); border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.panel[hidden] { display: none; }
.lukk {
  position: sticky; top: 0; float: right; margin: -8px -8px 0 8px;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 1.4rem; line-height: 1; color: var(--tekst);
  background: var(--flate-2); border: 1px solid var(--kant); cursor: pointer;
}
.overlinje { margin: 0; color: var(--svak); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.panel h2 { margin: 4px 0 14px; font: 600 1.5rem/1.15 var(--skrift); }
.panel h3 { margin: 22px 0 8px; font-size: .78rem; color: var(--svak); text-transform: uppercase; letter-spacing: .08em; }
.panel p { margin: 0 0 8px; line-height: 1.5; }
.panel a { color: var(--uthev); }
.innskrift {
  margin: 0 0 6px; padding: 12px 14px; border-left: 3px solid var(--uthev);
  background: var(--flate-2); border-radius: 0 8px 8px 0;
  font: 1.05rem/1.6 var(--skrift); letter-spacing: .03em; white-space: pre-wrap; overflow-wrap: anywhere;
}
.del { display: block; font: .72rem var(--system); color: var(--svak); letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; }
.del:first-child { margin-top: 0; }
.oversettelse { font-family: var(--skrift); font-size: 1.02rem; }
.liten { font-size: .82rem; color: var(--svak); }
details.liten summary { cursor: pointer; }
details.liten dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0 0; }
details.liten dt { font-family: var(--skrift); color: var(--tekst); }
details.liten dd { margin: 0; }
.plassering { padding: 12px 14px; background: var(--flate-2); border-radius: 8px; }
.plassering p:last-child { margin-bottom: 0; }
.ukontrollert-merke {
  display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--kant); color: var(--svak); font-size: .75rem;
}
.fakta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: .9rem; }
.fakta dt { color: var(--svak); }
.fakta dd { margin: 0; }

/* Mobil: panelet blir et ark nedenfra */
@media (max-width: 640px) {
  .topp { gap: 8px; }
  .tittel h1 { font-size: 1.1rem; }
  .panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62vh; border-radius: 14px 14px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* Hovedvalg i topplinja */
.hovedvalg { display: flex; gap: 8px; }
.hovedvalg a {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap;
  font: 600 .95rem/1 var(--skrift); letter-spacing: .05em; padding: 9px 16px;
  transition: filter .15s, transform .15s;
}
.hovedvalg a:hover { filter: brightness(1.12); }
.hovedvalg a:active { transform: translateY(1px); }
.hovedvalg a:focus-visible { outline: 2px solid var(--uthev); outline-offset: 2px; }
/* Granitt: lys grå steinheller med innhugget tekst; valgt side ser nedtrykt ut og glør ravgult */
.hovedvalg a {
  color: #2a2622;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23s)'/%3E%3C/svg%3E"),
    linear-gradient(165deg, #9a948a, #6c665d 60%, #57524b);
  background-blend-mode: overlay, normal;
  border-radius: 6px 9px 5px 8px / 8px 5px 9px 6px;
  text-shadow: 0 1px 0 rgba(255,255,255,.28), 0 -1px 0 rgba(0,0,0,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.3), inset 2px 0 0 rgba(255,255,255,.08), 0 3px 6px rgba(0,0,0,.65);
}
.hovedvalg a[aria-current] {
  color: #ffcf7a; filter: brightness(.82);
  text-shadow: 0 0 8px rgba(242,169,59,.85), 0 -1px 0 rgba(0,0,0,.7);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.6);
}
body.visning-apen .kartvalg { display: none; }

/* Laget over kartet for spillet og futharken */
.visning {
  position: fixed; inset: 0; z-index: 950; overflow-y: auto;
  padding: calc(84px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at top, rgba(42, 36, 29, .97), rgba(16, 20, 24, .98));
}
.visning[hidden] { display: none; }
.visning-innhold { max-width: 760px; margin: 0 auto; }
.spill-topp { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.spill-topp h2, .visning h2 { margin: 0; font: 600 1.6rem/1.2 var(--skrift); }
.ingress { color: var(--svak); line-height: 1.5; max-width: 60ch; }
.framdrift { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.framdrift li { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--kant); }
.framdrift li.naa { border-color: var(--tekst); }
.framdrift li.riktig { background: var(--uthev); border-color: var(--uthev); }
.framdrift li.feil { background: var(--kant); border-color: var(--svak); }

/* Runebrikkene: mørk eik med runen risset inn. Gløden (vår design) viser mestring, én farge per ætt. */
.brikke {
  --glod: var(--rav);
  position: relative; display: block; overflow: hidden;
  width: 84px; aspect-ratio: 1; padding: 0;
  border-radius: 12px; border: 1px solid #3d2e20;
  background:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 13px),
    linear-gradient(160deg, #4a3624, #2b1e13 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -3px 8px rgba(0, 0, 0, .45), 0 3px 10px rgba(0, 0, 0, .4);
  color: #140d07;
}
.brikke[data-glod="is"] { --glod: var(--is); }
.brikke[data-glod="staal"] { --glod: var(--staal); }
.brikke .rune { position: absolute; inset: 12%; width: 76%; height: 76%; overflow: visible; }
.brikke .rune path { fill: currentColor; stroke: rgba(255, 220, 170, .14); stroke-width: 1.2; }
.brikke[data-status="mestret"] { color: var(--glod); }
.brikke[data-status="mestret"] .rune { filter: drop-shadow(0 0 3px var(--glod)) drop-shadow(0 0 9px var(--glod)); }
.brikke[data-status="mestret"] .rune path { stroke: none; }
.brikke[data-status="paa-vei"] { color: #0e0904; }
.brikke[data-status="paa-vei"]::after { content: ''; position: absolute; inset: auto 30% 7px; height: 3px; border-radius: 3px; background: var(--glod); opacity: .45; }
.brikke.stor { width: min(180px, 42vw); margin: 0 auto; }
.brikke.liten { width: 52px; border-radius: 8px; }
.brikke.lyd { display: grid; place-items: center; }
.brikke.lyd span { font: 600 4.2rem/1 var(--skrift); color: var(--tekst); }

/* Oppgaven */
.oppgave { text-align: center; }
.sporsmal { margin: 16px 0 18px; font-size: 1.1rem; }
.valgene { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 520px; margin: 0 auto; }
.valg { font: inherit; color: var(--tekst); cursor: pointer; transition: transform .1s, border-color .15s, opacity .15s; }
.valgene.lyd .valg { padding: 18px 0; background: var(--flate-2); border: 1px solid var(--kant); border-radius: 12px; }
.valgene.rune .valg { width: 100%; color: #140d07; }
.lydvalg { font: 600 2.2rem/1 var(--skrift); }
.valg:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--svak); }
.valg:focus-visible { outline: 2px solid var(--uthev); outline-offset: 3px; }
.valg.feil { opacity: .35; animation: rist .35s; }
.valg.riktig { border-color: var(--uthev) !important; box-shadow: 0 0 0 2px var(--uthev), 0 0 18px rgba(242, 169, 59, .35); }
.valgene.rune .valg.riktig { color: var(--glod); }
.valg:disabled { cursor: default; }
@keyframes rist { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .valg.feil { animation: none; } }
.tilbakemelding { min-height: 110px; margin: 22px auto 0; max-width: 520px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.fasit { display: inline-flex; align-items: center; gap: 10px; font: 1.3rem var(--skrift); }
.fasit .rune { width: 28px; height: 34px; fill: var(--tekst); }

.knapper { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.knapp {
  display: inline-block; font: 600 .95rem var(--system); text-decoration: none; cursor: pointer;
  color: #1b1209; background: var(--uthev); border: 1px solid var(--uthev); border-radius: 10px; padding: 10px 18px;
}
.knapp.sekundar { color: var(--tekst); background: transparent; border-color: var(--kant); }
.knapp:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }
.resultat { font-size: 1.2rem; }
.ovde { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

/* Futharken din */
.aett { margin-top: 22px; }
.aett h3 { margin: 0 0 10px; font: 600 1.1rem var(--skrift); }
.aett.laast { opacity: .55; }
.aett-rad { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.aett-rad .brikke { width: 100%; cursor: pointer; font: inherit; }
.aett-rad .brikke .rune { inset: 10% 14% 24%; width: 72%; height: 66%; }
.aett-rad .brikke.valgt { outline: 2px solid var(--tekst); outline-offset: 2px; }
.lydmerke { position: absolute; bottom: 5%; left: 0; right: 0; text-align: center; font: .8rem var(--skrift); color: var(--svak); }
.runeinfo:not(:empty) { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin-top: 22px; padding: 16px; background: var(--flate); border: 1px solid var(--kant); border-radius: 14px; }
.runeinfo .brikke.stor { width: 120px; margin: 0; }
.runeinfo h3 { margin: 0 0 6px; font: 600 1.6rem var(--skrift); }
.innebygd .rune { width: 1em; height: 1.2em; vertical-align: -0.2em; fill: currentColor; }
.kilde { margin-top: 18px; }

@media (max-width: 640px) {
  .hovedvalg { order: 2; width: 100%; justify-content: space-between; }
  .hovedvalg a { flex: 1; padding: 9px 4px; font-size: .88rem; }
  .visning { padding-top: calc(118px + env(safe-area-inset-top)); }
  body:not(.visning-apen) .visning { display: none; }
  .valgene { gap: 8px; }
  .aett-rad { grid-template-columns: repeat(4, 1fr); }
  .runeinfo:not(:empty) { grid-template-columns: 1fr; }
}

/* Korte navn i hovedvalget på smale skjermer */
.hovedvalg .kort { display: none; }
@media (max-width: 640px) {
  .hovedvalg .lang { display: none; }
  .hovedvalg .kort { display: inline; }
}

/* Lær runene */
.ingress p { margin: 0 0 10px; }
.leksjoner { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.leksjon a {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 14px 16px; height: 100%;
  color: var(--tekst); text-decoration: none; background: var(--flate); border: 1px solid var(--kant); border-radius: 12px;
}
.leksjon a:hover, .leksjon a:focus-visible { border-color: var(--svak); outline: none; }
.leksjon.neste a { border-color: var(--uthev); }
.leksjon-nr { font: 600 1rem var(--skrift); }
.leksjon-aett { grid-column: 1; font-size: .8rem; color: var(--svak); }
.leksjon-status { grid-column: 2; grid-row: 1; font-size: .78rem; color: var(--uthev); }
.leksjon.ferdig .leksjon-status { color: var(--svak); }
.stor-rad { grid-column: 1 / -1; font-size: 1.6rem; margin-top: 6px; }
.runerad { display: inline-flex; gap: .3em; }
.lenkeknapp { font: inherit; color: var(--uthev); background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer; }
.hopp { margin-top: 22px; }

.presentasjon { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; margin: 8px 0 6px; }
.presentasjon .brikke.stor { margin: 0; }
.storlyd { font-size: 1.25rem; margin: 0 0 10px; }
.presentasjon-tekst p { line-height: 1.5; }
.eksempel { margin-top: 22px; padding: 16px; background: var(--flate); border: 1px solid var(--kant); border-radius: 14px; }
.eksempel h3 { margin: 0 0 10px; font-size: .78rem; color: var(--svak); text-transform: uppercase; letter-spacing: .08em; }
.eksempel-runer { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 2.2rem; color: var(--svak); }
.eksempel-ord { display: inline-flex; gap: .12em; }
.eksempel-runer .rune { width: .62em; height: 1.1em; fill: currentColor; }
.eksempel-runer .uthevet { color: var(--uthev); }
.eksempel-runer .uthevet .rune { filter: drop-shadow(0 0 4px var(--uthev)); }
.eksempel-translit { font: 1.1rem var(--skrift); letter-spacing: .05em; margin: 8px 0 4px; color: var(--svak); }
.eksempel-translit strong { color: var(--uthev); }

/* Runen risses inn: omrisset tegnes, så fylles runen */
.rune.riss path { stroke: var(--glod); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
  animation: riss 1.6s ease-out forwards, fyll .6s 1.4s ease-in forwards; }
@keyframes riss { to { stroke-dashoffset: 0; } }
@keyframes fyll { to { fill-opacity: 1; stroke: rgba(255, 220, 170, .14); } }
@media (prefers-reduced-motion: reduce) { .rune.riss path { animation: none; stroke-dashoffset: 0; fill-opacity: 1; } }

@media (max-width: 640px) {
  .presentasjon { grid-template-columns: 1fr; text-align: center; }
  .presentasjon .brikke.stor { margin: 0 auto; }
  .eksempel-runer { font-size: 1.8rem; }
}
.visning a:not(.knapp):not(.leksjon a) { color: var(--uthev); }

/* Lydknappene */
.lydknapp {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .9rem; cursor: pointer;
  color: var(--tekst); background: var(--flate-2); border: 1px solid var(--kant); border-radius: 999px; padding: 6px 14px;
}
.lydknapp:hover { border-color: var(--svak); }
.lydknapp:focus-visible { outline: 2px solid var(--uthev); outline-offset: 2px; }
.lydknapp .ipa { font-family: var(--skrift); color: var(--svak); }
.oppgave .lydknapp { margin-top: -6px; }

/* Malte brikker (verktoy/lag-brikker.py): bildet viser rillen; SVG-runen brukes bare til gløden.
   Runen ligger på samme sted i bildet som i SVG-en (12 %–88 %). */
.brikke.malt { background: var(--bilde) center / cover, #2b1e13; border-color: #2a1d12; }
.brikke.malt .rune path { fill: transparent; stroke: none; }
.brikke.malt[data-status="mestret"] .rune path, .valgene.rune .valg.malt.riktig .rune path { fill: var(--glod); }
.brikke.malt[data-status="mestret"] .rune { filter: drop-shadow(0 0 4px var(--glod)) drop-shadow(0 0 12px var(--glod)); opacity: .9; }
.aett-rad .brikke.malt .rune { inset: 12%; width: 76%; height: 76%; }
.aett-rad .brikke.malt .lydmerke { bottom: 2%; color: #d8c8b0; text-shadow: 0 1px 2px #000; }
.brikke.malt .rune.riss path { fill: transparent !important; stroke: transparent; animation: none; }

/* Runerekka */
.teller { color: var(--svak); }
.rekke { display: grid; gap: 10px; }
.rekke-rad { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; align-items: center; }
.rad-navn { grid-column: 1 / -1; font: 600 .95rem var(--skrift); color: var(--svak); margin-top: 6px; }
.rute { position: relative; aspect-ratio: 1; border: 1.5px dashed var(--kant); border-radius: 12px; background: rgba(0, 0, 0, .18); }
.rute.fylt { border-style: solid; border-color: transparent; background: none; }
.rute .brikke { width: 100%; position: absolute; inset: 0; }
.plassnr { position: absolute; top: 6px; left: 8px; font-size: .75rem; color: var(--svak); }
.rute.fylt .plassnr { display: none; }
.brikkebunke { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .2); }
.brikke.trekk { width: 74px; cursor: grab; touch-action: none; user-select: none; font: inherit; }
.brikke.trekk .lydmerke { display: none; }
.rute .brikke.trekk .lydmerke { display: block; }
.brikke.drar { cursor: grabbing; z-index: 50; pointer-events: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.brikke.rister { animation: rist .35s; }
.brikke.plassert { cursor: default; }
.leksjon.laast a { opacity: .5; cursor: default; }
@media (max-width: 640px) {
  .rekke-rad { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .brikke.trekk { width: 62px; }
}
.rute .brikke.trekk { width: 100%; height: 100%; }

/* Tyd steinen */
.innskriftflate { display: grid; gap: 14px; padding: 18px; border-radius: 14px; background: linear-gradient(160deg, #4b4a46, #2c2b28); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5); }
.tydrad { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 2px; }
.enhet { display: inline-grid; justify-items: center; min-width: 30px; font: inherit; color: #16120e; }
.tydrune { position: relative; padding: 2px 1px 0; background: none; border: none; border-radius: 6px; cursor: pointer; }
.tydrune .rune { width: 30px; height: 46px; fill: #16120e; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .18)); }
.tydrune.skadet .rune { opacity: .55; }
.tydrune.skadet .rune path { stroke: #16120e; stroke-dasharray: 2 2; stroke-width: 1; }
.tydrune.binde::after { content: ''; position: absolute; left: 50%; right: -50%; bottom: 28px; height: 2px; background: var(--uthev); opacity: .7; }
.tydlyd { display: block; min-width: 26px; height: 26px; margin-top: 4px; border-bottom: 2px solid rgba(255, 255, 255, .35);
  font: 600 1.05rem/26px var(--skrift); color: var(--tekst); text-align: center; }
.tydrune.aktiv .tydlyd { border-color: var(--uthev); background: rgba(242, 169, 59, .18); }
.tydrune.gitt .tydlyd { color: #b9ad9a; font-weight: 400; }
.tydrune.fylt { cursor: default; }
.tydrune:focus-visible { outline: 2px solid var(--uthev); }
.enhet.ukjent, .enhet.tapt { font: 1.4rem var(--skrift); color: #cfc6b8; padding-bottom: 32px; }
.enhet.skille { font-size: 1.6rem; color: #16120e; padding-bottom: 32px; min-width: 12px; }
.lydtastatur { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.lydtast { min-width: 48px; padding: 10px 0; font: 600 1.4rem var(--skrift); color: var(--tekst); background: var(--flate-2); border: 1px solid var(--kant); border-radius: 10px; cursor: pointer; }
.lydtast:hover { border-color: var(--svak); }
.lydtast.rister { animation: rist .35s; border-color: #a0453a; }
.tydet { margin-top: 18px; padding: 16px; background: var(--flate); border: 1px solid var(--kant); border-radius: 14px; }
.tydet h3 { margin: 16px 0 6px; font-size: .78rem; color: var(--svak); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 640px) { .tydrune .rune { width: 24px; height: 38px; } .enhet { min-width: 24px; } }
.markor.tydet .symbol, .tydet-symbol { outline: 2px solid var(--tekst); outline-offset: 3px; }
.tegnforklaring .tydet-forklaring { display: none; }
body.har-tydet .tegnforklaring .tydet-forklaring { display: block; }
.panel a.knapp { color: #1b1209; text-decoration: none; }

/* Bilder i funnpanelet */
.funnbilde { margin: 0 0 6px; }
.funnbilde img { display: block; width: 100%; max-height: 300px; object-fit: cover; border-radius: 10px; background: var(--flate-2); }
.funnbilde figcaption { margin-top: 6px; }
.smaabilder { display: flex; gap: 6px; margin-top: 8px; }
.smaabilder button { padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; }
.smaabilder button[aria-current] { border-color: var(--uthev); }
.smaabilder img { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; max-height: none; }

/* Hva betyr det? */
.ordliste { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 10px 0; padding: 10px 12px; background: var(--flate-2); border-radius: 8px; font-size: .92rem; }
.ordliste dt { font-family: var(--skrift); color: var(--uthev); }
.ordliste dd { margin: 0; }

/* Kartvalg: periode, type funn, tegnforklaring og «Om kildene» samlet under én knapp.
   Åpnes når musa holdes over (der det finnes mus) eller ved trykk. */
.kartvalg { position: relative; margin-left: auto; }
.kartvalg-knapp {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: 600 .9rem/1 var(--skrift); letter-spacing: .04em; color: var(--tekst);
  background: var(--flate-2); border: 1px solid var(--kant); border-radius: 8px; padding: 9px 13px;
}
.kartvalg-knapp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.kartvalg-knapp:focus-visible, .om-lenke:focus-visible { outline: 2px solid var(--uthev); outline-offset: 2px; }
.kartvalg.apen .kartvalg-knapp { border-color: var(--uthev); color: var(--uthev); }
.kartvalg-panel {
  display: none; position: absolute; right: 0; top: 100%; z-index: 1200;
  width: min(300px, calc(100vw - 32px)); margin-top: 8px; padding: 6px 16px 14px;
  max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain;
  background: rgba(27, 23, 19, .97); border: 1px solid var(--kant); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55); font-size: .85rem;
}
/* Usynlig bro over mellomrommet, så panelet ikke lukkes når musa flyttes ned */
.kartvalg-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.kartvalg.apen .kartvalg-panel { display: block; }
@media (hover: hover) { .kartvalg:hover .kartvalg-panel { display: block; } }
.kartvalg-panel h3 { margin: 12px 0 6px; font: 600 .72rem var(--system); letter-spacing: .08em; text-transform: uppercase; color: var(--svak); }
.kartvalg-panel .tegnforklaring { display: grid; gap: 6px; color: var(--svak); }
.kartvalg-panel .antall { margin: 8px 0 0; color: var(--svak); }
.om-lenke { display: inline-block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--kant); width: 100%; color: var(--tekst); text-decoration: none; }
.om-lenke:hover { color: var(--uthev); }
@media (max-width: 640px) {
  .kartvalg-knapp span { display: none; }
  .kartvalg-knapp { padding: 9px; }
}
.utviklet { margin-top: 32px; color: var(--svak); }
.utviklet a { color: var(--svak); }
.om-side h3 { margin-top: 28px; font: 600 1.15rem var(--skrift); }
.om-side p, .om-side li, .om-side dd { line-height: 1.55; }
.om-liste dt { margin-top: 12px; font-weight: 600; }
.om-liste dd { margin: 2px 0 0; color: var(--svak); }
.om-symbol { margin: 4px 0; }

/* To områder: kartet (hovedsiden) og «Lær runene». Hvert område har sin tittel og meny. */
.tittel h1 a { color: inherit; text-decoration: none; }
.undertittel a { color: var(--svak); text-decoration: none; }
.undertittel a:hover { color: var(--tekst); }
.laer-tittel, .laer-meny { display: none; }
body.laer-omraade .laer-tittel { display: block; }
body.laer-omraade .laer-meny { display: flex; }
body.laer-omraade .kart-tittel, body.laer-omraade .kart-meny { display: none; }
/* Knappen videre til opplæringen skiller seg ut med ravgul innhugget tekst */
.hovedvalg a.til-laer { color: #5a3a0c; text-shadow: 0 1px 0 rgba(255, 220, 160, .35), 0 -1px 0 rgba(0, 0, 0, .5); }
.hovedvalg a.til-laer:hover { color: #3d2606; }
@media (max-width: 640px) {
  .kart-meny { order: 0; width: auto; margin-left: auto; }
  .kart-meny a { flex: none; padding: 9px 12px; }
}
.kortkvist .innebygd .rune { width: 1.4em; height: 1.7em; vertical-align: -0.45em; }
.rekkevalg { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 18px; background: var(--flate-2); border: 1px solid var(--kant); border-radius: 999px; }
.rekkevalg button { font: inherit; font-size: .88rem; color: var(--svak); background: none; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.rekkevalg button[aria-pressed="true"] { background: var(--kant); color: var(--tekst); }
.rekkevalg button .liten { color: var(--svak); font-size: .75rem; }
.rekkevalg button:focus-visible { outline: 2px solid var(--uthev); }
/* Språkvalg (NO/EN) i toppen */
.sprakvalg { display: flex; gap: 2px; padding: 2px; background: var(--flate-2); border: 1px solid var(--kant); border-radius: 8px; }
.sprakvalg button {
  font: 600 .75rem/1 var(--system); letter-spacing: .05em; color: var(--svak);
  background: none; border: 0; border-radius: 6px; padding: 7px 8px; cursor: pointer;
}
.sprakvalg button[aria-pressed="true"] { background: var(--kant); color: var(--tekst); }
.sprakvalg button:focus-visible { outline: 2px solid var(--uthev); outline-offset: 1px; }
body:not(.visning-apen) .sprakvalg, body.laer-omraade .sprakvalg { margin-left: 8px; }
body.laer-omraade .sprakvalg, body.visning-apen .sprakvalg { margin-left: auto; }
@media (max-width: 640px) { .rekkevalg .liten { display: none; } }

/* Mobil: knappene i leksjonen ligger fast nederst, så «Neste rune» alltid er synlig sammen med runen */
@media (max-width: 640px) {
  .fast-knapper {
    position: sticky; bottom: 0; z-index: 5; margin: 12px -16px 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(16, 20, 24, 0), rgba(16, 20, 24, .97) 30%); flex-wrap: nowrap;
  }
  .fast-knapper .knapp { flex: 1; text-align: center; justify-content: center; }
  .presentasjon .brikke.stor { width: min(140px, 36vw); }
  .presentasjon { gap: 12px; }
}
/* Liste når flere funn ligger på samme sted */
.funnvalg .leaflet-popup-content-wrapper, .funnvalg .leaflet-popup-tip { background: var(--flate); color: var(--tekst); border: 1px solid var(--kant); }
.funnvalg .leaflet-popup-content { margin: 10px 12px; font: .9rem/1.3 var(--system); }
.funnvalg p { margin: 0 0 6px; color: var(--svak); }
.funnvalg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 40vh; overflow-y: auto; }
.funnvalg a { display: flex; align-items: baseline; gap: 6px; padding: 8px 6px; border-radius: 6px; color: var(--tekst); text-decoration: none; }
.funnvalg a:hover, .funnvalg a:focus-visible { background: var(--flate-2); }
.funnvalg a .liten { color: var(--svak); }
.funnvalg .periodemerke { flex: none; width: 10px; height: 10px; }
.funnvalg .periode-vikingtid.periodemerke { background: var(--vikingtid); box-shadow: 0 0 6px var(--vikingtid); }

/* Liste over mange funn på samme sted (Bryggen) */
.stedssok { width: 100%; margin: 4px 0 10px; padding: 9px 12px; font: inherit; color: var(--tekst); background: var(--flate-2); border: 1px solid var(--kant); border-radius: 8px; }
.stedssok:focus-visible { outline: 2px solid var(--uthev); }
.stedsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.stedsliste a { display: block; padding: 8px 6px; border-radius: 6px; color: var(--tekst); text-decoration: none; }
.stedsliste a:hover, .stedsliste a:focus-visible { background: var(--flate-2); }
.stedsliste .liten { color: var(--svak); }
.stedsliste-tekst { display: block; margin-top: 2px; font-style: italic; }
.sammen { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.sammen .liten { color: var(--svak); }
/* Mobil: språkvalget ved siden av tittelen, menyen og kartvalget på raden under */
@media (max-width: 640px) {
  .topp .tittel { order: 0; }
  .topp .sprakvalg { order: 1; margin-left: auto; }
  .topp .hovedvalg { order: 2; }
  .topp .kart-meny { margin-left: 0; flex: 1; justify-content: flex-start; }
  .topp .kartvalg { order: 3; margin-left: 8px; }
}

/* Museene på kartet: en rund «stein» med antall funn */
.museumsmarkor { background: none; border: none; display: flex; align-items: center; justify-content: center; }
.museumsmarkor span {
  display: flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 7px;
  font: 600 .75rem/1 var(--system); color: #1b1209; background: #e8dfcf; border: 2px solid #14110e; box-shadow: 0 0 0 2px #e8dfcf66;
}
.museumsvalg {
  display: flex; align-items: center; gap: 8px; font: inherit; color: var(--tekst); background: none; border: 0; padding: 3px 2px; cursor: pointer;
}
.museumsvalg[aria-pressed="false"] { opacity: .6; }
.museumsvalg:focus-visible { outline: 2px solid var(--uthev); }
.museumsmerke { width: 12px; height: 12px; border-radius: 3px; background: #e8dfcf; border: 1px solid #14110e; }

/* Stedsnavn (Natural Earth) utenfor Kartverkets detaljkart */
.stedsnavn { background: none; border: none; white-space: nowrap; }
.stedsnavn span {
  display: inline-block; transform: translate(-50%, -50%); font: 500 .72rem/1 var(--system); letter-spacing: .02em;
  color: #cfc3ae; text-shadow: 0 0 3px #14110e, 0 0 6px #14110e, 0 0 2px #14110e;
}
.stedsnavn span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 4px; border-radius: 50%; background: #cfc3ae; vertical-align: 1px; }
.litteratur { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.litteratur .liten { color: var(--svak); }

/* Søk og filter i kartvalget */
.funnsok { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--kant); background: var(--flate-2); color: var(--tekst); font: inherit; }
.funnsok:focus-visible, .stilfilter:focus-visible { outline: 2px solid var(--uthev); outline-offset: 1px; }
.ekstravalg { margin-top: 8px; }
.stilvalg { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--svak); }
.stilfilter { padding: 4px 6px; border-radius: 6px; border: 1px solid var(--kant); background: var(--flate-2); color: var(--tekst); font: inherit; }
.treffliste { margin: 4px 0 0; }
.kunnskap sup { font-size: .7em; color: var(--svak); }
.kunnskap .kilder { padding-left: 20px; }

/* Skriv med runer */
.skriv-ord { font: 600 1.8rem var(--skrift); margin: 6px 0; }
.skriv-svar { min-height: 64px; margin: 14px 0; align-content: center; }
.skriv-tastatur { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0; }
.skrivtast { display: grid; justify-items: center; gap: 2px; width: 46px; padding: 6px 2px; border-radius: 8px; border: 1px solid var(--kant); background: var(--flate-2); color: var(--tekst); cursor: pointer; font: inherit; }
.skrivtast .rune { width: 22px; height: 34px; fill: var(--tekst); }
.skrivtast span { font-size: .8rem; color: var(--svak); }
.skrivtast:hover, .skrivtast:focus-visible { border-color: var(--uthev); }
.skriv-forklaring { text-align: left; margin: 6px 0; }
.skriv-regler { margin-top: 18px; }
.navnefelt { max-width: 420px; }
.navn-runer { min-height: 64px; align-content: center; margin: 10px 0; }
.navn-merke { display: inline-block; }

/* Kontroll av bilder (#kontroll) */
.kontroll-liste { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 14px; }
.kontroll-kort { display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding: 12px; border: 1px solid var(--kant); border-radius: 12px; background: var(--flate-2); }
.kontroll-kort img { width: 100%; max-height: 200px; object-fit: contain; border-radius: 8px; background: #000; }
.kontroll-kort[data-svar="riktig"] { border-color: #6fbf73; }
.kontroll-kort[data-svar="feil"] { border-color: #d9534f; opacity: .7; }
.kontroll-svar { display: flex; gap: 8px; margin-top: 8px; }
@media (max-width: 640px) { .kontroll-kort { grid-template-columns: 1fr; } }

/* Grupper av funn på de ytterste zoomnivåene (tegnKart i app.js): ring med andelen fra hver periode, tallet i midten */
.gruppe { background: none; border: none; display: flex; align-items: center; justify-content: center; }
.gruppe span {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 0 0 1.5px #14110e, 0 2px 6px rgba(0, 0, 0, .5); cursor: pointer;
}
.gruppe b {
  display: flex; align-items: center; justify-content: center; width: calc(100% - 9px); height: calc(100% - 9px); border-radius: 50%;
  font: 700 .76rem/1 var(--system); color: var(--tekst); background: #1d1915;
}
.gruppe:hover b, .gruppe:focus-visible b { background: #2c2620; }
.gruppe:focus-visible span { outline: 2px solid var(--tekst); outline-offset: 2px; }