/* ====================================================================
   PC Bouwer - opmaak
   Eén stylesheet voor de hele app. Kleuren staan bovenaan als variabelen.
   ==================================================================== */

:root {
    --achtergrond: #0f1720;
    --paneel:      #172431;
    --paneel-licht:#1f3040;
    --rand:        #2b3f52;
    --tekst:       #e8eef4;
    --tekst-zacht: #9fb3c4;
    --accent:      #2f9e6b;
    --accent-fel:  #3fc98a;
    --fout:        #d05b5b;
    --waarschuw:   #d9a13b;
    --blauw:       #4a8fd4;
    --radius:      10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--achtergrond);
    color: var(--tekst);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

a { color: var(--accent-fel); }

h1 { font-size: 1.7rem; margin: 0 0 .4rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; }
h3 { font-size: 1rem; margin: 0 0 .4rem; }

.lead { color: var(--tekst-zacht); max-width: 70ch; }
.hintje { color: var(--tekst-zacht); font-size: .85rem; font-weight: normal; }

/* ------------------------------ kop ------------------------------ */
.kop {
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    padding: .8rem 1.4rem;
    background: var(--paneel);
    border-bottom: 1px solid var(--rand);
}
.logo {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 700; color: var(--tekst); text-decoration: none;
}
.logo-blok {
    width: 18px; height: 18px; border-radius: 4px;
    background: linear-gradient(135deg, var(--accent-fel), var(--blauw));
}
.menu { display: flex; gap: .3rem; flex-wrap: wrap; margin-right: auto; }
.menu a {
    color: var(--tekst-zacht); text-decoration: none;
    padding: .35rem .7rem; border-radius: 6px; font-size: .92rem;
}
.menu a:hover { background: var(--paneel-licht); color: var(--tekst); }
.menu a.actief { background: var(--paneel-licht); color: var(--tekst); }
.gebruiker { display: flex; align-items: center; gap: .7rem; font-size: .9rem; color: var(--tekst-zacht); }

.inhoud { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.2rem 3rem; }
.voet {
    text-align: center; color: var(--tekst-zacht);
    font-size: .82rem; padding: 1.2rem; border-top: 1px solid var(--rand);
}

/* ---------------------------- knoppen ---------------------------- */
.knop {
    display: inline-block; border: 0; cursor: pointer;
    background: var(--accent); color: #fff;
    padding: .6rem 1.1rem; border-radius: 8px;
    font-size: .95rem; font-weight: 600; text-decoration: none;
    font-family: inherit;
}
.knop:hover { background: var(--accent-fel); }
.knop.grijs { background: var(--paneel-licht); color: var(--tekst); border: 1px solid var(--rand); }
.knop.grijs:hover { background: var(--rand); }
.knop.klein { padding: .35rem .7rem; font-size: .85rem; }
.knoppenrij { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }

/* -------------------------- meldingen ---------------------------- */
.melding {
    padding: .7rem .9rem; border-radius: 8px; margin: .8rem 0;
    border-left: 4px solid var(--rand); background: var(--paneel);
}
.melding.fout { border-left-color: var(--fout); }
.melding.goed { border-left-color: var(--accent-fel); }
.melding.info { border-left-color: var(--blauw); }
ul.melding { list-style: none; padding-left: 1.2rem; }
ul.melding li { margin: .2rem 0; }

/* -------------------------- formulieren -------------------------- */
.formulierkaart {
    max-width: 440px; margin: 2rem auto;
    background: var(--paneel); border: 1px solid var(--rand);
    border-radius: var(--radius); padding: 1.6rem;
}
label { display: block; margin: .9rem 0 0; font-size: .9rem; font-weight: 600; }
input[type=text], input[type=password], select {
    width: 100%; margin-top: .3rem;
    padding: .55rem .7rem; font-size: 1rem; font-family: inherit;
    background: var(--achtergrond); color: var(--tekst);
    border: 1px solid var(--rand); border-radius: 7px;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.formulierkaart .knop { margin-top: 1.2rem; width: 100%; }
.onderregel { margin-top: 1.2rem; font-size: .9rem; color: var(--tekst-zacht); }
.filterbalk {
    display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;
    background: var(--paneel); border: 1px solid var(--rand);
    border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem;
}
.filterbalk label { margin: 0; }
.filterbalk select { min-width: 190px; }

/* --------------------------- welkom ------------------------------ */
.welkom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; margin-top: 1rem; }
.uitlegkaarten { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.uitlegkaarten li {
    background: var(--paneel); border: 1px solid var(--rand);
    border-radius: var(--radius); padding: .9rem 1rem;
    display: flex; flex-direction: column; gap: .2rem;
}
.uitlegkaarten span { color: var(--tekst-zacht); font-size: .9rem; }

/* --------------------------- niveaus ----------------------------- */
.niveaus { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.niveaukaart {
    background: var(--paneel); border: 1px solid var(--rand);
    border-radius: var(--radius); padding: 1.1rem; display: flex; flex-direction: column;
}
.niveaukaart.op-slot { opacity: .6; }
.niveaukaart header { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.niveaukaart h2 { margin: 0; font-size: 1.05rem; }
.badge {
    background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
    padding: .18rem .5rem; border-radius: 99px; white-space: nowrap;
}
.rang2 .badge { background: var(--waarschuw); }
.rang3 .badge { background: var(--fout); }
.kenmerken { list-style: none; padding: 0; margin: .8rem 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.kenmerken li {
    background: var(--paneel-licht); border: 1px solid var(--rand);
    border-radius: 6px; padding: .18rem .5rem; font-size: .78rem; color: var(--tekst-zacht);
}
.scoreregel { margin: .3rem 0 .8rem; font-size: .92rem; }
.niveaukaart form { margin-top: auto; }

/* --------------------------- tabellen ---------------------------- */
.tabel {
    width: 100%; border-collapse: collapse; margin-top: .6rem;
    background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--radius);
    overflow: hidden; font-size: .92rem;
}
.tabel th, .tabel td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--rand); }
.tabel th { background: var(--paneel-licht); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tekst-zacht); }
.tabel tr:last-child td { border-bottom: 0; }
.tabel td.metico { display: flex; align-items: center; gap: .5rem; }
.tabel td.metico .ico { width: 34px; height: 24px; flex: none; }
.tabel td.metico { gap: .6rem; }
.ranglijst .plaats { font-weight: 700; width: 3rem; }

/* Een brede tabel (het docentenpaneel heeft er een met negen kolommen) mag
   zelf zijwaarts schuiven. Zonder deze omhulling schuift de hele pagina mee
   zodra het venster smaller is dan de tabel, bijvoorbeeld op een tablet. */
.tabelbox { overflow-x: auto; }
.tabelbox > .tabel { margin-top: .6rem; }
.ranglijst tr.ikzelf { background: rgba(63, 201, 138, .12); }

.label { font-size: .76rem; padding: .16rem .45rem; border-radius: 5px; white-space: nowrap; }
.label.goed { background: rgba(63,201,138,.18); color: var(--accent-fel); }
.label.bijna { background: rgba(217,161,59,.18); color: var(--waarschuw); }
.label.fout { background: rgba(208,91,91,.18); color: var(--fout); }
.label.leeg { background: var(--paneel-licht); color: var(--tekst-zacht); }

/* -------------------- eigen resultaten --------------------------- */
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.kaart-stat { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem; }
.kaart-stat p { margin: .3rem 0; font-size: .9rem; }
.balk { height: 9px; background: var(--paneel-licht); border-radius: 99px; overflow: hidden; margin: .5rem 0; }
.balk span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-fel)); }

.resultaatkop {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem;
    background: var(--paneel); border: 1px solid var(--rand);
    border-left: 5px solid var(--accent); border-radius: var(--radius);
    padding: 1.3rem; margin-bottom: 1rem;
}
.resultaatkop.onaf { border-left-color: var(--waarschuw); }
.resultaatkop h1 { font-size: 2.4rem; }
.resultaatkop h1 span { font-size: 1rem; color: var(--tekst-zacht); font-weight: normal; }
.opbouw { list-style: none; margin: 0; padding: 0; }
.opbouw li {
    display: grid; grid-template-columns: 1fr auto; align-items: baseline;
    gap: .4rem; padding: .35rem 0; border-bottom: 1px dashed var(--rand);
}
.opbouw small { grid-column: 1 / -1; color: var(--tekst-zacht); font-size: .78rem; }

/* ------------------------- onderdelen ---------------------------- */
.onderdeellijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem; }
.onderdeelkaart { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem; }
.onderdeelkaart h2 { font-size: 1rem; margin: .5rem 0 .1rem; }
.onderdeelkaart p { font-size: .9rem; margin: .3rem 0; }
.onderdeelkaart .categorie { color: var(--accent-fel); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.ico-groot { background: var(--paneel-licht); border-radius: 8px; padding: .6rem; }
.ico-groot .ico { width: 100%; height: 70px; }

/* --------------------------- het spel ---------------------------- */
.spelkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.tellers { display: flex; gap: .6rem; }
.teller {
    background: var(--paneel); border: 1px solid var(--rand); border-radius: 8px;
    padding: .4rem .8rem; text-align: center; min-width: 74px;
}
.teller span { display: block; font-size: .7rem; text-transform: uppercase; color: var(--tekst-zacht); letter-spacing: .04em; }
.teller strong { font-size: 1.25rem; }
#tTijd.bijna { color: var(--fout); }

/* De linkerkolom is standaard zo breed als er ruimte is. Ligt er een staande
   kastfoto onder, dan zet spel.php --bord-max en blijft het bord smal genoeg
   om met de onderdelenlijst op een laptopscherm te passen. */
.spelveld {
    display: grid;
    grid-template-columns: minmax(0, var(--bord-max, 1fr)) 320px;
    justify-content: center;
    gap: 1rem; margin-top: 1rem; align-items: start;
}

.kast {
    position: relative;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 8px, transparent 8px 16px),
        var(--paneel);
    border: 2px solid var(--rand); border-radius: var(--radius);
    overflow: hidden;
}
/* Hoogte van de kast: dezelfde verhouding als de achtergrond. spel.php leest
   die uit de afbeelding en zet --bord-verhouding; 66% is de oude tekening.
   Met een ::before in plaats van aspect-ratio, zodat het ook in oudere
   browsers werkt. */
.kast::before { content: ""; display: block; padding-top: var(--bord-verhouding, 66%); }
.kastrand {
    position: absolute; top: 1.5%; right: 1.5%; bottom: 1.5%; left: 1.5%;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 6px; pointer-events: none;
}

.plek {
    position: absolute;
    border: 1px dashed var(--rand);
    border-radius: 6px;
    background: rgba(255,255,255,.02);
    display: flex; align-items: center; justify-content: center;
    padding: 2px; overflow: hidden; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.plek .plek-label {
    font-size: .68rem; color: var(--tekst-zacht); text-align: center;
    line-height: 1.15; padding: 2px; pointer-events: none;
}
.plek.staand .plek-label { writing-mode: vertical-rl; }
.plek.op-mb { border-color: #37604a; background: rgba(47,158,107,.06); }
.plek.kandidaat { border-color: rgba(63,201,138,.45); background: rgba(255,255,255,.04); }
.plek.boven { border-style: solid; border-color: var(--accent-fel); background: rgba(63,201,138,.22); }
.plek.hint { animation: knipper 0.6s ease-in-out 4; border-color: var(--waarschuw); }
.plek.mis { animation: schud .4s; border-color: var(--fout); background: rgba(208,91,91,.2); }
.plek.gevuld { border-style: solid; border-color: var(--accent); background: rgba(47,158,107,.12); }
.plek.gevuld .plek-label { display: none; }
.plek.gevuld.met-naam .plek-label {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    font-size: .62rem; color: var(--tekst); text-align: center; line-height: 1.15;
    background: rgba(15, 23, 32, .78); padding: 1px 2px;
}
.plek.verborgen { opacity: 0; pointer-events: none; }
.plek:focus-visible, .kaart:focus-visible { outline: 2px solid var(--accent-fel); outline-offset: 2px; }
#kast .plek[data-code="koeler_plek"] { z-index: 3; }
#kast .plek[data-code="moederbord_plek"] { z-index: 0; }
/* Het geplaatste moederbord is de ondergrond voor de rest: rustig houden. */
#kast .plek[data-code="moederbord_plek"] .kaart.in-plek .ico { opacity: .45; }
/* Het moederbord is de ondergrond voor alle andere onderdelen: extra rustig. */
#kast .plek[data-code="moederbord_plek"] .kaart.in-plek .foto {
    opacity: .45; filter: grayscale(1) brightness(.55) contrast(1.05);
}
#kast .plek[data-code="moederbord_plek"].gevuld { background: rgba(47,158,107,.18); }

@keyframes knipper { 50% { background: rgba(217,161,59,.35); } }
@keyframes schud {
    25% { transform: translateX(-4px); } 50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}

.zijkant { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem; }
.zijkant h2 { margin: 0 0 .6rem; font-size: 1rem; }
.bak {
    display: grid; gap: .45rem; max-height: 46vh; overflow-y: auto;
    padding: .3rem; background: var(--achtergrond);
    border: 1px dashed var(--rand); border-radius: 8px; min-height: 90px;
}

.kaart {
    display: flex; align-items: center; gap: .55rem;
    background: var(--paneel-licht); border: 1px solid var(--rand);
    border-radius: 8px; padding: .4rem .5rem;
    cursor: grab; user-select: none;
    /* pan-y: een verticale veeg scrolt gewoon de pagina of de lijst, een
       zijwaartse beweging begint een sleepactie. Tikken werkt altijd. */
    touch-action: pan-y;
}
.kaart:hover { border-color: var(--accent); }
.kaart.gekozen { border-color: var(--accent-fel); box-shadow: 0 0 0 2px rgba(63,201,138,.3); }
.kaart-ico { flex: none; width: 78px; height: 56px; display: block; }
.kaart .ico { width: 100%; height: 100%; }
.kaart.in-plek .ico { background: transparent; }
.kaart-tekst { display: flex; flex-direction: column; min-width: 0; }
.kaart-tekst strong { font-size: .88rem; overflow-wrap: break-word; }
.kaart-tekst small { font-size: .72rem; color: var(--tekst-zacht); line-height: 1.25; overflow-wrap: break-word; }
.kaart.wordt-gesleept { opacity: .35; }
.kaart.spook {
    position: fixed; z-index: 999; pointer-events: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.5); transform: rotate(-2deg);
}
.kaart.in-plek {
    width: 100%; height: 100%; padding: 1px; gap: 0;
    background: transparent; border: 0; cursor: pointer;
    flex-direction: column; justify-content: center;
}
.kaart.in-plek .kaart-tekst { display: none; }
.kaart.in-plek .kaart-ico { width: 100%; height: 100%; }
.plek.staand .kaart.in-plek .kaart-ico { transform: rotate(90deg); }

.paneel {
    margin: .8rem 0; padding: .7rem .8rem;
    background: var(--achtergrond); border: 1px solid var(--rand); border-radius: 8px;
    min-height: 74px;
}
.paneel p { margin: 0; font-size: .86rem; color: var(--tekst-zacht); }

/* ------------------------- foto's van onderdelen ------------------- */
/* Staat er een foto in assets/foto/, dan komt die in plaats van de tekening. */
/* Echte foto's. Ze komen allemaal op hetzelfde formaat binnen (7:5), zodat
   de kaartjes even groot zijn en het rustig oogt. */
.foto {
    display: block; width: 100%; height: 100%;
    object-fit: cover; border-radius: 5px;
    background: #0d141b;
}
.kaart .foto {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
    /* De kaart vangt zelf alle muis- en tikacties op; de foto mag niet in de
       weg zitten en mag ook niet door de browser zelf versleept worden. */
    pointer-events: none;
    -webkit-user-drag: none;
}
.foto, .ico { -webkit-user-drag: none; user-select: none; }

/* Omhulling om elke foto, met de tekening als reserve. Lukt het laden van de
   foto niet (geen internet in het lokaal, beeldbank onbereikbaar), dan zet
   onerror de klasse 'geen-foto' en neemt de tekening het over. */
.beeld { display: block; }
.beeld .reserve { display: none; }
.beeld .reserve .ico { width: 100%; height: 100%; }
.beeld.geen-foto .foto { display: none; }
.beeld.geen-foto .reserve { display: block; }
.kaart-ico .beeld, .kaart-ico .beeld .reserve { height: 100%; }
.ico-groot .beeld .reserve { height: 132px; }
.tabel td.metico .beeld { flex: none; }
.tabel td.metico .beeld .reserve { width: 44px; height: 30px; }
/* Een geplaatste foto gaat naar grijstinten. De foto's komen van verschillende
   fotografen met een felgele, witte of grijze achtergrond; in kleur wordt het
   bord daar een lappendeken van. In grijs zie je het onderdeel nog net zo goed,
   maar hoort alles bij elkaar en blijven de plekken en labels leesbaar.
   De kleur zit waar je hem nodig hebt: in de onderdelenlijst, bij het herkennen. */
.kaart.in-plek .foto {
    border-radius: 3px;
    filter: grayscale(1) brightness(.75) contrast(1.08);
}
.ico-groot .foto { height: 132px; border-radius: 7px; }
.tabel td.metico .foto { width: 44px; height: 30px; flex: none; }

/* Kast met een echte foto als ondergrond */
/* Speelveld met de getekende binnenkant van een kast als achtergrond. */
.kast.met-tekening {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-color: #35465a;
}
.kast.met-tekening .kastrand { display: none; }
.kast.met-tekening .plek {
    border-color: rgba(255,255,255,.3);
    background: rgba(9, 14, 20, .32);
}
.kast.met-tekening .plek .plek-label { color: #dfe8f0; text-shadow: 0 1px 2px rgba(0,0,0,.85); }
.kast.met-tekening .plek.kandidaat { border-color: rgba(63,201,138,.7); background: rgba(63,201,138,.16); }
.kast.met-tekening .plek.gevuld { background: rgba(47,158,107,.18); }

.kast.met-foto {
    /* De foto is al op maat gesneden: precies uitrekken houdt de plekken op hun
       plaats. Met 'cover' zou een foto met een andere verhouding worden
       afgesneden en zouden de plekken verschuiven. */
    background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
}
.kast.met-foto .kastrand { display: none; }
.kast.met-foto .plek {
    background: rgba(10, 16, 22, .45);
    border-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(1px);
}
.kast.met-foto .plek .plek-label { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.kast.met-foto .plek.gevuld { background: rgba(47, 158, 107, .25); }
.kast.met-foto .plek.kandidaat { background: rgba(63, 201, 138, .18); }

/* SVG-onderdelen: de kleurklassen */
.ico { display: block; background: #16202b; border-radius: 5px; }
.s-etiket { stroke: #8fa3b5; stroke-width: 1.2; stroke-linecap: round; fill: none; }
.f-groen  { fill: #2f6b4a; } .f-groenfel { fill: #3fc98a; }
.f-grijs  { fill: #97a7b5; } .f-donker   { fill: #2b3947; }
.f-licht  { fill: #d5dee6; } .f-roze     { fill: #d98ba8; }
.f-blauw  { fill: #4a8fd4; }
.s-pin    { stroke: #c9a227; stroke-width: 1.4; fill: none; }
.s-goud   { stroke: #c9a227; stroke-width: 2.4; fill: none; }
.s-goudvlak { fill: #c9a227; }
.s-kabel  { stroke: #6b7b8a; stroke-width: 2; fill: none; }
.s-kabeldik { stroke: #6b7b8a; stroke-width: 3.5; fill: none; }
.s-blad   { stroke: #2b3947; stroke-width: 2.4; fill: none; }
.s-arm    { stroke: #2b3947; stroke-width: 2; fill: none; }

/* ----------------------------- quiz ------------------------------ */
.quiz { display: grid; gap: 1rem; max-width: 720px; }
.vraag { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem; }
.vraag legend { font-size: .78rem; text-transform: uppercase; color: var(--tekst-zacht); letter-spacing: .05em; }
.vraagtekst { margin: .2rem 0 .8rem; font-weight: 600; }
.optie { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; font-weight: normal; cursor: pointer; }
.optie input { width: auto; margin: 0; }

/* --------------------------- responsief -------------------------- */
@media (max-width: 950px) {
    .spelveld { grid-template-columns: 1fr; }
    .welkom, .resultaatkop { grid-template-columns: 1fr; }
    .bak { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: none; }
    .kop { gap: .6rem; }
    .inhoud { padding: 1rem .8rem 2.5rem; }
}
@media (max-width: 700px) {
    /* Op een telefoon de kast wat hoger maken: de vakjes worden dan groter. */
    .kast::before { padding-top: 100%; }
    /* Ligt er een tekening of foto onder, dan blijft de eigen verhouding staan:
       die zou anders uitgerekt worden tot een vierkant. De plekken schalen
       met de breedte mee en blijven ook zo goed aan te tikken. */
    .kast.met-tekening::before, .kast.met-foto::before { padding-top: var(--bord-verhouding, 66%); }
    /* De vakjes zijn op een telefoon smaller. Met kleinere letters past een
       label als "Processorvoet (socket)" er nog helemaal in, in plaats van
       links en rechts afgesneden te worden. */
    .plek .plek-label { font-size: .54rem; padding: 1px; min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
    .tellers { width: 100%; justify-content: space-between; }
    .teller { min-width: 0; flex: 1; }
    .tabel { font-size: .82rem; }
    /* Twee kolommen onderdelen naast elkaar laten op een telefoon te weinig
       ruimte over voor de naam en de functie. Een kaart per rij leest beter
       en is met een duim makkelijker te raken. */
    .bak { grid-template-columns: 1fr; }
}

/* ====================================================================
   Modus "Storing zoeken": de werkplaats
   ==================================================================== */

.werkplaats {
    display: grid;
    grid-template-columns: 210px minmax(0, var(--bord-max, 1fr)) 320px;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    align-items: start;
}

/* het gereedschapsmenu, net als in een echte werkplaats aan de linkerkant */
.gereedschap { display: flex; flex-direction: column; gap: .35rem; }
.ger {
    display: flex; align-items: center; gap: .55rem;
    padding: .6rem .7rem;
    background: var(--paneel); color: var(--tekst);
    border: 1px solid var(--rand); border-radius: var(--radius);
    font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}
.ger:hover { border-color: var(--accent); background: var(--paneel-licht); }
.ger:focus-visible { outline: 2px solid var(--accent-fel); outline-offset: 2px; }
.ger-ico {
    flex: none; width: 24px; height: 24px; line-height: 24px; text-align: center;
    border-radius: 6px; background: var(--paneel-licht); font-size: .95rem;
}
#gerStart { border-color: var(--accent); }
#gerStart .ger-ico { background: var(--accent); color: #fff; }

/* het gekozen onderdeel in de kast */
.plek.gekozen { border-color: var(--accent-fel); box-shadow: 0 0 0 2px rgba(63,201,138,.45); }

.paneel.klacht p { color: var(--tekst); }
.klachttekst { font-size: .88rem; color: var(--tekst-zacht); }
.werkbontekst {
    background: var(--paneel); border: 1px solid var(--rand);
    border-radius: var(--radius); padding: .8rem 1rem; font-size: .92rem;
}
.labelrij { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 .8rem; }
.knoppenrij.smal { gap: .35rem; flex-wrap: wrap; }

.paneel.logboek ol {
    margin: .4rem 0 0; padding-left: 1.1rem;
    max-height: 190px; overflow-y: auto;
    font-size: .82rem; color: var(--tekst-zacht);
}
.paneel.logboek li { margin: .15rem 0; }
.paneel.logboek li.leeg { list-style: none; margin-left: -1.1rem; }

/* de zwevende gereedschapsvensters */
/* De gereedschapsvensters zweven links, over het bord. Rechts kan niet: daar
   staat het paneel met de knoppen van het gekozen onderdeel, en dat mag een
   openstaand venster niet afdekken. Ze zijn bovendien te verslepen aan de
   titelbalk, zodat je ze opzij kunt zetten zonder ze te sluiten. */
.venster {
    position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 40;
    width: min(360px, calc(100vw - 2.4rem));
    background: var(--paneel); border: 1px solid var(--rand);
    border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.venster.breed { width: min(520px, calc(100vw - 2.4rem)); }
.venster > header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .8rem; border-bottom: 1px solid var(--rand);
    cursor: move; user-select: none; touch-action: none;
}
.venster > header .sluit { cursor: pointer; }
.venster > header h3 { margin: 0; font-size: .95rem; }
.venster .sluit {
    background: none; border: 0; color: var(--tekst-zacht);
    font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .2rem;
}
.venster .sluit:hover { color: var(--tekst); }
.venster-inhoud { padding: .8rem; max-height: min(70vh, 560px); overflow-y: auto; }
.venster-inhoud > .hintje:first-child { margin-top: 0; }

.meetknoppen { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .7rem; }
.display {
    background: #0b1219; border: 1px solid var(--rand); border-radius: 8px;
    padding: .7rem; min-height: 90px;
}
.display .leeg { color: var(--tekst-zacht); font-size: .85rem; }
.meetnaam { margin: 0 0 .4rem; font-size: .82rem; color: var(--tekst-zacht); }
.meettabel { width: 100%; border-collapse: collapse; }
.meettabel th {
    text-align: left; font-weight: 500; font-size: .85rem;
    color: var(--tekst-zacht); padding: .2rem 0;
}
.meettabel td {
    text-align: right; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 1.05rem; padding: .2rem 0;
}
.nietgoed { color: var(--waarschuw); font-family: inherit; font-size: .82rem; }

.biosscherm { background: #0b1219; border: 1px solid var(--rand); border-radius: 8px; padding: .7rem; }
.bioskop {
    margin: 0 0 .5rem; padding-bottom: .4rem; border-bottom: 1px solid var(--rand);
    font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-zacht);
}

/* de werkbon */
.veld { display: block; margin-bottom: .7rem; }
.veld > span { display: block; font-size: .85rem; margin-bottom: .25rem; }
.veld select, .veld textarea {
    width: 100%; padding: .45rem .55rem;
    background: var(--achtergrond); color: var(--tekst);
    border: 1px solid var(--rand); border-radius: 8px; font: inherit; font-size: .9rem;
}
.veld textarea { resize: vertical; }
.checklist {
    border: 1px solid var(--rand); border-radius: 8px;
    padding: .5rem .7rem; margin: 0 0 .8rem;
}
.checklist legend { font-size: .82rem; color: var(--tekst-zacht); padding: 0 .3rem; }
.checklist label { display: block; font-size: .88rem; margin: .2rem 0; }

@media (max-width: 1100px) {
    .werkplaats { grid-template-columns: 180px minmax(0, 1fr); }
    .werkplaats .zijkant { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .werkplaats { grid-template-columns: 1fr; }
    .gereedschap { flex-direction: row; flex-wrap: wrap; }
    .ger { flex: 1 1 45%; font-size: .82rem; }
    .venster, .venster.breed {
        left: .6rem !important; right: .6rem; top: auto !important; bottom: .6rem; width: auto;
    }
    .venster > header { cursor: default; }
}

/* Vervangen is de dure uitweg, niet de gewone handeling. De knop krijgt daarom
   de waarschuwkleur en niet het groen van een normale actie. */
.knop.duur {
    background: transparent; color: var(--waarschuw);
    border: 1px solid var(--waarschuw);
}
.knop.duur:hover { background: rgba(217,161,59,.14); }

/* De melding over wat de pc doet staat boven het bord: dat is het antwoord op
   je handeling en moet je niet hoeven zoeken. */
.werkplaats + .melding, .spelkop + .melding { margin-bottom: 0; }