/**
 * SlimmeKids School – één bovenbalk voor alle schoolspellen (2026-10-11).
 * Zoals de systeemschermen: logo links; rechts boven de titel, en direct daaronder (ook rechts) de knoppen:
 * grootte (klein/groot), geluid, Uitleg, volledig scherm en de taalkeuze.
 * De opbouw doet /school/sk-school-topbar.js (verplaatst de bestaande knoppen, ids blijven gelijk).
 * © SlimmeKids – https://www.slimmekids.be
 */
header.sk-topbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: calc(.5rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) .5rem max(1rem, env(safe-area-inset-left, 0px)) !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #d5dee7 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-align: left;
    position: relative;
}
header.sk-topbar > .brand,
header.sk-topbar > .home-link {
    order: 1 !important;
    flex: 0 0 auto;
    align-self: flex-start;
    display: flex !important;
    align-items: center;
    margin: .2rem 0 0 !important;
    position: static !important;
    transform: none !important;
}
header.sk-topbar > .brand img,
header.sk-topbar > .home-link img { height: 40px !important; width: auto !important; display: block; }
header.sk-topbar .sk-tb-right {
    order: 2;
    margin-left: auto !important;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .4rem;
    min-width: 0;
    max-width: calc(100% - 140px);
}
header.sk-topbar .sk-tb-right > .title,
header.sk-topbar .sk-tb-right > .bar-title {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: right !important;
    min-width: 0;
    max-width: 100%;
    order: 0 !important;
    position: static !important;
}
header.sk-topbar .sk-tb-right .kicker,
header.sk-topbar .sk-tb-right .intro-kicker {
    display: block;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #5b7084 !important;
    white-space: nowrap;
    text-align: right;
}
header.sk-topbar .sk-tb-right h1 {
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: -.01em !important;
    color: #1c3348 !important;
    white-space: nowrap;
    text-align: right;
    text-shadow: none !important;
}
header.sk-topbar .sk-tb-right .level-line,
header.sk-topbar .sk-tb-right .school-line,
header.sk-topbar .sk-tb-right .lt-content-note { margin: .1rem 0 0 !important; font-size: .78rem !important; color: #4f6478 !important; text-align: right; }
header.sk-topbar .sk-tb-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
}
header.sk-topbar .sk-tb-controls > .tools,
header.sk-topbar .sk-tb-controls > .intro-tools,
header.sk-topbar .sk-tb-controls > .hud {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .4rem !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 0 !important;
    position: static !important;
    min-width: 0;
}
header.sk-topbar .sk-tb-controls > .hud[hidden] { display: none !important; }
header.sk-topbar .sk-tb-controls > .sk-lang-host {
    order: 9;
    display: flex !important;
    align-items: center;
    margin: 0 !important;
    position: static !important;
}
header.sk-topbar .sk-tb-controls .mini {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 40px;
    min-width: 40px;
    height: auto;
    margin: 0;
    padding: 0 .8rem;
    border: 1px solid #d5dee7;
    border-radius: 8px;
    background: #fff;
    color: #1c3348;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}
header.sk-topbar .sk-tb-controls .mini:hover { background: #f4f7fb; border-color: #b4c3d1; }
header.sk-topbar .sk-tb-controls .mini:focus-visible { outline: 2px solid #2f9ed8; outline-offset: 2px; }
header.sk-topbar .sk-tb-controls .size-control {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 40px;
    margin: 0;
    padding: 0 .5rem;
    border: 1px solid #d5dee7;
    border-radius: 8px;
    background: #fff;
    color: #1c3348;
}
header.sk-topbar .sk-tb-controls .text-size { width: 92px; margin: 0; accent-color: #2f9ed8; }
header.sk-topbar .sk-tb-fs .sk-tb-fs-ico { font-size: 1.1rem; line-height: 1; }
@media (max-width: 1100px) {
    header.sk-topbar .sk-tb-right .kicker,
    header.sk-topbar .sk-tb-right .intro-kicker { display: none; }
}
@media (max-width: 900px) {
    header.sk-topbar .sk-tb-controls .text-size { width: 70px; }
    header.sk-topbar .sk-tb-controls .mini { padding: 0 .6rem; }
}

/* Uitleg-venster voor spellen zonder eigen uitleg */
.sk-tb-dialog { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(16, 32, 48, .45); }
.sk-tb-dialog[hidden] { display: none; }
.sk-tb-dialog-box { box-sizing: border-box; width: min(34rem, 100%); max-height: calc(100% - 2rem); overflow: auto; padding: 1.3rem 1.4rem 1.2rem; background: #fff; border: 1px solid #d5dee7; border-radius: 10px; box-shadow: 0 12px 40px rgba(16, 32, 48, .18);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #1c3348; text-align: left; }
.sk-tb-dialog-box h2 { margin: 0 0 .6rem; font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: #1c3348; }
.sk-tb-dialog-box p { margin: 0 0 .7rem; font-size: 1rem; line-height: 1.55; color: #36536b; }
.sk-tb-dialog-box .sk-tb-ok { margin-top: .3rem; min-height: 44px; padding: 0 1.4rem; border: 1px solid #1c3348; border-radius: 8px; background: #1c3348; color: #fff; font: 600 1rem/1 inherit; font-family: inherit; cursor: pointer; }

/* Balk boven alle schermen (data-sk-persist): het scherm vult de rest */
.sk-tb-host { display: flex !important; flex-direction: column !important; }
.sk-tb-host > header.sk-topbar { flex: 0 0 auto; }
.sk-tb-host > .screen.open { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; }
header.sk-topbar .size-a { font-weight: 700; line-height: 1; color: #5d7388; }
header.sk-topbar .size-a-sm { font-size: .68rem; }
header.sk-topbar .size-a-lg { font-size: 1.05rem; }
header.sk-topbar .sound-mark { width: 12px; height: 12px; border-radius: 50%; background: #1f9d45; box-shadow: 0 0 0 3px rgba(31, 157, 69, .2), 0 0 8px rgba(31, 157, 69, .75); flex: 0 0 auto; }
header.sk-topbar .sound-btn.off .sound-mark { background: #e11d2e; box-shadow: 0 0 0 3px rgba(225, 29, 46, .18), 0 0 8px rgba(225, 29, 46, .7); }

/* Compact en verfijnd (2026-10-11, Raymond): kleine titel, knoppen 32 px, slanke schuif, nooit het speelveld verdringen */
header.sk-topbar { gap: .75rem !important; padding: calc(.4rem + env(safe-area-inset-top, 0px)) max(.9rem, env(safe-area-inset-right, 0px)) .4rem max(.9rem, env(safe-area-inset-left, 0px)) !important; }
header.sk-topbar > .brand img,
header.sk-topbar > .home-link img { height: 32px !important; }
header.sk-topbar .sk-tb-right { gap: .3rem; }
header.sk-topbar .sk-tb-right h1 { font-size: 1.05rem !important; line-height: 1.2 !important; }
header.sk-topbar .sk-tb-right .kicker,
header.sk-topbar .sk-tb-right .intro-kicker { font-size: .6rem !important; }
header.sk-topbar .sk-tb-right .level-line,
header.sk-topbar .sk-tb-right .school-line,
header.sk-topbar .sk-tb-right .lt-content-note { font-size: .7rem !important; margin-top: 0 !important; }
header.sk-topbar .sk-tb-controls,
header.sk-topbar .sk-tb-controls > .tools,
header.sk-topbar .sk-tb-controls > .intro-tools,
header.sk-topbar .sk-tb-controls > .hud { gap: .3rem !important; }
header.sk-topbar .sk-tb-controls .mini,
header.sk-topbar .sk-tb-controls .btn-ghost,
header.sk-topbar .sk-tb-controls .top10-btn {
    min-height: 32px !important; height: 32px !important; min-width: 32px !important;
    padding: 0 .6rem !important; font-size: .8rem !important; border-radius: 7px !important; gap: .35rem !important;
}
header.sk-topbar .sk-tb-controls .size-control { height: 32px !important; padding: 0 .4rem !important; gap: .25rem !important; border-radius: 7px !important; }
header.sk-topbar .sk-tb-controls .text-size { width: 76px !important; height: 14px !important; }
header.sk-topbar .size-a-sm { font-size: .6rem !important; }
header.sk-topbar .size-a-lg { font-size: .9rem !important; }
header.sk-topbar .sound-mark { width: 9px !important; height: 9px !important; box-shadow: 0 0 0 2px rgba(31, 157, 69, .2) !important; }
header.sk-topbar .sound-btn.off .sound-mark { box-shadow: 0 0 0 2px rgba(225, 29, 46, .18) !important; }
header.sk-topbar .time-lamp { width: 9px !important; height: 9px !important; }
/* volledig scherm: compacte icoonknop (tekst blijft voor schermlezers) */
header.sk-topbar .sk-tb-controls [id^="btnFs"],
header.sk-topbar .sk-tb-controls .sk-tb-fs { width: 32px !important; padding: 0 !important; font-size: 0 !important; }
header.sk-topbar .sk-tb-controls [id^="btnFs"] > *,
header.sk-topbar .sk-tb-controls .sk-tb-fs > * { display: none !important; }
header.sk-topbar .sk-tb-controls [id^="btnFs"]::before,
header.sk-topbar .sk-tb-controls .sk-tb-fs::before { content: "⛶"; font-size: 1.05rem; line-height: 1; color: #1c3348; }
/* taalkeuze compact */
header.sk-topbar .sk-tb-controls .sk-lang { gap: .1rem; }
header.sk-topbar .sk-tb-controls .sk-lang-btn { min-height: 28px !important; padding: .15rem .4rem !important; font-size: .68rem !important; }
/* segmentknoppen in de balk (Letters: kleine/hoofdletters) */
header.sk-topbar .sk-tb-controls .seg button { min-height: 32px !important; padding: 0 .55rem !important; font-size: .78rem !important; }
header.sk-topbar .sk-tb-controls .seg-label { font-size: .6rem !important; }
header.sk-topbar .sk-tb-controls .top-pill { height: 32px !important; font-size: .8rem !important; }
@media (max-width: 900px) { header.sk-topbar .sk-tb-controls .text-size { width: 60px !important; } }

/* Logo identiek aan de hub/systeemschermen (2026-10-11): 144×48 px op x=22,4 / y=26 px – geen sprong hub → spel */
header.sk-topbar { padding: calc(1rem + env(safe-area-inset-top, 0px)) max(1.4rem, env(safe-area-inset-right, 0px)) .5rem max(1.4rem, env(safe-area-inset-left, 0px)) !important; }
header.sk-topbar > .brand,
header.sk-topbar > .home-link { margin: 10px 0 0 !important; padding: 0 !important; }
header.sk-topbar > .brand img,
header.sk-topbar > .home-link img { height: 48px !important; width: auto !important; max-width: none !important; }