:root{
    --navy-top:#1A2744;--navy:#1F3058;--blue-mid:#243A6E;--blue-glow:#2E4D8A;
    --bg-card:#1E3060;--bg-card-2:#243875;
    --orange:#E85A20;--orange-top:#EE6E2E;--orange-bot:#E14E1E;
    --orange-soft:rgba(232,90,32,.14);--orange-border:rgba(232,90,32,.4);
    --dot:rgba(150,190,240,.14);--paper:#EEF3FA;--muted:#9DB0CC;--muted-2:#56689A;
    --sans:"Helvetica Neue",Inter,system-ui,-apple-system,sans-serif;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    --ease:cubic-bezier(.22,.61,.36,1);--ease-move:cubic-bezier(.4,0,.2,1);--ease-overshoot:cubic-bezier(.34,1.56,.64,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;font-family:var(--sans);color:var(--paper);
    background:
      radial-gradient(120% 80% at 80% -10%,var(--blue-glow) 0%,transparent 55%),
      linear-gradient(180deg,var(--navy-top),#13203c 60%,#0e1830);
    background-attachment:fixed;-webkit-font-smoothing:antialiased;overflow:hidden}
  body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:radial-gradient(var(--dot) 1px,transparent 1.5px);background-size:26px 26px;opacity:.5}

  .app{position:fixed;inset:0;z-index:1;display:grid;
    grid-template-rows:auto 1fr auto;grid-template-columns:230px 1fr 270px;
    grid-template-areas:"top top top" "left canvas right" "left steps right";
    gap:12px;padding:12px}

  .top{grid-area:top;display:flex;align-items:center;gap:16px;
    background:linear-gradient(180deg,rgba(36,56,117,.55),rgba(30,48,96,.5));
    border:1px solid rgba(120,150,200,.2);border-radius:12px;padding:10px 16px;backdrop-filter:blur(8px)}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper)}
  .logo-icon{width:32px;height:32px;border-radius:7px;background:linear-gradient(160deg,var(--orange-top),var(--orange-bot));
    display:grid;place-items:center;padding:6px}
  .logo-icon img{width:100%;height:100%;object-fit:contain}
  .logo-wordmark{font-weight:800;font-size:16px;letter-spacing:-.01em}
  .logo-wordmark em{color:var(--orange-top);font-style:normal}
  .logo-sub{font-size:10px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase}
  .top .title-in{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
    color:var(--paper);border-radius:8px;padding:7px 12px;font-size:13px;font-weight:600;min-width:240px}
  .top .title-in:focus{outline:none;border-color:var(--orange-border)}
  .top .spacer{flex:1}
  .seg{display:flex;background:rgba(13,20,40,.6);border:1px solid rgba(120,150,200,.2);border-radius:9px;padding:3px}
  .seg button{background:none;border:none;color:var(--muted);font-weight:700;font-size:12px;
    padding:7px 16px;border-radius:6px;cursor:pointer;transition:.2s}
  .seg button.on{background:linear-gradient(160deg,var(--orange-top),var(--orange-bot));color:#fff}
  .tbtn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--paper);
    font-weight:600;font-size:12px;padding:8px 13px;border-radius:8px;cursor:pointer;transition:.2s}
  .tbtn:hover{background:rgba(255,255,255,.12)}
  .tbtn:disabled{opacity:.3;cursor:default;pointer-events:none}

  .panel{background:linear-gradient(180deg,rgba(36,56,117,.4),rgba(30,48,96,.36));
    border:1px solid rgba(120,150,200,.18);border-radius:12px;padding:14px;overflow-y:auto;backdrop-filter:blur(8px)}
  .panel h3{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:700}
  .panel h3:not(:first-child){margin-top:20px}
  .left{grid-area:left}.right{grid-area:right}

  .add-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .add-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--paper);
    border-radius:9px;padding:11px 6px;cursor:pointer;transition:.2s;text-align:center;font-size:11px;font-weight:600}
  .add-btn:hover{background:var(--orange-soft);border-color:var(--orange-border)}
  .add-btn .ic{display:block;font-size:18px;margin-bottom:4px}

  .ellist{display:flex;flex-direction:column;gap:6px}
  .elrow{display:flex;align-items:center;gap:8px;background:rgba(13,20,40,.4);border:1px solid rgba(120,150,200,.14);
    border-radius:8px;padding:7px 9px;cursor:pointer;transition:.15s;font-size:12px}
  .elrow:hover{border-color:var(--orange-border)}
  .elrow.sel{border-color:var(--orange-top);background:var(--orange-soft)}
  .elrow .thumb{width:30px;height:24px;border-radius:4px;background:#0d1428;object-fit:cover;flex-shrink:0;
    display:grid;place-items:center;font-size:13px;overflow:hidden}
  .elrow .thumb img{width:100%;height:100%;object-fit:cover}
  .elrow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .elrow .vis{font-size:13px;opacity:.5}
  .elrow .vis.on{opacity:1}
  .empty{font-size:11px;color:var(--muted-2);text-align:center;padding:14px 6px;line-height:1.5}

  .canvas-area{grid-area:canvas;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
  .board-frame{position:relative;width:100%;max-height:100%;aspect-ratio:316/100;
    border:1px solid rgba(120,150,200,.2);border-radius:10px;overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04)}
  /* Filmische basisachtergrond — aanpasbaar per presentatie via --bg-* variabelen */
  .board::before{content:"";position:absolute;inset:0;z-index:0;
    background:
      var(--bg-overlay,
        radial-gradient(ellipse 80% 90% at 30% 50%, rgba(30,48,90,.7) 0%, transparent 65%),
        radial-gradient(ellipse 60% 70% at 80% 30%, rgba(15,25,50,.5) 0%, transparent 60%)
      ),
      var(--bg-image, linear-gradient(160deg, #243A6E 0%, #1F3058 50%, #1A2744 100%));
    background-size: cover;background-position: center}
  /* Dot-mesh patroon (zoals website) */
  .board::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background-image:radial-gradient(rgba(150,190,240,.09) 1px,transparent 1.5px);
    background-size:28px 28px}
  /* Vignette voor filmisch effect — iets steviger zodat de randen dieper
     wegvallen, ook nu de basiskleur lichter is dan voorheen */
  .board-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;
    box-shadow:inset 0 0 20vw 5vw rgba(0,0,0,.9)}
  /* Lichtbaan van linksboven, langzaam driftend voor wat leven in het beeld
     zonder dat het afleidt tijdens het presenteren */
  .board-light{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:radial-gradient(ellipse 55% 65% at 18% 35%,rgba(238,110,46,.1) 0%,transparent 55%);
    background-size:160% 160%;background-position:0% 0%;
    animation:board-light-drift 26s ease-in-out infinite alternate}
  @keyframes board-light-drift{
    0%{background-position:0% 0%}
    100%{background-position:16% 14%}
  }
  @media (prefers-reduced-motion:reduce){.board-light{animation:none}}
  .curve-ind{position:absolute;top:0;bottom:0;left:0;width:13%;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,rgba(120,150,200,.1),transparent);
    border-right:1.5px dashed rgba(200,220,255,.55)}
  .curve-ind::after{content:"gebogen zone";position:absolute;top:8px;left:8px;font-size:9px;
    color:rgba(200,220,255,.7);letter-spacing:.1em;text-transform:uppercase}
  /* Stap-badge bovenaan canvas in bouwmodus */
  .step-badge{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:30;
    background:rgba(10,16,32,.75);backdrop-filter:blur(6px);
    border:1px solid rgba(120,150,200,.2);border-radius:20px;padding:4px 14px;
    font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.08em;
    pointer-events:none;transition:opacity .3s}
  .step-badge em{color:var(--orange-top);font-style:normal}
  .play-mode .step-badge{display:none}
  /* Element drag-hint */
  .drag-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:30;
    background:rgba(238,110,46,.15);border:1px solid rgba(238,110,46,.3);
    border-radius:20px;padding:5px 14px;font-size:10px;color:rgba(238,110,46,.9);
    pointer-events:none;opacity:0;transition:opacity .3s;white-space:nowrap}
  .dragging-el .drag-hint{opacity:1}
  .play-mode .drag-hint{display:none}
  .board{position:absolute;inset:0;z-index:4}

  .magnet{position:absolute;transform:translate(-50%,-50%);z-index:20;
    width:22px;height:22px;border-radius:50%;cursor:grab;
    background:radial-gradient(circle at 35% 30%,#ff9d5c,var(--orange-bot));
    border:2px solid rgba(255,255,255,.7);box-shadow:0 2px 10px rgba(0,0,0,.5);transition:opacity .2s}
  .magnet::after{content:attr(data-label);position:absolute;top:120%;left:50%;transform:translateX(-50%);
    font-size:9px;color:var(--muted);white-space:nowrap;font-weight:600}
  .magnet.sel{outline:2px solid #fff;outline-offset:2px}
  .magnet.multi-sel{outline:2px dashed var(--orange-top);outline-offset:3px}
  .magnet.dragging{cursor:grabbing}
  .play-mode .magnet,.play-mode .curve-ind{display:none}

  .el{position:absolute;transform:translate(-50%,-50%);z-index:10;
    /* Positie beweegt vloeiend met lichte overshoot; grootte en fade apart */
    transition:left 1.7s var(--ease-overshoot),top 1.7s var(--ease-overshoot),
               width 1.5s var(--ease-move),opacity 1.1s ease,filter 1.1s ease;
    cursor:grab;user-select:none}
  .el.hidden-step{opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
  .build-mode .el.sel{outline:2px solid var(--orange-top);outline-offset:3px;border-radius:4px}
  .build-mode .el.multi-sel{outline:2px dashed var(--orange-top);outline-offset:3px;border-radius:4px}
  /* Afbeeldingen: zachte onderkant fade + drop-shadow */
  .el img{width:100%;height:auto;display:block;border-radius:4px;
    -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);
    filter:contrast(1.05) saturate(1.02)}
  /* Video: zelfde zachte fade als afbeeldingen */
  .el video{width:100%;height:auto;display:block;border-radius:4px;
    -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);
    background:#000}
  /* Tekst: broadcast-typografie */
  .el .txt{padding:.5em .7em;line-height:1.3;font-weight:700;white-space:pre-wrap;
    font-family:var(--serif);
    text-shadow:0 2px 20px rgba(0,0,0,.9),0 1px 4px rgba(0,0,0,.8)}
  /* Vormen: glazen/materiaal-effect */
  .el .shape{width:100%;aspect-ratio:16/9;border-radius:6px;
    box-shadow:0 4px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12)}
  .el.dragging{transition:none;cursor:grabbing;z-index:50}

  .steps{grid-area:steps;background:linear-gradient(180deg,rgba(36,56,117,.4),rgba(30,48,96,.36));
    border:1px solid rgba(120,150,200,.18);border-radius:12px;padding:10px 12px;backdrop-filter:blur(8px);
    display:flex;align-items:center;gap:10px;overflow-x:auto}
  .steps .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;flex-shrink:0}
  .step-strip{display:flex;gap:8px;align-items:center}
  .step{position:relative;flex-shrink:0;width:108px;height:44px;border-radius:7px;cursor:pointer;
    background:#0a1124;border:1.5px solid rgba(120,150,200,.2);overflow:hidden;transition:.15s;
    display:flex;align-items:flex-end;padding:6px 8px}
  .step:hover{border-color:var(--orange-border)}
  .step.on{border-color:var(--orange-top);box-shadow:0 0 0 2px var(--orange-soft)}
  .step.dragging{opacity:.4}
  .step.drag-over{border-color:var(--orange-top);box-shadow:inset 0 0 0 2px var(--orange-top)}
  .step .sn{font-size:11px;font-weight:700;color:var(--paper);position:relative;z-index:2;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .step .num{position:absolute;top:4px;left:7px;font-size:9px;color:var(--muted);z-index:2}
  /* Statische thumbnail van het focus-element van de stap, met donker
     verloop onderin zodat de naam leesbaar blijft */
  .step-thumb{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
  .step-thumb-empty{background:rgba(255,255,255,.03)}
  .step-thumb-txt{display:flex;align-items:center;justify-content:center;text-align:center;
    padding:12px 8px 4px;font-size:8px;line-height:1.25;color:rgba(230,238,250,.55);
    background:rgba(255,255,255,.03);overflow:hidden}
  .step::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,17,36,.1) 0%,rgba(10,17,36,.92) 100%)}
  .step .del{position:absolute;top:3px;right:4px;z-index:3;width:16px;height:16px;border-radius:50%;
    background:rgba(0,0,0,.5);border:none;color:#fff;font-size:12px;cursor:pointer;display:none;line-height:1}
  .step:hover .del{display:block}
  .step-add{flex-shrink:0;width:44px;height:44px;border-radius:7px;border:1.5px dashed rgba(120,150,200,.3);
    background:none;color:var(--muted);font-size:20px;cursor:pointer;transition:.15s}
  .step-add:hover{border-color:var(--orange-top);color:var(--orange-top)}
  .play-mode .steps{opacity:.4;pointer-events:none}

  .insp-row{margin-bottom:11px}
  .insp-row label{display:block;font-size:10px;color:var(--muted);margin-bottom:4px;font-weight:600;letter-spacing:.04em}
  .insp-row input[type=text],.insp-row textarea,.insp-row select{width:100%;background:rgba(13,20,40,.5);
    border:1px solid rgba(120,150,200,.2);color:var(--paper);border-radius:7px;padding:7px 9px;font-size:12px;font-family:inherit}
  .insp-row input:focus,.insp-row textarea:focus,.insp-row select:focus{outline:none;border-color:var(--orange-border)}
  .insp-row textarea{resize:vertical;min-height:54px}
  .size-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .size-grid button{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--paper);
    border-radius:7px;padding:8px 4px;font-size:11px;font-weight:600;cursor:pointer;transition:.15s;text-transform:capitalize}
  .size-grid button.on{background:var(--orange-soft);border-color:var(--orange-top);color:var(--orange-top)}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .chk{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;padding:6px 0}
  .chk input{width:16px;height:16px;accent-color:var(--orange-top)}
  .color-row{display:flex;gap:6px;flex-wrap:wrap}
  .swatch{width:26px;height:26px;border-radius:6px;cursor:pointer;border:2px solid transparent}
  .swatch.on{border-color:#fff}
  .del-el{width:100%;background:rgba(220,60,50,.15);border:1px solid rgba(220,60,50,.4);color:#ff8d82;
    border-radius:7px;padding:8px;font-size:12px;font-weight:600;cursor:pointer;margin-top:6px}
  .insp-empty{font-size:12px;color:var(--muted-2);line-height:1.6;text-align:center;padding:30px 10px}

  .play-hud{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;
    display:none;align-items:center;gap:12px;background:rgba(10,17,36,.7);backdrop-filter:blur(8px);
    border:1px solid rgba(120,150,200,.2);border-radius:30px;padding:8px 16px}
  .play-mode .play-hud{display:flex}
  /* Intro-fase (grote vraag vóór de eerste stap): geen overige UI in beeld */
  .board-frame.intro-active .play-hud,
  .board-frame.intro-active .step-badge,
  .board-frame.intro-active .canvas-bug{display:none}
  .play-hud .pips{display:flex;gap:5px}
  .play-hud .pip{width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.2)}
  .play-hud .pip.on{background:var(--orange-top)}
  .play-hud .nm{font-size:11px;color:var(--muted)}
  .hidden-file{display:none}
  ::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:rgba(120,150,200,.25);border-radius:4px}

  /* === Supabase archief dialog === */
  .modal{position:fixed;inset:0;z-index:200;background:rgba(8,12,24,.7);
    backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
  .modal.on{display:flex}
  .modal-box{background:linear-gradient(180deg,var(--bg-card),var(--navy));
    border:1px solid rgba(120,150,200,.25);border-radius:14px;
    padding:24px;max-width:560px;width:100%;max-height:80vh;display:flex;flex-direction:column;
    box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .modal-box h2{font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:6px}
  .modal-box .sub{font-size:12px;color:var(--muted);margin-bottom:18px}
  .modal-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
  .modal-list .empty{padding:30px;text-align:center;color:var(--muted-2);font-size:13px}
  .arch-row{display:flex;align-items:center;gap:12px;background:rgba(13,20,40,.5);
    border:1px solid rgba(120,150,200,.15);border-radius:8px;padding:11px 13px;cursor:pointer;transition:.15s}
  .arch-row:hover{border-color:var(--orange-border);background:rgba(232,90,32,.06)}
  .arch-row .nm{flex:1}
  .arch-row .nm .t{font-weight:700;font-size:13px}
  .arch-row .nm .m{font-size:11px;color:var(--muted);margin-top:2px}
  .arch-row .badge{font-size:10px;background:rgba(232,90,32,.15);color:var(--orange-top);
    padding:3px 7px;border-radius:4px;font-weight:700}
  .modal-actions{display:flex;gap:8px;justify-content:flex-end}
  .modal-actions .tbtn{padding:9px 18px}
  .pres-in{width:100%;background:rgba(13,20,40,.5);border:1px solid rgba(120,150,200,.2);
    color:var(--paper);border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:14px;font-family:inherit}
  .pres-in:focus{outline:none;border-color:var(--orange-border)}
  .save-info{font-size:11px;color:var(--muted);background:rgba(13,20,40,.4);
    padding:10px 12px;border-radius:7px;border:1px solid rgba(120,150,200,.12);margin-bottom:14px;line-height:1.5}
  .save-info b{color:var(--paper)}
  .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(40px);
    z-index:300;background:rgba(8,12,24,.95);border:1px solid var(--orange-border);
    color:var(--paper);padding:12px 22px;border-radius:30px;font-size:13px;font-weight:600;
    box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transition:all .3s var(--ease);pointer-events:none}
  .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
  .toast.err{border-color:rgba(220,80,70,.6)}


  .el.state-dimmed{opacity:.28!important;filter:saturate(.3) brightness(.7)!important;
    transition:opacity 1.1s var(--ease),filter 1.1s var(--ease)}
  /* Zwart-wit-modus: alles behalve het focus-element wordt gedesatureerd.
     Na de bestaande .state-dimmed-regel geplaatst zodat 'ie bij gelijke
     specificiteit wint; de bestaande filter-transitie zorgt vanzelf voor
     een vloeiende overgang. */
  .bw-mode .el.state-actief{filter:grayscale(1)!important}
  .bw-mode .el.state-dimmed{filter:grayscale(1) brightness(.7)!important}
  .el.state-focus::after{content:"";position:absolute;inset:-3px;border-radius:6px;
    border:1px solid rgba(238,110,46,.55);pointer-events:none;
    box-shadow:0 0 10px rgba(238,110,46,.25),0 0 30px rgba(238,110,46,.08);
    animation:focusBorder 3s ease-in-out infinite}
  /* Wanneer element VERLIEST focus: border schiet weg (fade out + expand) */
  .el.state-focus.losing-focus::after{
    animation:focusLeave .5s ease-in forwards}
  @keyframes focusBorder{
    0%,100%{border-color:rgba(238,110,46,.55);box-shadow:0 0 10px rgba(238,110,46,.25)}
    50%{border-color:rgba(238,110,46,.85);box-shadow:0 0 18px rgba(238,110,46,.45),0 0 40px rgba(238,110,46,.12)}}
  @keyframes focusLeave{
    0%{inset:-3px;opacity:1;border-color:rgba(238,110,46,.55)}
    100%{inset:-18px;opacity:0;border-color:rgba(238,110,46,0)}}
  @keyframes focusArrive{
    0%{inset:-18px;opacity:0;border-color:rgba(238,110,46,0)}
    100%{inset:-3px;opacity:1;border-color:rgba(238,110,46,.55)}}
  /* Nieuwe focus: border komt van buiten naar binnen */
  .el.state-focus.gaining-focus::after{
    animation:focusArrive .4s ease-out forwards}
  .focus-dot{display:none!important}  /* vervangen door focus-rand op elementen */
  .staat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:4px}
  .staat-grid button{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
    color:var(--paper);border-radius:6px;padding:7px 3px;font-size:10px;font-weight:700;cursor:pointer;transition:.15s}
  .staat-grid button.on{background:var(--orange-soft);border-color:var(--orange-top);color:var(--orange-top)}
  .staat-grid button[data-staat="dimmed"].on{background:rgba(100,100,100,.15);border-color:var(--muted);color:var(--muted)}
  .staat-grid button[data-staat="actief"].on{background:rgba(46,77,138,.3);border-color:#4D7AB5;color:#9DB0CC}


  /* EenVandaag-bug op canvas (afspeelmodus), rechtsonder in beeld */
  .canvas-bug{position:absolute;bottom:2.5%;right:2.5%;z-index:50;
    display:flex;align-items:center;gap:.5vw;opacity:0;
    transition:opacity .6s var(--ease);pointer-events:none}
  .play-mode .canvas-bug{opacity:.65}
  .canvas-bug.logo-hidden{opacity:0 !important}
  .cb-icon{width:2.2vw;height:2.2vw;border-radius:.4vw;
    background:linear-gradient(160deg,var(--orange-top),var(--orange-bot));
    display:grid;place-items:center;padding:.35vw}
  .cb-icon img{width:100%;height:100%;object-fit:contain}
  .cb-txt{font-size:.9vw;font-weight:800;color:#DDE4EA;letter-spacing:.01em}
  .cb-txt em{color:var(--orange-top);font-style:normal}

  /* Achtergrond-systeem: CSS variabelen worden gezet via JS.
     Basiskleuren gebaseerd op de EenVandaag-huisstijltinten (--navy-top/
     --navy/--blue-mid uit index.html) i.p.v. de te donkere, bijna zwarte
     varianten van eerst. */
  .board-frame.bg-donker-blauw .board::before{
    background:radial-gradient(ellipse 80% 90% at 30% 50%,rgba(90,130,210,.75) 0%,transparent 65%),
      radial-gradient(ellipse 60% 70% at 80% 30%,rgba(40,60,110,.55) 0%,transparent 60%),
      radial-gradient(ellipse 90% 100% at 85% 95%,rgba(4,6,16,.75) 0%,transparent 55%),
      linear-gradient(160deg,#243A6E 0%,#1F3058 50%,#1A2744 100%)}
  .board-frame.bg-warmgrijs .board::before{
    background:radial-gradient(ellipse 70% 80% at 25% 40%,rgba(150,120,80,.85) 0%,transparent 60%),
      radial-gradient(ellipse 90% 100% at 85% 95%,rgba(8,6,4,.75) 0%,transparent 55%),
      linear-gradient(160deg,#4A3F30 0%,#332A20 50%,#3A3024 100%)}
  .board-frame.bg-diepgroen .board::before{
    background:radial-gradient(ellipse 70% 80% at 20% 50%,rgba(45,130,80,.95) 0%,transparent 60%),
      radial-gradient(ellipse 90% 100% at 85% 95%,rgba(3,10,6,.75) 0%,transparent 55%),
      linear-gradient(160deg,#17362B 0%,#0F2A20 50%,#12281F 100%)}
  .board-frame.bg-nacht .board::before{
    background:radial-gradient(ellipse 60% 70% at 50% 30%,rgba(80,80,130,.85) 0%,transparent 55%),
      radial-gradient(ellipse 90% 100% at 50% 100%,rgba(2,2,8,.75) 0%,transparent 55%),
      linear-gradient(180deg,#1E2038 0%,#181828 60%,#101020 100%)}


  .start-overlay{position:fixed;inset:0;z-index:500;
    background:radial-gradient(ellipse 80% 70% at 60% 40%,rgba(30,48,90,.6) 0%,transparent 65%),
      linear-gradient(160deg,#0D1420 0%,#06080D 50%,#080C16 100%);
    display:flex;align-items:center;justify-content:center;padding:20px;
    transition:opacity .5s var(--ease)}
  .start-overlay.hidden{opacity:0;pointer-events:none}
  .start-overlay::before{content:"";position:absolute;inset:0;
    background-image:radial-gradient(rgba(150,190,240,.08) 1px,transparent 1.5px);
    background-size:28px 28px;pointer-events:none}
  .start-box{position:relative;max-width:820px;width:100%;z-index:1}
  .start-header{text-align:center;margin-bottom:32px}
  .start-ev{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px}
  .start-ev-icon{width:38px;height:38px;border-radius:8px;
    background:linear-gradient(160deg,var(--orange-top),var(--orange-bot));
    display:grid;place-items:center;padding:6px}
  .start-ev-icon img{width:100%;height:100%;object-fit:contain}
  .start-ev-name{font-size:17px;font-weight:800;color:#DDE4EA}
  .start-ev-name em{color:var(--orange-top);font-style:normal}
  .start-header h1{font-family:var(--serif);font-size:clamp(22px,3vw,38px);
    font-weight:600;color:var(--paper);margin-bottom:6px}
  .start-header p{font-size:13px;color:var(--muted)}
  .start-step{display:none}.start-step.active{display:block}
  .start-step h2{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted);font-weight:700;margin-bottom:14px;text-align:center}
  .start-title-in{width:100%;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.15);color:var(--paper);border-radius:10px;
    padding:16px 20px;font-size:22px;font-weight:600;font-family:var(--serif);
    text-align:center;transition:.2s;font-family:inherit}
  .start-title-in:focus{outline:none;border-color:var(--orange-border);background:rgba(255,255,255,.09)}
  .bg-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .bg-tile{border-radius:10px;height:88px;cursor:pointer;border:2px solid transparent;
    display:flex;align-items:flex-end;padding:10px 12px;font-size:11px;font-weight:700;
    color:rgba(255,255,255,.65);transition:.2s;position:relative;overflow:hidden}
  .bg-tile:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
  .bg-tile.on{border-color:var(--orange-top);color:#fff}
  .bg-tile.on::after{content:"✓";position:absolute;top:8px;right:10px;font-size:13px;color:var(--orange-top)}
  .bg-tile.t-blauw{background:radial-gradient(ellipse 80% 80% at 30% 50%,rgba(30,48,90,.95),#06080D)}
  .bg-tile.t-grijs{background:radial-gradient(ellipse 80% 80% at 30% 50%,rgba(50,40,30,.98),#0E0B08)}
  .bg-tile.t-groen{background:radial-gradient(ellipse 80% 80% at 20% 50%,rgba(10,35,20,.98),#050E09)}
  .bg-tile.t-nacht{background:radial-gradient(ellipse 60% 60% at 50% 30%,rgba(20,20,35,.95),#020204)}
  .tpl-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
  .tpl-tile{border-radius:10px;height:96px;cursor:pointer;border:2px solid rgba(255,255,255,.1);
    background:rgba(13,20,40,.6);display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:8px;font-size:11px;font-weight:700;color:var(--muted);transition:.2s}
  .tpl-tile:hover{border-color:rgba(255,255,255,.25);color:var(--paper)}
  .tpl-tile.on{border-color:var(--orange-top);color:var(--orange-top);background:var(--orange-soft)}
  .tpl-tile .tpl-ic{font-size:24px;line-height:1}
  .start-ind{display:flex;justify-content:center;gap:8px;margin-bottom:26px}
  .si{width:28px;height:3px;border-radius:2px;background:rgba(255,255,255,.15);transition:.3s}
  .si.on{background:var(--orange-top)}.si.done{background:rgba(238,110,46,.4)}
  .start-nav{display:flex;gap:10px;justify-content:center;margin-top:22px}
  .start-nav .tbtn{min-width:120px;padding:12px 24px;font-size:13px}
  .start-nav .tbtn.primary{background:linear-gradient(160deg,var(--orange-top),var(--orange-bot));border:none}
  .start-skip{text-align:center;margin-top:14px}
  .start-skip a{font-size:12px;color:var(--muted-2);cursor:pointer;
    border-bottom:1px solid transparent;transition:.2s}
  .start-skip a:hover{color:var(--muted)}


  /* Subtiele focus-marker (Hormuz-stijl ruit die van element naar element springt) */
  .focus-marker{position:absolute;z-index:25;width:11px;height:11px;
    transform:translate(-50%,-50%) rotate(45deg);
    background:var(--orange-top);border-radius:2px;
    box-shadow:0 0 0 4px rgba(238,110,46,.18),0 0 14px rgba(238,110,46,.7);
    transition:left 1.4s var(--ease-overshoot),top 1.4s var(--ease-overshoot),opacity .5s ease;
    pointer-events:none;opacity:0}
  .play-mode .focus-marker.show{opacity:.9}
  .focus-marker.hidden{display:none!important}


  /* Vraag van de dag — subtiele header bovenaan het canvas, OF (in de intro-fase
     vóór de eerste stap) groot en gecentreerd over het hele scherm. De .vq-inner
     schiet bij het verlaten van de intro naar boven en krimpt naar de kleine
     header-vorm — zie .intro-varianten hieronder. */
  .vraag-banner{
    position:absolute;inset:0;z-index:28;pointer-events:none;
    opacity:0;transition:opacity .5s var(--ease);
  }
  .vraag-banner.has-vraag{opacity:1}
  .vq-inner{
    position:absolute;left:50%;top:0;transform:translate(-50%,0);
    display:flex;align-items:center;justify-content:center;gap:.6vw;
    width:90%;padding:.35% 0 .55%;
    background:linear-gradient(180deg,rgba(8,12,24,.52) 0%,transparent 100%);
    transition:top 1.3s var(--ease-overshoot),transform 1.3s var(--ease-overshoot),
               background 1s ease,padding 1.1s var(--ease-overshoot);
  }
  .vraag-banner.intro .vq-inner{
    top:50%;transform:translate(-50%,-50%);padding:0;background:none;
  }
  .vq-mark{font-size:.72vw;color:var(--orange-top);font-weight:900;flex-shrink:0;
    opacity:.75;letter-spacing:-.01em;transition:font-size 1.2s var(--ease-overshoot)}
  .vraag-banner.intro .vq-mark{font-size:2.4vw}
  .vq-text{
    font-size:1.2vw;color:rgba(218,232,252,.55);
    font-family:var(--serif);font-style:italic;font-weight:500;
    text-shadow:0 1px 8px rgba(0,0,0,.95);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72%;
    transition:font-size 1.2s var(--ease-overshoot),color 1s ease,max-width 1.2s var(--ease-overshoot);
  }
  .vraag-banner.intro .vq-text{
    font-size:3vw;color:rgba(238,243,252,.94);
    white-space:normal;overflow:visible;text-overflow:clip;max-width:64vw;text-align:center
  }

  /* Raster (zichtbaar tijdens magneet-slepen) */
  .board-grid{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
    transition:opacity .2s ease;
    background-image:
      linear-gradient(rgba(150,190,240,.12) 1px,transparent 1px),
      linear-gradient(90deg,rgba(150,190,240,.12) 1px,transparent 1px);
    background-size:5% 10%}
  .dragging-magnet .board-grid{opacity:1}
  /* Uitlijn-hulplijnen */
  .align-line{position:absolute;z-index:24;pointer-events:none;background:var(--orange-top);
    opacity:0;transition:opacity .1s ease;box-shadow:0 0 6px rgba(238,110,46,.6)}
  .align-line.v{width:1px;top:0;bottom:0}
  .align-line.h{height:1px;left:0;right:0}
  .align-line.show{opacity:.8}

  /* ===== Krantenkop-element ===== */
  .el .krantenkop{
    background:rgba(8,14,28,.82);border:1px solid rgba(120,150,200,.22);
    border-left:.22vw solid var(--kk-kleur,var(--orange));border-radius:.4vw;
    padding:.45vw .6vw .5vw;box-shadow:0 .3vw 1.5vw rgba(0,0,0,.55)}
  /* In afspeelmodus is een krantenkop met kernzin aanklikbaar (doorklik kop ↔ kernzin) */
  .play-mode .el.has-kernzin{cursor:pointer}
  .kk-header{display:flex;align-items:center;gap:.35vw;margin-bottom:.35vw;flex-wrap:nowrap}
  .kk-badge{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    background:var(--kk-kleur,var(--orange));color:#fff;
    font-size:.62vw;font-weight:900;letter-spacing:.06em;font-family:var(--sans);
    padding:.1vw .32vw;border-radius:.22vw;text-transform:uppercase;white-space:nowrap}
  .kk-meta{font-size:.58vw;color:rgba(157,176,204,.72);font-family:var(--sans);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kk-kop{font-family:var(--serif);font-size:1.35vw;font-weight:600;line-height:1.22;
    color:#EEF3FA;text-shadow:0 1px 8px rgba(0,0,0,.85)}
  .kk-divider{height:1px;background:rgba(120,150,200,.25);margin:.4vw 0}
  .kk-kernzin{
    font-family:var(--serif);font-size:1.2vw;font-style:italic;line-height:1.38;
    color:#EEF3FA;text-shadow:0 1px 10px rgba(0,0,0,.85);
    padding-left:.5vw;border-left:.18vw solid var(--kk-kleur,var(--orange))}
  .kk-kop-small{font-size:.7vw;color:rgba(238,243,250,.52);font-weight:400;margin-bottom:0}

  /* ===== Media-picker modal ===== */
  .media-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
  .media-tab{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
    color:var(--muted);border-radius:6px;padding:5px 12px;font-size:11px;font-weight:700;cursor:pointer;transition:.15s}
  .media-tab.on{background:var(--orange-soft);border-color:var(--orange-top);color:var(--orange-top)}
  .media-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;min-height:60px;align-content:flex-start}
  .media-pick{display:inline-flex;align-items:center;justify-content:center;
    padding:6px 13px;border-radius:5px;font-size:11.5px;font-weight:900;letter-spacing:.05em;
    color:#fff;cursor:pointer;transition:.15s;text-transform:uppercase;border:2px solid transparent;
    font-family:var(--sans)}
  .media-pick:hover{filter:brightness(1.18);transform:translateY(-1px)}
  .media-pick.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}