:root{
  --bg:#0c0d10; --panel:#15171c; --line:#252932; --ink:#e8eaf0; --dim:#8b93a5;
  --acc:#ff8a1e; --acc2:#3aa0ff; --ok:#3ddc84;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.45 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column;
}
header{
  display:flex; align-items:center; gap:16px; padding:10px 18px;
  border-bottom:1px solid var(--line); background:#101217;
}
h1{margin:0; font-size:17px; letter-spacing:.02em; font-weight:700}
h1 em{font-style:normal; color:var(--acc)}
.status{font-size:12px; color:var(--dim)}
.status.err{color:#ff6b6b}
.status.ok{color:var(--ok)}
/* taalkeuze NL | EN, rechts in de kopbalk */
.taal{margin-left:auto; flex:none; display:flex; align-items:center; gap:1px; font-size:11px; color:#3a404d}
.taal button{flex:none; padding:3px 7px; border:0; border-radius:5px; background:none; color:var(--dim); font-size:11px; font-weight:600; letter-spacing:.06em}
.taal button:hover{background:#1d2029; color:var(--ink)}
.taal button.on{background:#2f3542; color:#fff}

main{flex:1; display:flex; min-height:0}

.panel{
  width:320px; flex:none; overflow-y:auto; padding:4px 0 40px;
  border-right:1px solid var(--line); background:var(--panel);
}
.panel section{padding:14px 16px; border-bottom:1px solid var(--line)}
.panel section.foot{border:0}
h2{margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); display:flex; align-items:center; gap:8px}
.num{
  width:18px; height:18px; border-radius:50%; background:#272c36; color:var(--ink);
  display:grid; place-items:center; font-size:11px; letter-spacing:0;
}
.row{display:flex; gap:8px; margin-bottom:8px}
button{
  flex:1; padding:8px 10px; border-radius:7px; border:1px solid var(--line);
  background:#1d2029; color:var(--ink); font:inherit; font-size:13px; cursor:pointer;
}
button:hover{background:#262a35}
button.primary{background:var(--acc); border-color:var(--acc); color:#1a1000; font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button:disabled{opacity:.45; cursor:default}
select{width:100%; margin-bottom:8px; padding:7px; border-radius:7px; background:#1d2029; color:var(--ink); border:1px solid var(--line); font:inherit}
.hint{margin:6px 0 0; font-size:12px; color:var(--dim)}
kbd{background:#272c36; border:1px solid #333a47; border-bottom-width:2px; border-radius:4px; padding:0 4px; font-size:11px}
.badge{display:inline-block; margin:8px 0 0; padding:3px 8px; border-radius:99px; background:#2a1f1f; color:#ffab8f; font-size:11px}
.badge.ok{background:#16301f; color:var(--ok)}
.slider{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim); margin-top:8px}
.slider input{flex:1; accent-color:var(--acc)}
.slider output{width:46px; text-align:right; color:var(--ink); font-variant-numeric:tabular-nums}
.check{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim); margin-top:8px}
.check input{accent-color:var(--acc)}

.cls{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.cls .dot{width:14px; height:14px; border-radius:4px; flex:none}
.cls .nm{flex:1; font-size:12px}
.cls .cnt{font-size:11px; color:var(--dim); width:16px; text-align:right; font-variant-numeric:tabular-nums}
.cls button{flex:none; padding:4px 8px; font-size:11px}
.cls button.learning{background:var(--acc); color:#1a1000; border-color:var(--acc)}

.stage{flex:1; display:flex; flex-direction:column; gap:10px; padding:12px; min-width:0}
.pane{flex:1; display:flex; flex-direction:column; min-height:0}
.pane-head{display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px}
.tabs{display:flex; gap:4px}
.tabs button{flex:none; padding:2px 8px; font-size:11px; text-transform:none; letter-spacing:0}
.tabs button.on{background:#2f3542; color:#fff}
.fps{font-variant-numeric:tabular-nums; text-transform:none}
canvas{
  flex:1; min-height:0; width:100%; background:#000; border-radius:10px;
  border:1px solid var(--line); object-fit:contain; display:block;
}
#debug{cursor:crosshair}

/* ---- eenvoudige bediening ---- */
.hidden{display:none !important}
button.big{padding:12px; font-size:15px; font-weight:600}
.quick{background:#181b22}
.camkeuze{display:block; margin-top:10px; font-size:12px; color:var(--dim)}
/* rechts weinig ruimte: zo past ook de langste Engelse keuze naast het pijltje */
.camkeuze select{margin:4px 0 0; padding:7px 2px 7px 6px}
.installeer{margin-top:10px}
input[type=text]{flex:1; min-width:0; padding:7px; border-radius:7px; background:#1d2029; color:var(--ink); border:1px solid var(--line); font:inherit}
.scores{margin:6px 0 8px; padding-left:22px; font-size:13px}
.scores li{padding:2px 0}
.scores li b{color:var(--ink)}
.scores .leeg{list-style:none; margin-left:-22px; color:var(--dim)}
button.klein{font-size:12px; padding:5px 9px}
.steps{list-style:none; margin:12px 0 4px; padding:0; display:flex; flex-direction:column; gap:5px}
.steps li{
  display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim);
  padding-left:22px; position:relative;
}
.steps li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%; border:1.5px solid #333a47;
}
.steps li.on{color:var(--ink)}
.steps li.on::before{background:var(--ok); border-color:var(--ok)}
.steps li.busy{color:var(--acc)}
.steps li.busy::before{border-color:var(--acc); border-top-color:transparent; animation:spin .7s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

.seg{display:flex; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:8px}
.seg button{border:0; border-radius:0; background:#1a1d25; font-size:12px; padding:9px 6px}
.seg button + button{border-left:1px solid var(--line)}
.seg button.on{background:#2f3542; color:#fff; font-weight:600}

details{border-bottom:1px solid var(--line)}
details summary{
  padding:12px 16px; cursor:pointer; font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--dim); list-style:none;
}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"▸ "; }
details[open] summary::before{content:"▾ "; }
details summary:hover{color:var(--ink)}
details section{border-bottom:0; border-top:1px solid var(--line)}
.only-color{text-transform:none; letter-spacing:0; color:#5b6376}
.live{
  margin:10px 0 0; padding:6px 9px; border-radius:6px; background:#1d2029;
  font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums;
}
.live.warn{background:#3a1c1c; color:#ffab8f; font-weight:600}
#world{cursor:grab}
#world:active{cursor:grabbing}
.slider.sub{margin-left:22px; opacity:.75}
.slider.sub.off{opacity:.35; pointer-events:none}
#world{touch-action:none}

/* ---- speelplek: muur + beamer, scherm, of de demo (zie js/speelplek.js en js/main.js) */
/* Wat maar bij één manier van spelen hoort. main.js zet plek-muur, plek-scherm of plek-demo op <body>. */
body:not(.plek-muur) .alleen-muur{display:none !important}
body:not(.plek-scherm) .alleen-scherm{display:none !important}
body:not(.plek-demo) .alleen-demo{display:none !important}
body.plek-demo .alleen-camera{display:none !important}
/* zolang het welkomstkaartje er staat, geen knoppen van een opstelling die nog niet gekozen is,
   en rechts alleen het speelveld (nog geen camera, nog geen beamer) */
body.welkom-open .quick{display:none}
body.welkom-open .pane.alleen-camera{display:none}
body.welkom-open .pane-head .alleen-muur{display:none}
body.welkom-open .pane-head .alleen-demo{display:inline !important}

.welkom{background:#1b1f28; display:flex; flex-direction:column; gap:8px}
.welkom h2{font-size:15px; text-transform:none; letter-spacing:0; color:var(--ink); margin-bottom:4px}
.plekknop{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:11px 12px; border-radius:9px; background:#232835; border-color:#303646}
.plekknop b{font-size:15px; color:#fff}
.plekknop span{font-size:12px; color:var(--dim)}
.plekknop:hover{background:#2b3140; border-color:var(--acc)}
.plekknop.demo{background:#2a2112; border-color:#6b4a17}
.plekknop.demo b{color:var(--acc)}
.plekknop.demo:hover{background:#342914}
.plekkeuze{display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:12px; color:var(--dim)}
.plekkeuze .seg{flex:1; margin:0}
.plekkeuze .seg button{padding:6px 4px}
.camniet{background:#2a1f1f; color:#ffab8f; padding:7px 9px; border-radius:7px}
.camniet a{color:#fff; font-weight:600}

/* het speelscherm, over het hele venster */
body.sv-open{overflow:hidden}
.speelvenster{position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; background:#07080b}
.sv-balk{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:8px 12px; background:#101217; border-bottom:1px solid var(--line)}
.sv-balk button{flex:none; padding:7px 12px}
.sv-naam{font-size:14px; white-space:nowrap}
.sv-status{flex:1 1 120px; min-width:0; font-size:12px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sv-status.err{color:#ff6b6b}
.sv-status.ok{color:var(--ok)}
.sv-icoon{font-size:17px; line-height:1; padding:6px 10px !important}
.sv-veld{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:8px; overflow:hidden}
#svCanvas{flex:none; width:auto; border-radius:8px; touch-action:none; cursor:crosshair}
.sv-voet{padding:8px 12px 12px; background:#101217; border-top:1px solid var(--line)}
.sv-voet .hint{margin:6px 0 0}
.sv-palet{display:flex; flex-wrap:wrap; gap:6px}
.sv-palet button{flex:none; display:flex; align-items:center; gap:6px; padding:6px 10px; font-size:12px}
.sv-palet button.on{background:#2f3542; border-color:#6a7386; color:#fff}
.sv-palet i{display:inline-block; width:12px; height:12px; border-radius:3px}
.sv-cta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:8px; font-size:13px}
.sv-cta button{flex:none; padding:6px 12px}
.sv-voet .row{margin:8px 0 0}

/* laag scherm (een telefoon die ligt): het speelveld krijgt de ruimte. De uitleg valt weg (de
   statusregel bovenin zegt wat er moet), het palet en "Speel echt" staan naast elkaar. */
@media (max-height: 500px){
  .sv-balk{padding:4px 8px}
  .sv-balk button{padding:5px 10px}
  .sv-veld{padding:4px}
  .sv-voet{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; padding:4px 8px 6px}
  .sv-voet > .hint:not(.camniet){display:none}
  .sv-palet button{padding:4px 8px}
  .sv-cta{margin-top:0}
  .sv-cta button{padding:4px 10px}
}

/* smal scherm (telefoon, of een klein ingesloten venster): het paneel boven, het speelveld eronder */
@media (max-width: 760px){
  html,body{height:auto}
  header{flex-wrap:wrap; gap:4px 12px; padding:10px 14px}
  .status{order:3; flex-basis:100%}
  main{flex-direction:column}
  .panel{width:auto; overflow:visible; border-right:0; border-bottom:1px solid var(--line); padding-bottom:8px}
  .stage{padding:10px}
  .pane{flex:none; height:62vw; min-height:190px}
  .sv-balk{padding:6px 8px}
  .sv-status{order:9; flex-basis:100%}
  .sv-veld{padding:4px}
  .sv-voet{padding:6px 8px 10px}
}