/* Kwistig: het testbeeld (Chromecast en /testbeeld). Licht voor een oude Chromecast: geen blur, geen
   color-mix, geen aspect-ratio of inset; één beweging (transform). Maten in --u: 1vh op een 16:9-scherm,
   op 4:3 kleiner zodat alles in de breedte past. Lettertypen en kleuren uit tokens.css. */
.testbeeld {
  --u: 1vh;
  --oranje: #FF4B0F; --blauw: #1263FF; --messing: #E3A63B; --schuim: #FFF1DC; --roze: #FF4FA3; --paars: #8A4DFF; --groen: #1E9E5A; --zwart: #130D09;
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2147483000; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #24170f 0%, var(--zwart) 70%); color: var(--schuim);
  font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: calc(var(--u) * 1.9); line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
@supports (width: min(1px, 2px)) { .testbeeld { --u: min(1vh, .5625vw); } }
.testbeeld[hidden] { display: none; }
html.tb-aan, html.tb-aan body { overflow: hidden; }
.testbeeld * { box-sizing: border-box; }
.testbeeld h1, .testbeeld h2, .testbeeld p, .testbeeld dl, .testbeeld dd { margin: 0; }

/* raster: elke 5 % een lijntje (rond en recht: zie je golven of buigen, dan schaalt de tv) */
.tb-raster { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .5;
  background-image: linear-gradient(rgba(255, 241, 220, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 241, 220, .07) 1px, transparent 1px);
  background-size: 5% 5%; background-position: -1px -1px; }

/* kaders voor de rand: 0 %, 5 % en 10 % */
.tb-kader { position: absolute; pointer-events: none; }
.tb-k0 { top: 0; left: 0; right: 0; bottom: 0; border: 4px solid var(--oranje); }
.tb-k5 { top: 5%; left: 5%; right: 5%; bottom: 5%; border: 2px dashed var(--messing); }
.tb-k10 { top: 10%; left: 10%; right: 10%; bottom: 10%; border: 2px solid var(--groen); }
.tb-klabel { position: absolute; white-space: nowrap; font-weight: 700; font-size: calc(var(--u) * 1.55); line-height: 1; padding: calc(var(--u) * .55) calc(var(--u) * 1.1); border-radius: 99px; }
.tb-k0 .tb-klabel { top: 1.4vh; left: 1.6vw; background: var(--oranje); color: var(--zwart); }
.tb-k5 .tb-klabel { top: 0; right: 6%; transform: translateY(-50%); background: var(--messing); color: var(--zwart); }
.tb-k10 .tb-klabel { bottom: 0; right: 4%; transform: translateY(50%); background: var(--groen); color: #fff; }
.tb-hoek { position: absolute; width: 3.2vw; height: 3.2vw; border: 0 solid var(--schuim); }
.tb-h1 { top: 0; left: 0; border-top-width: 10px; border-left-width: 10px; }
.tb-h2 { top: 0; right: 0; border-top-width: 10px; border-right-width: 10px; }
.tb-h3 { bottom: 0; left: 0; border-bottom-width: 10px; border-left-width: 10px; }
.tb-h4 { bottom: 0; right: 0; border-bottom-width: 10px; border-right-width: 10px; }

/* de inhoud, binnen de veilige zone */
.tb-binnen { position: absolute; top: 12.5%; bottom: 12.5%; left: 11.5%; right: 11.5%; display: grid;
  grid-template-columns: 1.2fr .8fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "kop kop kop" "kleur vorm meet" "tekst tekst beweeg"; grid-gap: calc(var(--u) * 2.2) calc(var(--u) * 2.4); align-content: center; }
.tb-kop { grid-area: kop; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; grid-gap: calc(var(--u) * 2.4); }
.tb-logo { display: block; height: calc(var(--u) * 5.2); width: auto; }
.tb-titel { font: 800 calc(var(--u) * 4.2)/1 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; letter-spacing: -.02em; }
.tb-punt { color: var(--oranje); }
.tb-res { text-align: right; }
.tb-res-getal { display: block; font: 800 calc(var(--u) * 6.4)/.95 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; letter-spacing: -.02em; color: var(--messing); white-space: nowrap; }
.tb-res-sub { display: block; margin-top: calc(var(--u) * .6); font-size: calc(var(--u) * 1.6); color: rgba(255, 241, 220, .78); max-width: calc(var(--u) * 60); }

.tb-vak { min-width: 0; min-height: 0; padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8); border-radius: calc(var(--u) * 2) calc(var(--u) * .8) calc(var(--u) * 2) calc(var(--u) * .8);
  background: rgba(255, 241, 220, .05); border: 1px solid rgba(227, 166, 59, .3); transition: opacity .3s; }
.tb-vak h2 { margin-bottom: calc(var(--u) * 1.1); font-size: calc(var(--u) * 1.7); font-weight: 800; color: var(--messing); }
.tb-kleur { grid-area: kleur; display: flex; flex-direction: column; }
.tb-kleur .tb-balken { flex: 1 1 auto; min-height: calc(var(--u) * 9); } .tb-vorm { grid-area: vorm; display: flex; flex-direction: column; } .tb-meet { grid-area: meet; } .tb-tekst { grid-area: tekst; } .tb-beweeg { grid-area: beweeg; }

/* kleurbalken en grijsstappen */
.tb-balken { display: grid; grid-template-columns: repeat(7, 1fr); height: calc(var(--u) * 9); border-radius: calc(var(--u) * .8); overflow: hidden; }
.tb-balken i { position: relative; font-style: normal; }
.tb-balken span { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * .6); text-align: center; font-size: calc(var(--u) * 1.35); font-weight: 800; color: var(--zwart); }
.tb-b1 { background: var(--oranje); } .tb-b2 { background: var(--blauw); } .tb-b3 { background: var(--messing); } .tb-b4 { background: var(--schuim); }
.tb-b5 { background: var(--roze); } .tb-b6 { background: var(--paars); } .tb-b7 { background: var(--groen); }
.tb-b2 span, .tb-b6 span, .tb-b7 span { color: #fff; }
.tb-grijs { display: grid; grid-template-columns: repeat(11, 1fr); height: calc(var(--u) * 4.4); margin-top: calc(var(--u) * 1); border-radius: calc(var(--u) * .8); overflow: hidden; }
.tb-grijs i { display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(var(--u) * .4); font-style: normal; font-size: calc(var(--u) * 1.3); font-weight: 700; }
.tb-grijs i:nth-child(1) { background: #000; color: #888; } .tb-grijs i:nth-child(2) { background: #1a1a1a; color: #999; } .tb-grijs i:nth-child(3) { background: #333; color: #aaa; }
.tb-grijs i:nth-child(4) { background: #4d4d4d; color: #ccc; } .tb-grijs i:nth-child(5) { background: #666; color: #ddd; } .tb-grijs i:nth-child(6) { background: #808080; color: #fff; }
.tb-grijs i:nth-child(7) { background: #999; color: #111; } .tb-grijs i:nth-child(8) { background: #b3b3b3; color: #222; } .tb-grijs i:nth-child(9) { background: #ccc; color: #333; }
.tb-grijs i:nth-child(10) { background: #e6e6e6; color: #444; } .tb-grijs i:nth-child(11) { background: #fff; color: #555; }
.tb-zwartrij { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; grid-gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1.1); }
.tb-zwart { display: grid; grid-template-columns: repeat(4, calc(var(--u) * 3.4)); height: calc(var(--u) * 3.4); padding: calc(var(--u) * .5); background: #000; border-radius: calc(var(--u) * .6); }
.tb-zwart i:nth-child(1) { background: #000; } .tb-zwart i:nth-child(2) { background: #0a0a0a; } .tb-zwart i:nth-child(3) { background: #151515; } .tb-zwart i:nth-child(4) { background: #212121; }
.tb-zwartrij p, .tb-uitleg { font-size: calc(var(--u) * 1.55); color: rgba(255, 241, 220, .82); }

/* rond en vierkant (even groot: klopt de verhouding, dan past de cirkel precies in het vierkant) */
.tb-vormen { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.tb-cirkel, .tb-vierkant { display: block; width: calc(var(--u) * 14); height: calc(var(--u) * 14); flex: none; }
.tb-cirkel { border-radius: 50%; border: calc(var(--u) * .9) solid var(--oranje); background: radial-gradient(circle, rgba(255, 75, 15, .18) 0 30%, transparent 31%); }
.tb-vierkant { margin-left: calc(var(--u) * 2.2); border: calc(var(--u) * .9) solid var(--blauw);
  background: linear-gradient(45deg, transparent calc(50% - 1px), rgba(18, 99, 255, .7) 50%, transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), rgba(18, 99, 255, .7) 50%, transparent calc(50% + 1px)); }
.tb-vorm .tb-uitleg { margin-top: calc(var(--u) * 1); text-align: center; }

/* metingen */
.tb-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-gap: calc(var(--u) * .55) calc(var(--u) * 1.4); font-size: calc(var(--u) * 1.65); }
.tb-dl dt { color: rgba(255, 241, 220, .7); }
.tb-dl dd { font-weight: 700; text-align: right; }

/* tekst in de maten van de quiz (vh, zoals het quizscherm) */
.tb-t-vraag { font: 800 6vh/1.08 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; letter-spacing: -.01em; }
.tb-t-antw { display: flex; align-items: center; margin-top: 1vh; font-size: 3.2vh; font-weight: 600; }
.tb-t-antw b { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; margin-right: .5em; border-radius: 50%; background: var(--blauw); color: #fff; font-size: .8em; }
.tb-t-klein { margin-top: 1vh; font-size: 2.4vh; color: rgba(255, 241, 220, .9); }

/* beweging: een bal heen en weer (alleen transform: licht, ook op een Chromecast) */
.tb-baan { position: relative; height: calc(var(--u) * 5.4); border-radius: 99px; background: rgba(255, 241, 220, .07); border: 1px solid rgba(255, 241, 220, .16); overflow: hidden; }
.tb-loper { position: absolute; top: calc(var(--u) * .4); left: calc(var(--u) * .4); width: calc(100% - var(--u) * 5.4); height: calc(var(--u) * 4.6);
  animation: tb-heen 2.2s ease-in-out infinite alternate; will-change: transform; }
.tb-bal { display: block; width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); border-radius: 50%; background: var(--oranje); box-shadow: 0 0 0 calc(var(--u) * .5) rgba(255, 75, 15, .25); }
@keyframes tb-heen { from { transform: translateX(0); } to { transform: translateX(100%); } }
.tb-fps { display: flex; align-items: baseline; margin-top: calc(var(--u) * 1.2); }
.tb-fps-getal { flex: none; margin-right: calc(var(--u) * 1); font: 800 calc(var(--u) * 5)/1 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; color: var(--messing); min-width: 2ch; }
.tb-fps-sub { font-size: calc(var(--u) * 1.55); color: rgba(255, 241, 220, .82); }
.tb-rustig .tb-loper { animation: none; transform: translateX(50%); }
@media (prefers-reduced-motion: reduce) { .tb-loper { animation: none; transform: translateX(50%); } .tb-vak { transition: none; } }

/* de laptop wijst iets aan: de rest wordt stiller */
.testbeeld[data-wijs] .tb-vak, .testbeeld[data-wijs] .tb-kop { opacity: .28; }
.testbeeld[data-wijs] .tb-vak.tb-aandacht { opacity: 1; border: calc(var(--u) * .45) solid var(--messing); background: rgba(227, 166, 59, .1); }
.testbeeld[data-wijs="kaders"] .tb-klabel { font-size: calc(var(--u) * 2.1); }

/* melding midden in beeld (welk geluid, of: let op, zo komt er geluid) */
.tb-melding { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: calc(var(--u) * 70); max-width: 80%; z-index: 3; text-align: center;
  padding: calc(var(--u) * 3.4) calc(var(--u) * 5); border-radius: calc(var(--u) * 3) calc(var(--u) * 1.2) calc(var(--u) * 3) calc(var(--u) * 1.2);
  background: var(--zwart); border: calc(var(--u) * .5) solid var(--blauw); box-shadow: 0 0 0 100vmax rgba(19, 13, 9, .55); }
.tb-melding[hidden] { display: none; }
.tb-m-kop { font: 800 calc(var(--u) * 8)/1 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; letter-spacing: -.02em; }
.tb-m-sub { margin-top: calc(var(--u) * 1.6) !important; font-size: calc(var(--u) * 3); color: rgba(255, 241, 220, .9); }
.tb-m-let { border-color: var(--messing); } .tb-m-let .tb-m-kop { color: var(--messing); font-size: calc(var(--u) * 6.4); }
.tb-m-links .tb-m-kop::before { content: '\25C0  '; color: var(--oranje); }
.tb-m-rechts .tb-m-kop::after { content: '  \25B6'; color: var(--oranje); }
.tb-m-links { left: 30%; } .tb-m-rechts { left: 70%; }

/* losse pagina: knoppen onderaan (verdwijnen als de muis stilstaat) en de volumevraag */
.tb-bediening { position: absolute; left: 50%; bottom: 1.2%; transform: translateX(-50%); z-index: 4; display: flex; flex-wrap: nowrap; white-space: nowrap; justify-content: center; transition: opacity .4s; }
.tb-bediening button, .tb-bediening a, .tb-dlg-knoppen button { margin: 3px; padding: 8px 13px; min-height: 40px; border-radius: 12px; border: 2px solid rgba(255, 241, 220, .4); background: rgba(19, 13, 9, .92);
  color: var(--schuim); font: 700 15px/1.1 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.tb-bediening button:hover, .tb-bediening a:hover { border-color: var(--messing); }
.tb-bediening button:focus-visible, .tb-bediening a:focus-visible, .tb-dlg-knoppen button:focus-visible { outline: 3px solid var(--messing); outline-offset: 2px; }
.tb-stil .tb-bediening { opacity: 0; pointer-events: none; }
.tb-stil { cursor: none; }
.tb-dialoog { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(19, 13, 9, .78); }
.tb-dialoog[hidden] { display: none; }
.tb-dlg-kaart { max-width: 640px; padding: 28px 30px; border-radius: 28px 12px 28px 12px; background: var(--zwart); border: 3px solid var(--messing); }
.tb-dlg-kop { font: 800 34px/1.05 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; color: var(--messing); }
.tb-dlg-tekst { margin-top: 12px !important; font-size: 18px; line-height: 1.45; }
.tb-dlg-knoppen { display: flex; flex-wrap: wrap; margin: 18px -4px 0; }
.tb-dlg-ja { background: var(--oranje) !important; border-color: var(--oranje) !important; color: var(--zwart) !important; }

/* 4:3 en 16:10: wat groter en zonder lege middenrij */
@media (max-aspect-ratio: 3/2) and (min-aspect-ratio: 1/1) {
  @supports (width: min(1px, 2px)) { .testbeeld { --u: min(1vh, .66vw); } }
  .tb-binnen { grid-template-rows: auto auto auto; }
  .tb-cirkel, .tb-vierkant { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
  .tb-vierkant { margin-left: calc(var(--u) * 1.4); }
}

/* smal en staand (telefoon): onder elkaar en scrollen in plaats van alles in één beeld */
@media (max-aspect-ratio: 1/1) {
  .testbeeld { overflow-y: auto; --u: 1.05vw; }
  .tb-binnen { position: relative; top: auto; bottom: auto; left: auto; right: auto; margin: 12vw 7vw 22vw; grid-template-columns: 1fr; grid-template-rows: none;
    grid-template-areas: "kop" "kleur" "vorm" "meet" "tekst" "beweeg"; --u: 2.2vw; }
  .tb-kop { grid-template-columns: 1fr; text-align: center; } .tb-logo { margin: 0 auto; } .tb-res { text-align: center; } .tb-res-sub { max-width: none; }
  .tb-kader, .tb-raster { position: fixed; }
  .tb-t-vraag { font-size: 7vw; } .tb-t-antw { font-size: 4.6vw; } .tb-t-klein { font-size: 3.6vw; }
  .tb-bediening { position: fixed; flex-wrap: wrap; width: 94vw; white-space: normal; }
}
.tb-body { margin: 0; background: #130D09; color: #FFF1DC; }
/* de intro- of finale-show tijdens de test: over het testbeeld heen, zoals op de quizavond */
.tb-show { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; background: #0b0705; object-fit: contain; }