/* =====================================================================
   Kennis Rush · gedeeld ontwerpsysteem "Kennisland" (richting A+B, nov 2026)
   B = tastbare panelen en knoppen (brons, klinknagels, knoppen die indrukken)
   A = filmische overgangen en laadschermen (zwart, letterbox, titelkaart)
   Dit bestand komt NA de eigen stijlen van elke pagina en wint via html.kr.
   Kleuren: nacht, steen, brons, ivoor · oranje = actief · goud = beloning
            mos = goed/hersteld · rood = gevaar · nooit turquoise
   ===================================================================== */
@font-face { font-family:'Russo One'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/russo-one.woff2) format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:200 1000; font-display:swap; src:url(../fonts/nunito.woff2) format('woff2'); }

:root {
  --kr-nacht:#14110E; --kr-steen0:#1D1915; --kr-steen:#25201B; --kr-steen2:#2F2822; --kr-lijn:#3A3129; --kr-rand:#4A3B2C; --kr-diep:#0c0a08;
  --kr-brons:#A0703C; --kr-brons-d:#6E4B26; --kr-brons-l:#E6B57A;
  --kr-ivoor:#F3EADB; --kr-ivoor2:rgba(243,234,219,.82); --kr-ivoor3:rgba(243,234,219,.7);
  --kr-oranje:#F07A2A; --kr-oranje-l:#F59A55; --kr-oranje-d:#A9501A;
  --kr-goud:#F0A848; --kr-goud-d:#A87420; --kr-mos:#8FB35A; --kr-mos-d:#5F7D39; --kr-rood:#E5483B; --kr-rood-d:#8F2A21;
  --kr-r-groot:22px; --kr-r:16px; --kr-r-klein:12px;
  --kr-zacht:cubic-bezier(.2,.8,.2,1); --kr-veer:cubic-bezier(.3,1.5,.5,1);
  --kr-klink:radial-gradient(circle at 50% 50%, #F2C68C 0 1.5px, #B07E44 2.5px, #6E4B26 4px, transparent 4.6px);
}

/* ---------- basis ---------- */
html.kr { background:var(--kr-nacht); -webkit-font-smoothing:antialiased; }
html.kr :focus { outline:none; }
html.kr :focus-visible { outline:3px solid var(--kr-goud); outline-offset:3px; border-radius:10px; }
html.kr ::selection { background:rgba(240,122,42,.45); color:var(--kr-ivoor); }
html.kr .panel::-webkit-scrollbar, html.kr body::-webkit-scrollbar { width:10px; }
html.kr .panel::-webkit-scrollbar-thumb, html.kr body::-webkit-scrollbar-thumb { background:var(--kr-lijn); border-radius:10px; border:3px solid transparent; background-clip:padding-box; }
html.kr .panel { scrollbar-color:var(--kr-lijn) transparent; scrollbar-width:thin; }

/* ---------- panelen (B: brons met klinknagels) ---------- */
html.kr .screen { background:radial-gradient(ellipse at 50% 40%, rgba(20,17,14,.25), rgba(12,10,8,.88) 75%); }
html.kr .panel {
  background:
    var(--kr-klink) 10px 10px / 14px 14px no-repeat,
    var(--kr-klink) calc(100% - 10px) 10px / 14px 14px no-repeat,
    linear-gradient(180deg, #2A241E, #1E1915 70%);
  color:var(--kr-ivoor); border:2px solid var(--kr-rand); border-radius:var(--kr-r-groot);
  box-shadow:inset 0 2px 0 rgba(255,236,210,.06), inset 0 -3px 0 rgba(0,0,0,.35), 0 10px 0 var(--kr-diep), 0 30px 70px rgba(0,0,0,.6);
  backdrop-filter:none;
}
html.kr .screen:not([hidden]) > .panel { animation:kr-paneel .5s var(--kr-zacht) both; }
@keyframes kr-paneel { from { opacity:0; transform:translateY(18px) scale(.985); } }

/* titel (B: ivoor met gestapelde bronsrand) */
html.kr .logo {
  background:none; -webkit-text-fill-color:currentColor; color:var(--kr-ivoor); font-style:normal; letter-spacing:.02em; filter:none; animation:none;
  text-shadow:0 2px 0 var(--kr-brons), 0 5px 0 var(--kr-brons-d), 0 14px 26px rgba(0,0,0,.55);
  overflow-wrap:normal; hyphens:manual; word-break:keep-all;
}
html.kr .logo span { color:var(--kr-oranje); -webkit-text-fill-color:var(--kr-oranje); }

/* sectiekop (A: wijde letters met een bronzen lijn erachter) */
html.kr .panel .label { display:flex; align-items:center; gap:10px; color:var(--kr-goud); opacity:1; font-weight:900; font-size:12px; letter-spacing:.2em; }
html.kr .panel .label::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(240,168,72,.55), transparent); }
html.kr .sub { color:var(--kr-ivoor2); opacity:1; }
html.kr .hint, html.kr .uitleg, html.kr .kleurhint { color:var(--kr-ivoor3); opacity:1; }
html.kr .thuis { color:var(--kr-goud); opacity:1; display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 6px; margin-left:-6px; border-radius:99px; transition:background .2s, transform .2s var(--kr-zacht); }
html.kr .thuis:hover { background:rgba(240,168,72,.12); transform:translateX(-2px); }
html.kr kbd { background:var(--kr-lijn); color:var(--kr-ivoor); border-radius:6px; box-shadow:0 2px 0 var(--kr-diep); padding:1px 7px; font-weight:900; }

/* ---------- keuzeknoppen en kaarten (B: tastbaar) ---------- */
html.kr :is(.panel,.kies) .chip, html.kr .card, html.kr .kleur, html.kr .it, html.kr .rang, html.kr .pr, html.kr .winkel .item, html.kr #kaart .sector {
  background:linear-gradient(180deg, #312A23, #28221C); color:var(--kr-ivoor); border:1px solid rgba(255,236,210,.06);
  box-shadow:inset 0 1px 0 rgba(255,236,210,.06), 0 4px 0 #120f0c; transition:transform .15s var(--kr-zacht), box-shadow .15s, border-color .2s, background .2s;
}
html.kr :is(.panel,.kies) .chip:hover, html.kr .card:not(.dicht):hover, html.kr .kleur:hover { transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,236,210,.08), 0 6px 0 #120f0c; border-color:rgba(240,168,72,.35); }
html.kr :is(.panel,.kies) .chip:active, html.kr .card:not(.dicht):active, html.kr .kleur:active { transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,236,210,.06), 0 1px 0 #120f0c; transition-duration:.05s; }
html.kr :is(.panel,.kies) .chip.on, html.kr .kleur.on {
  background:linear-gradient(180deg, var(--kr-oranje-l), var(--kr-oranje) 65%); color:var(--kr-nacht); border-color:transparent;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 var(--kr-oranje-d), 0 8px 18px rgba(240,122,42,.25);
}
html.kr :is(.panel,.kies) .chip.on small, html.kr .kleur.on small { color:rgba(20,17,14,.75); opacity:1; }
html.kr :is(.panel,.kies) .chip small { color:var(--kr-ivoor3); opacity:1; }
html.kr .card.on, html.kr .it.on, html.kr #kaart .sector.on, html.kr .winkel .item.heb {
  background:linear-gradient(180deg, #3A2A1C, #2B2019); border-color:var(--kr-oranje);
  box-shadow:inset 0 0 0 1px var(--kr-oranje), 0 4px 0 var(--kr-oranje-d), 0 10px 24px rgba(240,122,42,.18);
}
/* oude fout: de rangbalkjes erfden position:absolute van de HUD-balk en zweefden bovenin */
html.kr .rang .bar { position:static; }
html.kr .card .m { color:var(--kr-ivoor3); opacity:1; }
html.kr .card.dicht { opacity:.5; }
/* tegeliconen in de warme Kennisland-tint (de bronbeelden zijn nog teal) */
html.kr img[src*="icoon/"] {
  filter:grayscale(1) sepia(.75) saturate(1.6) brightness(.95) drop-shadow(0 4px 6px rgba(0,0,0,.45)); transition:filter .2s;
}
html.kr .on img[src*="icoon/"], html.kr :hover > img[src*="icoon/"] { filter:grayscale(1) sepia(1) saturate(3.2) hue-rotate(-12deg) brightness(1.02) drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
/* keuzes met een icoon (hoofdstukken) kleuren niet helemaal oranje, maar krijgen een oranje rand */
html.kr :is(.panel,.kies) .chip.on:has(img), html.kr :is(.panel,.kies) .chip.on:has(.ico) {
  background:linear-gradient(180deg, #3A2A1C, #2B2019); color:var(--kr-ivoor); border-color:var(--kr-oranje);
  box-shadow:inset 0 0 0 1px var(--kr-oranje), 0 4px 0 var(--kr-oranje-d), 0 10px 24px rgba(240,122,42,.18);
}
html.kr :is(.panel,.kies) .chip.on:has(img) small, html.kr :is(.panel,.kies) .chip.on:has(.ico) small { color:var(--kr-ivoor3); }

/* ---------- hoofdknoppen (B: dik, drukt echt in) ---------- */
html.kr .go {
  position:relative; font-style:normal; letter-spacing:.06em; color:var(--kr-nacht); border:0; border-radius:var(--kr-r);
  background:linear-gradient(180deg, var(--kr-oranje-l), var(--kr-oranje) 60%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 7px 0 var(--kr-oranje-d), 0 14px 26px rgba(0,0,0,.4);
  transition:transform .12s var(--kr-zacht), box-shadow .12s, filter .2s;
}
html.kr .go:hover:not(:disabled) { filter:brightness(1.06); transform:translateY(-1px); }
html.kr .go:active:not(:disabled) { transform:translateY(5px); box-shadow:inset 0 2px 0 rgba(255,255,255,.25), 0 2px 0 var(--kr-oranje-d), 0 4px 10px rgba(0,0,0,.4); transition-duration:.04s; }
html.kr .go.tweede { background:linear-gradient(180deg, #342C25, #2A241E); color:var(--kr-ivoor); border:1px solid rgba(255,236,210,.07); box-shadow:inset 0 1px 0 rgba(255,236,210,.07), 0 6px 0 var(--kr-diep); }
html.kr .go.tweede:active { box-shadow:0 1px 0 var(--kr-diep); }
html.kr .go.dag, html.kr .kistknop { background:linear-gradient(180deg, #C08A4F, var(--kr-brons) 60%); color:var(--kr-nacht); box-shadow:inset 0 2px 0 rgba(255,255,255,.25), 0 7px 0 var(--kr-brons-d); }
html.kr .go.daag { background:linear-gradient(180deg, #463B31, var(--kr-lijn)); color:var(--kr-ivoor); box-shadow:inset 0 1px 0 rgba(255,236,210,.08), 0 7px 0 var(--kr-diep); }
html.kr .go.train { background:linear-gradient(180deg, #F6BE6E, var(--kr-goud) 60%); color:var(--kr-nacht); box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 7px 0 var(--kr-goud-d); }
html.kr .go.fouten { background:linear-gradient(180deg, #EE6A5E, var(--kr-rood) 60%); color:#fff; box-shadow:inset 0 2px 0 rgba(255,255,255,.25), 0 7px 0 var(--kr-rood-d); }
/* glans die één keer over de startknop trekt */
html.kr .go:not(.tweede):not(:disabled)::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation:kr-glans 4.5s 1.2s ease-in-out infinite; }
@keyframes kr-glans { 0%, 70% { background-position:-150% 0; } 100% { background-position:150% 0; } }
html.kr .go:disabled { cursor:not-allowed; }

/* de vaste startknop onderin het menu: dicht dok, niets schijnt erdoorheen */
html.kr #startKnop { box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 7px 0 var(--kr-oranje-d), 0 -14px 0 6px #201B16, 0 8px 0 6px #201B16; }
html.kr #startKnop:disabled { opacity:1 !important; background:linear-gradient(180deg, #3E352C, #342C25); color:var(--kr-ivoor2); box-shadow:inset 0 1px 0 rgba(255,236,210,.07), 0 7px 0 var(--kr-diep), 0 -14px 0 6px #201B16, 0 8px 0 6px #201B16; font-size:clamp(17px,3.6vw,22px); }

/* links en blokken in het menu */
html.kr .voortgangLink, html.kr .panel .hoi, html.kr .baasteller { color:var(--kr-goud); }
html.kr .voortgangLink { border-radius:12px; padding:8px; transition:background .2s; }
html.kr .voortgangLink:hover { background:rgba(240,168,72,.1); }
html.kr .welkom { background:linear-gradient(180deg, rgba(240,168,72,.14), rgba(240,168,72,.08)); border:1px solid rgba(240,168,72,.5); color:var(--kr-ivoor); border-radius:var(--kr-r); }
html.kr details.vak { background:#25201B; border:1px solid var(--kr-lijn); border-radius:var(--kr-r); }
html.kr details.vak summary { cursor:pointer; }
html.kr .privacy a, html.kr details a { color:var(--kr-goud) !important; }

/* ---------- eindschermen (B: medaille, statblokken) ---------- */
html.kr .uitslag .medaille, html.kr #uMedaille {
  width:96px; height:96px; margin:2px auto 10px; border-radius:50%; display:grid; place-items:center; font-size:48px;
  background:radial-gradient(circle at 35% 28%, #FFE1A6, var(--kr-goud) 45%, var(--kr-goud-d)); box-shadow:inset 0 -6px 0 rgba(0,0,0,.22), inset 0 3px 0 rgba(255,255,255,.4), 0 6px 0 var(--kr-brons-d), 0 16px 30px rgba(240,168,72,.25);
  animation:kr-munt .8s var(--kr-veer) both .15s;
}
html.kr .uitslag .medaille:empty, html.kr #uMedaille:empty { display:none; }
@keyframes kr-munt { from { transform:scale(.3) rotateY(180deg); opacity:0; } }
html.kr .plaats { font-style:normal; color:var(--kr-ivoor); text-shadow:0 2px 0 var(--kr-brons), 0 5px 0 var(--kr-brons-d), 0 14px 26px rgba(0,0,0,.5); }
html.kr .score-groot { color:var(--kr-goud); text-shadow:0 3px 0 var(--kr-brons-d); animation:kr-pop .6s var(--kr-veer) both .3s; }
@keyframes kr-pop { from { transform:scale(.6); opacity:0; } }
html.kr .panel .stat, html.kr .stats .stat { background:linear-gradient(180deg, #312A23, #28221C); border:1px solid rgba(255,236,210,.06); border-radius:var(--kr-r); box-shadow:inset 0 1px 0 rgba(255,236,210,.06), 0 4px 0 #120f0c; }
html.kr .stat b { color:var(--kr-goud); }
html.kr .stat span, html.kr .stat small { color:var(--kr-ivoor3); opacity:1; }
html.kr .stats > .stat { animation:kr-op .45s var(--kr-zacht) both; }
html.kr .stats > .stat:nth-child(2) { animation-delay:.08s; } html.kr .stats > .stat:nth-child(3) { animation-delay:.16s; } html.kr .stats > .stat:nth-child(4) { animation-delay:.24s; }
@keyframes kr-op { from { opacity:0; transform:translateY(10px); } }
html.kr .record { background:linear-gradient(180deg, #F6BE6E, var(--kr-goud)); color:var(--kr-nacht); box-shadow:0 3px 0 var(--kr-goud-d); }
html.kr .leerpunt { background:#25201B; border-radius:var(--kr-r-klein); }
html.kr details.meer { border-radius:var(--kr-r); }

/* ---------- HUD (B: steen met bronzen onderrand) ---------- */
html.kr .pill, html.kr .knop, html.kr #munten, html.kr #pauzeKnop, html.kr #energie {
  background:linear-gradient(180deg, rgba(49,42,35,.94), rgba(33,28,23,.94)); color:var(--kr-ivoor); border:1px solid rgba(255,236,210,.08);
  box-shadow:inset 0 1px 0 rgba(255,236,210,.07), 0 3px 0 rgba(0,0,0,.45);
}
html.kr .knop, html.kr #pauzeKnop { transition:transform .1s; } html.kr .knop:active, html.kr #pauzeKnop:active { transform:translateY(2px); }
html.kr #qtext { border-radius:18px; box-shadow:0 5px 0 var(--kr-brons-d), 0 14px 30px rgba(0,0,0,.4); }
html.kr #qcard:not(.goed):not(.fout) #qtext { background:linear-gradient(180deg, rgba(37,32,27,.97), rgba(25,21,17,.97)); }
html.kr #qcard.goed #qtext { box-shadow:0 5px 0 var(--kr-mos-d), 0 0 0 3px rgba(143,179,90,.35), 0 14px 30px rgba(0,0,0,.4); }
html.kr #qcard.fout #qtext { box-shadow:0 5px 0 var(--kr-rood-d), 0 0 0 3px rgba(229,72,59,.35), 0 14px 30px rgba(0,0,0,.4); }
html.kr .ans { box-shadow:inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 rgba(0,0,0,.4); }
html.kr #ballon { box-shadow:0 4px 0 rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45); }
/* quest: vraagkaart in dezelfde vormtaal */
html.kr #qcard:has(#kamer) { box-shadow:inset 0 1px 0 rgba(255,236,210,.06), 0 5px 0 var(--kr-brons-d), 0 14px 30px rgba(0,0,0,.45); }
html.kr #antw span { box-shadow:inset 0 2px 0 rgba(255,255,255,.28), 0 3px 0 rgba(0,0,0,.35); }

/* pauze: meldingen uit het spel schijnen er niet meer doorheen */
html.kr #pauze { background:rgba(12,10,8,.9); z-index:50; }
/* telefoon staand: Glitch-ballon niet meer over de turbo- en nitrobalk */
@media (pointer:coarse) and (orientation:portrait) {
  html.kr #qcard:not([hidden]) ~ #ballon, html.kr #focus:not([hidden]) ~ #ballon { top:38%; bottom:auto; left:12px; right:12px; max-width:none; }
}

/* ---------- filmgordijn: laadscherm en overgang tussen pagina's (A) ---------- */
html.kr-laad body { visibility:hidden; }
#kr-gordijn { position:fixed; inset:0; z-index:2147483000; visibility:visible; pointer-events:none; display:grid; place-items:center; opacity:0; transition:opacity .45s ease; background:#0c0a08; }
#kr-gordijn::before, #kr-gordijn::after { content:""; position:fixed; left:0; right:0; height:11vh; background:#000; transition:transform .55s var(--kr-zacht); }
#kr-gordijn::before { top:0; transform:translateY(-100%); } #kr-gordijn::after { bottom:0; transform:translateY(100%); }
#kr-gordijn .kr-kaart { text-align:center; transform:translateY(8px); opacity:0; transition:opacity .4s .1s, transform .6s var(--kr-zacht) .1s; }
#kr-gordijn .kr-k1 { font:400 12px 'Russo One', system-ui; letter-spacing:.42em; color:var(--kr-goud); text-transform:uppercase; padding-left:.42em; }
#kr-gordijn .kr-k2 { font:400 clamp(26px,4vw,40px) 'Russo One', system-ui; letter-spacing:.06em; color:var(--kr-ivoor); margin-top:6px; text-shadow:0 2px 0 var(--kr-brons), 0 4px 0 var(--kr-brons-d); }
#kr-gordijn .kr-balk { width:160px; height:3px; margin:16px auto 0; border-radius:3px; background:rgba(243,234,219,.12); overflow:hidden; }
#kr-gordijn .kr-balk i { display:block; width:40%; height:100%; background:linear-gradient(90deg, transparent, var(--kr-goud), transparent); }
html.kr-laad #kr-gordijn .kr-balk i, html.kr-weg #kr-gordijn .kr-balk i { animation:kr-laden 1.1s ease-in-out infinite; }
@keyframes kr-laden { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
html.kr-laad #kr-gordijn, html.kr-weg #kr-gordijn { opacity:1; pointer-events:auto; }
html.kr-laad #kr-gordijn::before, html.kr-laad #kr-gordijn::after, html.kr-weg #kr-gordijn::before, html.kr-weg #kr-gordijn::after { transform:none; }
html.kr-laad #kr-gordijn .kr-kaart, html.kr-weg #kr-gordijn .kr-kaart { opacity:1; transform:none; }
html.kr-weg #kr-gordijn .kr-kaart { transition-delay:.15s; }

/* lichte stand (zwakke apparaten, zoals Chromebooks): geen glans, minder schaduw */
html.licht .go::after { animation:none !important; display:none; }
html.licht .panel { box-shadow:0 8px 0 var(--kr-diep); }
html.licht .screen:not([hidden]) > .panel { animation:none; }

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  html.kr *, html.kr *::before, html.kr *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important; }
  #kr-gordijn, #kr-gordijn::before, #kr-gordijn::after, #kr-gordijn .kr-kaart { transition:none !important; }
  #kr-gordijn .kr-balk i { animation:none !important; width:100%; opacity:.6; }
}