/* Begrepskort – stilark. Bare tokens fra /skall/stiglet.css: ink, krem, korall, gul og fagfargene. */
:root {
  --bk-ink: var(--ink, #2b2118);
  --bk-krem: var(--cream, #fff9f0);
  --bk-korall: var(--coral, #fa5c66);
  --bk-gul: var(--yellow, #facc15);
  --bk-skygge: 0 4px 0 var(--bk-ink);
  --bk-flip: 550ms;
  --bk-bytte: 320ms;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bk-krem); color: var(--bk-ink); font-family: "Nunito", sans-serif; font-weight: 600; }
[hidden] { display: none !important; }

/* Fagfarger: matte blå, naturfag grønn, norsk/engelsk korall, samfunnsfag/KRLE/historie oransje, annet lilla */
[data-fag="matte"] { --fagfarge: var(--blue, #60a5fa); }
[data-fag="naturfag"] { --fagfarge: var(--green, #4ade80); }
[data-fag="norsk"], [data-fag="engelsk"], [data-fag="spansk"] { --fagfarge: var(--coral, #fa5c66); }
[data-fag="samfunnsfag"], [data-fag="krle"], [data-fag="historie"] { --fagfarge: var(--orange, #fb923c); }
[data-fag="annet"], [data-fag="egen"] { --fagfarge: var(--purple, #a78bfa); }

/* ---------- Felles: knapper og chips ---------- */
.bk-knapp {
  font: 800 1.15rem/1.1 "Nunito", sans-serif; color: var(--bk-krem); background: var(--bk-korall);
  border: 3px solid var(--bk-ink); border-radius: 12px; padding: 0.7rem 1.4rem; box-shadow: var(--bk-skygge);
  cursor: pointer; transition: transform 80ms, box-shadow 80ms;
}
.bk-knapp--hvit { background: #fff; color: var(--bk-ink); }
.bk-knapp--stor { font-size: 1.5rem; padding: 0.9rem 2.2rem; }
.bk-knapp:active { transform: translateY(4px); box-shadow: none; }
.bk-knapp:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: var(--bk-skygge); }
.bk-knapp:focus-visible, .bk-chip:focus-visible, .bk-tema-knapp:focus-visible, .bk-kort:focus-visible, .bk-rkort:focus-visible,
.bk-hjorne button:focus-visible, .bk-gris:focus-visible, input:focus-visible, textarea:focus-visible { outline: 4px solid var(--bk-gul); outline-offset: 3px; }

.bk-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bk-chip {
  font: 800 1rem/1 "Nunito", sans-serif; color: var(--bk-ink); background: #fff; border: 3px solid var(--bk-ink);
  border-radius: 999px; padding: 0.5rem 1rem; cursor: pointer;
}
.bk-chip[aria-pressed="true"] { background: var(--bk-gul); }
.bk-chip:disabled { opacity: 0.4; cursor: default; }

/* ---------- Skjerm 1: Oppsett ---------- */
.bk-oppsett { max-width: 1680px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.bk-tittel { font: 400 3rem/1.05 "Chewy", cursive; margin: 0.25rem 0 0.25rem; }
.bk-undertittel { font-size: 1.2rem; margin: 0 0 1.25rem; }
#fagfilter { margin-bottom: 1rem; }
.bk-temagrid { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.85rem; }
.bk-laster { font-size: 1.1rem; }
.bk-tema-knapp {
  width: 100%; height: 100%; display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; cursor: pointer;
  background: #fff; color: var(--bk-ink); border: 3px solid var(--bk-ink); border-radius: 20px; box-shadow: var(--bk-skygge); font: inherit;
}
.bk-tema-knapp[aria-pressed="true"] { outline: 5px solid var(--bk-gul); outline-offset: 0; }
.bk-tema-topp { position: relative; background: var(--fagfarge); border-bottom: 3px solid var(--bk-ink); padding: 0.7rem 0.9rem 0.8rem; min-height: 5.2rem; display: flex; align-items: flex-end; }
.bk-tema-topp h2 { font: 400 1.65rem/1.05 "Chewy", cursive; margin: 0; }
/* Temaets motiv (filtlapp) øverst til høyre i fargefeltet; tittelen holder seg til venstre for det */
.bk-tema-topp.har-ikon { padding-right: 6.4rem; }
.bk-tema-ikon { position: absolute; right: 0.7rem; top: 50%; width: 5rem; height: 5rem; transform: translateY(-50%) rotate(3deg); border: 3px solid var(--bk-ink); border-radius: 16px; box-shadow: 0 3px 0 var(--bk-ink); background: var(--bk-krem, #fff9f0); transition: transform 150ms; }
.bk-tema-knapp:hover .bk-tema-ikon { transform: translateY(-50%) rotate(-2deg); }
.bk-tema-li { container-type: inline-size; }
@container (max-width: 270px) {
  .bk-tema-topp.har-ikon { padding-right: 5.3rem; }
  .bk-tema-ikon { width: 4.1rem; height: 4.1rem; right: 0.6rem; }
  .bk-tema-topp.har-ikon h2 { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .bk-tema-ikon { transition: none; } }
.bk-tema-bunn { padding: 0.7rem 1rem 0.8rem; font-weight: 800; font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.bk-etikett-liten { font: 800 0.75rem/1 "Nunito", sans-serif; text-transform: uppercase; letter-spacing: 0.04em; border: 2px solid var(--bk-ink); border-radius: 999px; padding: 0.2rem 0.5rem; background: var(--bk-gul); }
.bk-etikett-liten--hvit { background: #fff; }
.bk-tema-rediger { margin-left: auto; font: 800 0.9rem/1 "Nunito", sans-serif; text-decoration: underline; text-decoration-thickness: 2px; cursor: pointer; color: var(--bk-ink); background: none; border: 0; padding: 0.2rem; }
.bk-tema-rediger:hover { color: var(--bk-korall); }
.bk-tema--ny .bk-tema-knapp { border-style: dashed; box-shadow: none; align-items: center; justify-content: center; gap: .5rem; min-height: 9rem; padding: 1rem; text-align: center; }
.bk-ny-tittel { font: 400 1.6rem/1 "Chewy", cursive; }
.bk-ny-info { font-size: .85rem; font-weight: 600; opacity: .75; max-width: 16rem; }
.bk-lagringsinfo { margin: -.25rem 0 1rem; padding: .6rem .9rem; border: 2px dashed var(--ink); border-radius: 12px; background: #fff; font-weight: 600; font-size: .95rem; max-width: 60rem; }
.bk-tema-li { display: flex; flex-direction: column; }
/* Valgene og startknappene står fast øverst, så læreren slipper å scrolle forbi temaene */
.bk-kontroll { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin: 0 0 1.1rem; padding: 0.6rem 0 0.8rem; background: var(--bk-krem); }
.bk-kontroll .bk-innstillinger { flex: 1 1 auto; align-items: flex-end; }
.bk-kontroll .bk-hovedknapper { margin: 0 0 0 auto; display: flex; gap: 0.6rem; align-self: center; }
.bk-kontroll .bk-innstilling h2 { margin-bottom: 0.4rem; font-size: 0.85rem; }
.bk-kontroll .bk-chip { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.bk-hode { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 1rem; }
.bk-hode .bk-tittel { font-size: 2.3rem; }
.bk-oppsett#oppsett { padding-top: 0.8rem; }
.bk-tema-bunn { padding: 0.5rem 0.9rem 0.6rem; }
.bk-kontroll .bk-knapp { font-size: 1.05rem; padding: 0.55rem 1rem; white-space: nowrap; }
.bk-kontroll .bk-innstillinger { gap: 0.6rem 1.3rem; }
/* Lange titler deles heller enn å gå inn under motivet */
.bk-tema-topp h2 { overflow-wrap: anywhere; hyphens: auto; }
@container (max-width: 270px) { .bk-tema-topp.har-ikon h2 { font-size: 1.3rem; } }
.bk-innstillinger { display: flex; flex-wrap: wrap; gap: 0.8rem 1.8rem; padding: 0.8rem 1.1rem; background: #fff; border: 3px solid var(--bk-ink); border-radius: 20px; box-shadow: var(--bk-skygge); margin: 0; }
.bk-innstilling h2 { font: 800 1rem/1 "Nunito", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.6rem; }
.bk-hovedknapper { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ---------- Skjermene 2 og 3: tavle og rutenett ---------- */
body[data-visning="tavle"], body[data-visning="rutenett"] { overflow: hidden; }
body[data-visning="tavle"] #stiglet-hode, body[data-visning="rutenett"] #stiglet-hode { display: none !important; }
.bk-scene { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 1.25rem 1.25rem 0.75rem; background: var(--bk-krem); }
.bk-tones { transition: opacity 300ms; }
body.bk-rolig .bk-tones { opacity: 0; pointer-events: none; }

.bk-teller { position: relative; width: 92px; height: 92px; display: grid; place-items: center; flex: 0 0 auto; }
#teller { font: 400 32px/1 "Chewy", cursive; white-space: nowrap; }
.bk-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); display: none; }
.bk-teller.har-tid .bk-ring { display: block; }
.bk-ring circle { fill: none; stroke-width: 6; }
.bk-ring-spor { stroke: rgba(43, 33, 24, 0.12); }
.bk-ring-tid { stroke: var(--bk-ink); stroke-linecap: round; stroke-dasharray: 289.03; stroke-dashoffset: 0; }
.bk-lagre-delt { position: absolute; top: 1.25rem; left: 1.25rem; }

.bk-midt { flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: 1.5rem; min-height: 0; }
.bk-sorter { font-size: 22px; visibility: hidden; }
body.bk-snudd .bk-sorter { visibility: visible; }
.bk-kortplass { position: relative; width: min(900px, 80vw, calc((100dvh - 290px) * 1.5)); aspect-ratio: 3 / 2; }

/* Kortet: bane (glidning og dra) > loft (hover og skalering i flippen) > kort (rotasjon) > to flater */
.bk-bane { position: absolute; inset: 0; transition: transform var(--bk-bytte) cubic-bezier(.22,.61,.36,1), opacity var(--bk-bytte) ease; touch-action: pan-y; }
.bk-bane.uten-overgang { transition: none !important; }
.bk-bane.ut-venstre { transform: translateX(-130%) scale(.6); opacity: 0; }
.bk-bane.ut-hoyre { transform: translateX(130%) scale(.6); opacity: 0; }
.bk-bane.inn-hoyre { transform: translateX(45%) scale(.9); opacity: 0; }
.bk-bane.inn-venstre { transform: translateX(-45%) scale(.9); opacity: 0; }
.bk-bane.til-ovmer { transform: translate(var(--til-x, -45vw), var(--til-y, 40vh)) scale(.08) rotate(-10deg); opacity: 0.35; }
.bk-bane.til-kan { transform: translate(var(--til-x, 45vw), var(--til-y, 40vh)) scale(.08) rotate(10deg); opacity: 0.35; }
.bk-bane.rist { animation: bk-rist 300ms linear; }
@keyframes bk-rist { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }
.bk-loft { position: absolute; inset: 0; perspective: 2200px; transition: transform 150ms; }
.bk-kortplass:hover .bk-loft { transform: translateY(-2px); }
.bk-loft.flipper { animation: bk-flipp-skala var(--bk-flip) cubic-bezier(.4,.2,.2,1); }
@keyframes bk-flipp-skala { 0%, 100% { scale: 1; } 50% { scale: 1.03; } }
.bk-kort { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--bk-flip) cubic-bezier(.4,.2,.2,1); cursor: pointer; border-radius: 20px; }
.bk-kort.raskt { transition-duration: 250ms; }
.bk-kort.snudd { transform: rotateY(180deg); }
.bk-flate {
  position: absolute; inset: 0; border: 3px solid var(--bk-ink); border-radius: 20px; box-shadow: 0 6px 0 var(--bk-ink);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; padding: 4% 5% 3.5%; overflow: hidden;
}
.bk-forside { background: var(--fagfarge); }
.bk-bakside { background: var(--bk-krem); transform: rotateY(180deg); }
.bk-innhold { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.6em; overflow: hidden; }
.bk-kortetikett { margin: 0; text-align: center; font: 800 24px/1.2 "Nunito", sans-serif; }
.bk-stort-begrep { font: 400 clamp(48px, 9vw, 128px)/1.02 "Chewy", cursive; margin: 0; overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.bk-lite-begrep { font: 800 28px/1.15 "Nunito", sans-serif; color: rgba(43, 33, 24, 0.6); margin: 0; }
.bk-forklaring { font: 600 clamp(32px, 3.2vw, 44px)/1.25 "Nunito", sans-serif; margin: 0; max-width: 40ch; }
.bk-eksempel { font: italic 600 26px/1.3 "Nunito", sans-serif; margin: 0; max-width: 46ch; }

.bk-ferdig { position: absolute; inset: 0; background: #fff; border: 3px solid var(--bk-ink); border-radius: 20px; box-shadow: 0 6px 0 var(--bk-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 5%; text-align: center; transition: transform var(--bk-bytte) cubic-bezier(.22,.61,.36,1), opacity var(--bk-bytte); }
.bk-ferdig.inn-hoyre { transform: translateX(45%) scale(.9); opacity: 0; }
.bk-ferdig h2 { font: 400 clamp(40px, 5vw, 72px)/1.05 "Chewy", cursive; margin: 0; }
.bk-ferdig-tall { font: 800 32px/1.2 "Nunito", sans-serif; margin: 0; }
.bk-ferdig-knapper { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.bk-ferdig .bk-knapp { font-size: 22px; }

.bk-kontroll { display: flex; gap: 1rem; margin: 1.1rem 0 0.4rem; flex: 0 0 auto; }
.bk-kontroll .bk-knapp { font-size: 22px; min-width: 9rem; }
.bk-knapp--snu { min-width: 14rem !important; }

.bk-bunn { width: 100%; display: flex; align-items: flex-end; gap: 1rem; flex: 0 0 auto; min-height: 84px; }
.bk-fyll { flex: 1 1 auto; }
.bk-gris { display: block; width: 44px; flex: 0 0 auto; margin-bottom: 0.4rem; }
.bk-gris img { display: block; width: 100%; height: auto; }
.bk-bunke { position: relative; width: 58px; height: 74px; flex: 0 0 auto; margin-bottom: 1.35rem; }
.bk-bunke-navn { position: absolute; left: 50%; bottom: -1px; transform: translate(-50%, 100%); font: 800 14px/1 "Nunito", sans-serif; white-space: nowrap; }
.bk-bunke-lag { position: absolute; inset: 0; border-radius: 9px; background: var(--bk-krem); border: 3px solid var(--bk-ink); animation: bk-bunke-inn 180ms ease both; }
.bk-bunke-lag:nth-of-type(1) { transform: translate(0, 0); z-index: 4; }
.bk-bunke-lag:nth-of-type(2) { transform: translate(3px, -4px) rotate(-5deg); z-index: 3; }
.bk-bunke-lag:nth-of-type(3) { transform: translate(6px, -8px) rotate(-9deg); z-index: 2; }
.bk-bunke-lag:nth-of-type(4) { transform: translate(9px, -12px) rotate(-13deg); z-index: 1; }
.bk-bunke-tall { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; font: 400 30px/1 "Chewy", cursive; }
.bk-bunke:not(.har-kort) { border: 3px dashed rgba(43, 33, 24, 0.35); border-radius: 9px; }
@keyframes bk-bunke-inn { from { opacity: 0; } to { opacity: 1; } }
.bk-hjorne { display: flex; gap: 0.25rem; align-self: flex-end; margin-bottom: 0.2rem; }
.bk-hjorne button { font: 800 14px/1 "Nunito", sans-serif; background: none; border: 0; padding: 0.45rem 0.5rem; color: var(--bk-ink); text-decoration: underline; text-decoration-thickness: 2px; cursor: pointer; }
.bk-hjorne button:hover { color: var(--bk-korall); }

/* ---------- Skjerm 3: Rutenett ---------- */
.bk-scene--rutenett { padding-top: 1rem; }
.bk-rutenett { flex: 1 1 auto; width: 100%; min-height: 0; display: grid; grid-template-columns: repeat(var(--kolonner, 5), var(--kortbredde, 300px)); gap: var(--gap, 16px); justify-content: center; align-content: center; overflow: auto; padding: 4px 4px 10px; }
.bk-rkort { position: relative; width: var(--kortbredde, 300px); aspect-ratio: 3 / 2; perspective: 1400px; cursor: pointer; border: 0; padding: 0; background: none; font: inherit; color: inherit; }
.bk-rkort-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--bk-flip) cubic-bezier(.4,.2,.2,1); }
.bk-rkort:hover .bk-rkort-inner { translate: 0 -2px; }
.bk-rkort .bk-flate { padding: 6% 6%; box-shadow: 0 4px 0 var(--bk-ink); align-items: center; justify-content: center; text-align: center; }
.bk-rkort .bk-flate-b { transform: rotateY(180deg); }
.bk-monster { background: var(--bk-krem) repeating-linear-gradient(45deg, rgba(43,33,24,.05) 0 10px, transparent 10px 20px); }
.bk-merke { font: 400 1.6em/1 "Chewy", cursive; color: var(--bk-korall); -webkit-text-stroke: 1px var(--bk-ink); }
.bk-rbegrep { font: 400 var(--begrep-px, 40px)/1.05 "Chewy", cursive; margin: 0; overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.bk-rforklaring { font: 600 var(--forklaring-px, 24px)/1.25 "Nunito", sans-serif; margin: 0; max-width: 100%; }
.bk-rforklaring-flate { background: var(--bk-krem); }
.bk-rutenett-knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.bk-rutenett-knapper .bk-knapp { font-size: 20px; }

/* ---------- Skjerm 4: Egne kort ---------- */
.bk-egne { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.bk-felt { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; font-weight: 800; }
.bk-felt--smal { max-width: 12rem; }
.bk-felt input, .bk-felt textarea { font: 600 20px/1.4 "Nunito", sans-serif; color: var(--bk-ink); background: #fff; border: 3px solid var(--bk-ink); border-radius: 12px; padding: 0.6rem 0.8rem; width: 100%; }
.bk-felt textarea { resize: vertical; min-height: 16rem; }
.bk-antall { font-weight: 800; font-size: 1.1rem; margin: -0.4rem 0 1rem; }
.bk-egne-forhand h2 { font: 400 1.6rem/1 "Chewy", cursive; margin: 0 0 0.8rem; }
#egne-forhand { display: grid; gap: 1rem; max-width: 380px; }
.bk-mini { aspect-ratio: 3 / 2; border: 3px solid var(--bk-ink); border-radius: 16px; box-shadow: var(--bk-skygge); background: var(--fagfarge); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; gap: 0.4rem; overflow: hidden; }
.bk-mini b { font: 400 2.2rem/1.05 "Chewy", cursive; }
.bk-mini span { font-size: 1rem; }
.bk-mini--tom { background: #fff; border-style: dashed; box-shadow: none; color: rgba(43, 33, 24, 0.6); }

.bk-melding { position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 1rem); background: var(--bk-ink); color: var(--bk-krem); font: 800 1.1rem/1 "Nunito", sans-serif; padding: 0.8rem 1.4rem; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 200ms, transform 200ms; z-index: 60; }
.bk-melding.vis { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .bk-egne { grid-template-columns: 1fr; }
  .bk-sorter { position: absolute; bottom: 7.5rem; z-index: 3; }
  #sorter-ovmer { left: 1rem; } #sorter-kan { right: 1rem; }
  .bk-kortplass { width: min(900px, 92vw, calc((100dvh - 290px) * 1.5)); }
  .bk-kontroll .bk-knapp { min-width: 0; } .bk-knapp--snu { min-width: 8rem !important; }
}

/* Redusert bevegelse: ingen rotasjon og ingen glidning, bare en kort fade */
@media (prefers-reduced-motion: reduce) {
  .bk-kort, .bk-rkort-inner { transform: none !important; transition: none !important; }
  .bk-flate { transition: opacity 150ms; }
  .bk-bakside, .bk-rkort .bk-flate-b { transform: none; opacity: 0; }
  .bk-kort.snudd .bk-forside { opacity: 0; } .bk-kort.snudd .bk-bakside { opacity: 1; }
  .bk-rkort.side-b .bk-flate-a { opacity: 0; } .bk-rkort.side-b .bk-flate-b { opacity: 1; }
  .bk-loft.flipper { animation: none; }
  .bk-bane, .bk-ferdig { transition: opacity 150ms !important; }
  .bk-bane.ut-venstre, .bk-bane.ut-hoyre, .bk-bane.inn-hoyre, .bk-bane.inn-venstre, .bk-bane.til-ovmer, .bk-bane.til-kan, .bk-ferdig.inn-hoyre { transform: none; }
  .bk-bane.rist { animation: none; }
  .bk-kortplass:hover .bk-loft, .bk-rkort:hover .bk-rkort-inner { transform: none; translate: none; }
}