/* teach - alle opmaak
   Ontwerptaal "teachus.today": minimalistisch, vlakke kleuren uit het uil-logo,
   ronde typografie (Quicksand), dunne lijnen, uniforme control-hoogtes. */
  @font-face{
    font-family:"Quicksand";
    src:url("../fonts/quicksand.woff2") format("woff2");
    font-weight:300 700; font-display:swap;
  }
  :root{
    /* logo-palet (vlakke kleuren, geen neon) */
    --navy:#1d3461; --blue:#2f6fe4; --blue-d:#2456b8; --teal:#18c5c0;
    --cyan:#3ac2e8; --pink:#e83e8c; --purple:#8b5cf6; --orange:#f28c38;
    --red:#e0554d; --green:#3fae6a; --yellow:#f7c948;
    --wood:#f6e7c9; --wood-d:#e8d2a4;
    /* semantisch (licht thema) */
    --bg:#f4f7fb; --surface:#ffffff; --surface-2:#eef2f8; --surface-3:#e3e9f4;
    --panel:var(--surface);
    --ink:#1d3461; --muted:#71809b; --line:#e2e8f2;
    --accent:var(--teal); --accent-ink:#0d6e6b; --accent-soft:#e2f8f7;
    --red-soft:#fbe3e1;
    /* glas-laag (bord/widgets) */
    --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.92);
    --glass-line:rgba(255,255,255,.6);
    /* maten: alle "vakken" even hoog */
    --control-h:40px; --radius-s:8px; --radius:12px; --radius-l:18px;
    --shadow-1:0 1px 3px rgba(29,52,97,.08); --shadow-2:0 12px 32px rgba(29,52,97,.16);
    --shadow:var(--shadow-2);
    --tbar:58px;
    /* minimale tikzones voor touch (WCAG/iOS-richtlijn) */
    --tap:44px; --tap-sm:36px;
  }
  /* donker thema: zelfde tokens, andere waarden (schakelbaar in Instellingen) */
  body.dark{
    --bg:#0f1626; --surface:#18213a; --surface-2:#202b49; --surface-3:#2a3757;
    --ink:#e8edf7; --muted:#8fa0bf; --line:#2c3a5e;
    --accent-ink:#7fe6e2; --accent-soft:#153a44; --red-soft:#4a2330;
    --glass:rgba(24,33,58,.6); --glass-strong:rgba(24,33,58,.92);
    --glass-line:rgba(255,255,255,.08);
    --shadow-1:0 1px 3px rgba(0,0,0,.35); --shadow-2:0 12px 32px rgba(0,0,0,.5);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  *::-webkit-scrollbar{width:8px; height:8px;}
  *::-webkit-scrollbar-thumb{background:#c3cfde; border-radius:4px;}
  body.dark ::-webkit-scrollbar-thumb{background:#3a4a70;}
  *::-webkit-scrollbar-track{background:transparent;}
  html,body{height:100%; margin:0; overflow:hidden;}
  body{
    font-family:"Quicksand","Segoe UI Rounded","Arial Rounded MT Bold",ui-rounded,"Segoe UI",Verdana,sans-serif;
    background:var(--bg); color:var(--ink); user-select:none;
  }
  input,textarea{user-select:text;}
  /* weergave-instelling "minder beweging" */
  body.no-motion *,body.no-motion *::before,body.no-motion *::after{
    transition-duration:0s !important; animation-duration:0s !important;
  }
  /* ---------- Menubalk ---------- */
  #toolbar{
    position:fixed; top:0; left:0; right:0; height:var(--tbar); z-index:5000;
    background:var(--surface); border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:8px; padding:0 14px;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  }
  #toolbar::-webkit-scrollbar{display:none;}
  #zoomPct{min-width:56px; padding:0 8px; font-size:13px; text-align:center;}
  #zoomPct.on{background:var(--accent-soft); color:var(--accent-ink);}
  #btnZoomIn:disabled,#btnZoomOut:disabled{opacity:.35; cursor:default;}
  /* logo: uil (SVG) + woordmerk "teachus.today" in merk-kleuren */
  .logo{display:flex; align-items:center; gap:9px; line-height:1; flex:none;}
  .logo-owl{width:34px; height:30px; display:block;}
  .logo-word{font-size:21px; font-weight:700; letter-spacing:.2px; white-space:nowrap;}
  .logo-word .lw-teach{color:var(--ink);}
  .logo-word .lw-us{color:var(--teal);}
  .logo-word .lw-dot{color:var(--orange);}
  .logo-word .lw-today{
    background:linear-gradient(90deg,var(--blue),var(--purple),var(--pink),var(--orange));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  #verTag{font-size:10.5px; font-weight:700; color:var(--muted);}
  #verTag.beta{color:#fff; background:var(--orange); padding:1px 7px; border-radius:var(--radius-s);}
  #toolbar .spacer{flex:1;}
  .tbtn{
    border:none; border-radius:var(--radius); min-height:var(--control-h);
    padding:0 14px; font:inherit; font-weight:700;
    background:var(--accent); color:#fff; cursor:pointer; font-size:14.5px;
  }
  .tbtn:hover{filter:brightness(.94);}
  .tbtn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line);}
  .tbtn.ghost:hover{background:var(--surface-3); filter:none;}
  /* bewapende bevestigingsstap (reservekopie herstellen e.d.) */
  .tbtn.danger{background:var(--red, #d33); color:#fff; border-color:transparent;}
  /* in de menubalk zelf zijn ghost-knoppen transparant (rustiger beeld) */
  #toolbar .tbtn.ghost{background:transparent; border:none;}
  #toolbar .tbtn.ghost:hover{background:var(--surface-2);}
  .tbtn:disabled{opacity:.55; cursor:default;}
  #btnSave{min-width:150px; text-align:center;}
  #btnSave.ok{background:var(--green); color:#fff;}
  /* mislukte (auto)save: blijft rood staan tot een save wél lukt */
  #toolbar #btnSave.err{background:var(--red); color:#fff;}
  #btnUser.on{background:var(--accent-soft); color:var(--accent-ink);}
  #langToggle{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px;}
  #langToggle button{
    border:none; border-radius:999px; padding:6px 13px; font:inherit; font-weight:700;
    cursor:pointer; background:transparent; color:var(--muted); font-size:13.5px;
  }
  #langToggle button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);}
  /* ---------- Board ---------- */
  #board{position:absolute; inset:var(--tbar) 0 0 0; overflow:hidden;}
  #board.bg-dots{
    background-image:radial-gradient(circle,#c9d6e5 1.4px,transparent 1.4px);
    background-size:26px 26px;
  }
  /* board background line options */
  #board.bg-blank{background-image:none;}
  #board.bg-lines{background-image:repeating-linear-gradient(#0000 0 39px, #b9cbe3 39px 40px);}
  #board.bg-write{background-image:repeating-linear-gradient(
    #0000 0 19px,#cddcf0 19px 20px,#0000 20px 39px,#8aa8cf 39px 40.5px,#0000 40.5px 59px,#cddcf0 59px 60px,#0000 60px 79px);}
  #board.bg-grid-s{background-image:
    repeating-linear-gradient(#0000 0 24px,#cddcf0 24px 25px),
    repeating-linear-gradient(90deg,#0000 0 24px,#cddcf0 24px 25px);}
  #board.bg-grid-b{background-image:
    repeating-linear-gradient(#0000 0 49px,#b9cbe3 49px 50px),
    repeating-linear-gradient(90deg,#0000 0 49px,#b9cbe3 49px 50px);}
  /* drawing layer on the board: sits ABOVE widgets like a transparency sheet,
     so you can annotate over everything; clicks pass through when pen is off */
  #boardInk{position:absolute; inset:0; pointer-events:none; z-index:4000;}
  /* live-laag van de markeerstift: dekkend getekend, doorschijnend getoond;
     bij het loslaten wordt de haal in één keer op de inktlaag gezet */
  #boardMark{position:absolute; inset:0; pointer-events:none; z-index:4000; opacity:.32;}
  body.pen #boardInk{pointer-events:auto; cursor:crosshair; touch-action:none;}
  body.pen.pen-text #boardInk{cursor:text;}
  body.pen.pen-hand #boardInk{pointer-events:none;} /* hand tool: interact with everything */
  /* ---------- Leerling-omgeving ---------- */
  /* geen whiteboard/tekengereedschap voor leerlingen - alleen wat de leerkracht
     heeft toegewezen, als vaste (niet-sleepbare) kaarten in speelmodus */
  #pupilView{display:none;}
  body.pupil-mode #board,body.pupil-mode #fab,body.pupil-mode #fabBoardsBtn,
  body.pupil-mode #boardStrip,body.pupil-mode #fabmenu,
  body.pupil-mode #hud,body.pupil-mode #btnFolders,body.pupil-mode #btnSave{display:none !important;}
  body.pupil-mode #pupilView{
    display:flex; flex-wrap:wrap; gap:18px; align-content:flex-start;
    position:absolute; inset:var(--tbar) 0 0 0; overflow:auto; padding:18px; box-sizing:border-box;
  }
  #pupilView .pupil-card{
    position:static; max-width:100%; box-shadow:0 6px 20px rgba(30,50,90,.12);
  }
  .pupil-card .widget-body{width:100%; height:100%;}
  /* kijken-modus: alle interactie geblokkeerd (generiek, werkt voor elk
     widgettype zonder eigen readonly-ondersteuning) + zichtbaar meekijk-label */
  .pupil-card.watch{position:relative;}
  .pupil-card.watch .widget-body{pointer-events:none; user-select:none;}
  .pupil-watch-badge{
    position:absolute; top:8px; right:10px; z-index:2; pointer-events:none;
    font-size:12.5px; font-weight:700; color:var(--muted);
    background:var(--panel, rgba(255,255,255,.85)); border-radius:999px; padding:3px 10px;
    box-shadow:0 2px 8px rgba(30,50,90,.15);
  }
  .pupil-empty{margin:auto; color:var(--muted); font-size:16px; font-weight:600;}
  /* ---------- Ouderportaal ---------- */
  /* ouders zien geen whiteboard: alleen het portaal met hun kinderen */
  #parentView{display:none;}
  body.parent-mode #board,body.parent-mode #fab,body.parent-mode #fabBoardsBtn,
  body.parent-mode #boardStrip,body.parent-mode #fabmenu,
  body.parent-mode #hud,body.parent-mode #btnFolders,body.parent-mode #btnSave{display:none !important;}
  body.parent-mode #parentView{
    display:block; position:absolute; inset:var(--tbar) 0 0 0;
    overflow:auto; padding:24px 18px; box-sizing:border-box;
  }
  .parent-inner{
    max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:10px;
  }
  .parent-title{margin:0 0 4px; font-size:22px;}
  .parent-inner .am-row{flex-wrap:wrap;}
  .parent-inner .am-row-tools{flex-basis:100%; display:flex; flex-direction:column; gap:8px;}
  .parent-inner .am-row-tools:empty{display:none;}
  /* floating add-button (FAB) */
  #fab{
    position:fixed; right:24px; bottom:24px; z-index:5600; width:60px; height:60px;
    border-radius:50%; border:none; background:var(--blue); color:#fff; font-size:28px;
    cursor:pointer; box-shadow:0 8px 24px rgba(59,125,216,.45); opacity:.8;
    transition:all .2s; line-height:1;
  }
  #fab:hover{opacity:1; transform:scale(1.1);}
  #fab.open{transform:rotate(45deg); opacity:1;}
  body.board-empty #fab{opacity:1; animation:fabpulse 2s infinite;}
  @keyframes fabpulse{
    0%,100%{box-shadow:0 8px 24px rgba(59,125,216,.45);}
    50%{box-shadow:0 8px 38px rgba(59,125,216,.9); transform:scale(1.07);}
  }
  #fabmenu{
    position:fixed; right:24px; bottom:96px; z-index:5600; display:none;
    flex-direction:column; gap:10px; align-items:flex-end;
  }
  /* board quick-switch: hover strip with live previews */
  #fabBoardsBtn{
    position:fixed; right:96px; bottom:31px; z-index:5590; width:46px; height:46px;
    border-radius:50%; border:none; background:var(--purple); color:#fff; font-size:19px;
    cursor:pointer; box-shadow:0 6px 18px rgba(155,89,182,.45); opacity:.85;
    transition:all .2s; line-height:1;
  }
  #fabBoardsBtn:hover{opacity:1; transform:scale(1.1);}
  #boardStrip{
    position:fixed; right:16px; bottom:92px; z-index:5590; display:none; gap:10px;
    padding:10px; border-radius:16px; background:rgba(255,255,255,.93);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:0 10px 28px rgba(30,50,90,.3); border:1px solid rgba(255,255,255,.7);
    max-width:calc(100vw - 40px); overflow-x:auto; overflow-y:hidden;
  }
  #boardStrip.open{display:flex;}
  .bs-card{
    width:168px; flex:none; background:var(--surface); border-radius:12px;
    border:2.5px solid var(--line); cursor:pointer; overflow:hidden;
  }
  .bs-card:hover{border-color:var(--blue);}
  .bs-card.active{border-color:var(--accent);}
  .bs-card canvas{display:block; width:168px; height:105px; background:var(--surface);}
  .bs-name{
    font-size:12px; font-weight:800; padding:5px 8px; display:flex;
    justify-content:space-between; align-items:center; gap:6px;
  }
  .bs-name span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .bs-x{
    border:none; background:var(--red-soft); color:var(--red); border-radius:7px;
    min-width:26px; height:24px; font-size:11px; font-weight:900; cursor:pointer; flex:none;
  }
  .bs-x:hover{background:var(--red); color:#fff;}
  .bs-x.arm{background:var(--red); color:#fff; animation:pop .3s;}
  .bs-new{
    display:flex; align-items:center; justify-content:center; font-size:30px;
    color:#fff; background:var(--green); border-color:var(--green);
    width:90px; min-height:130px; font-weight:900;
  }
  /* mappenverkenner (Windows-stijl, vervangt het oude mappenpaneel) */
  .modal.explorer{width:min(860px,94vw);}
  .ex-bar{display:flex; gap:10px; align-items:center; margin:10px 0 4px; flex-wrap:wrap;}
  .ex-crumbs{display:flex; gap:4px; align-items:center; flex:1; min-width:0; flex-wrap:wrap;}
  .ex-crumb{
    border:none; background:var(--surface-2); border-radius:8px; padding:6px 10px;
    cursor:pointer; font:inherit; font-weight:700; font-size:13.5px;
  }
  .ex-crumb:hover{background:var(--surface-3);}
  .ex-sep{color:var(--muted); font-weight:800;}
  .ex-tools{display:flex; gap:8px; flex-wrap:wrap;}
  .ex-msg{min-height:18px; color:var(--red); font-size:13px; font-weight:700;}
  .ex-msg.ok{color:var(--green, #2c8c4b);}
  .ex-hint{font-size:11px; color:var(--muted); font-weight:600;}
  .ex-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:12px; margin-top:8px;
  }
  .ex-tile{
    border:1.5px solid var(--line); border-radius:14px; padding:10px; background:var(--surface);
    display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
    user-select:none; touch-action:none; min-height:110px; justify-content:center;
  }
  .ex-tile:hover{border-color:var(--blue);}
  .ex-tile.sel{border-color:var(--blue); background:var(--accent-soft);}
  .ex-tile.active-item{border-color:var(--accent); border-width:2.5px;}
  .ex-tile .ex-ico{font-size:36px; line-height:1;}
  .ex-tile canvas{max-width:100%; border-radius:8px; border:1px solid var(--line);}
  .ex-name{font-weight:700; font-size:13.5px; text-align:center; word-break:break-word;}
  .ex-count{font-size:12px; color:var(--muted); font-weight:700;}
  .ex-tile input{
    border:2px solid var(--blue); border-radius:8px; font:inherit; font-size:13.5px;
    width:100%; outline:none; padding:4px 6px; text-align:center;
  }
  .ex-ghost{position:fixed; z-index:7000; opacity:.75; pointer-events:none; width:150px; left:-999px;}
  .ex-drop{outline:3px solid var(--blue); outline-offset:2px;}
  #fabmenu.open{display:flex;}
  .fab-item{
    display:flex; align-items:center; gap:10px; border:none;
    background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
    border-radius:14px; padding:11px 16px; font:inherit; font-weight:800; font-size:14px;
    color:var(--ink); cursor:pointer; box-shadow:0 6px 18px rgba(30,50,90,.22);
  }
  .fab-item:hover{background:var(--surface); transform:translateX(-4px);}
  .fab-item.on{background:var(--accent-soft); color:var(--accent-ink);}
  .fab-item .fi{font-size:18px;}
  /* pen palette (section inside #hud, always visible) */
  #penbar{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
  .pen-close{background:var(--surface-2) !important; color:var(--ink) !important;}
  .pen-close.on{background:var(--accent-soft) !important; color:var(--accent-ink) !important;}
  body:not(.pen) .pen-tools button.on{background:transparent; box-shadow:none;}
  .pen-grip{cursor:grab; font-size:15px; color:var(--muted); padding:0 2px; touch-action:none;}
  .pen-grip:active{cursor:grabbing;}
  #penbar .wp-group{padding:2px;}
  #penbar .wp-group button{width:28px; height:28px; font-size:14px;}
  #penbar .wp-color i{width:15px; height:15px;}
  #penbar .wp-bg i{width:17px; height:17px;}
  #penbar .wp-clear{width:28px; height:28px; font-size:13px;}
  /* images on the board */
  .bimg{
    position:absolute; z-index:0; border-radius:10px; touch-action:none; cursor:grab;
    box-shadow:0 6px 18px rgba(30,50,90,.25);
  }
  .bimg:active{cursor:grabbing;}
  .bimg img{width:100%; display:block; border-radius:10px; pointer-events:none;}
  .bimg .dtool-x,.bimg .bimg-rs{opacity:0; transition:opacity .15s;}
  .bimg:hover .dtool-x,.bimg:hover .bimg-rs{opacity:1;}
  .bimg-rs{
    position:absolute; right:-9px; bottom:-9px; width:20px; height:20px; border-radius:50%;
    background:var(--blue); border:2.5px solid #fff; cursor:nwse-resize;
    box-shadow:0 2px 6px rgba(0,0,0,.3);
  }
  body.pen .bimg{pointer-events:none;}
  /* frameless (bare) widget for mindmap directly on the board */
  .widget.bare{
    background:transparent !important; border:none; box-shadow:none !important;
    backdrop-filter:none; -webkit-backdrop-filter:none; resize:none; border-radius:0;
    pointer-events:none; /* let clicks pass through to widgets/board below */
  }
  .widget.bare .widget-head,.widget.bare .mm-top,.widget.bare .mm-node,
  .widget.bare .mm-pop{pointer-events:auto;}
  .widget.bare .widget-head{
    position:absolute; top:8px; right:8px; left:auto; width:auto; z-index:6;
    background:rgba(255,255,255,.78); border:none; border-radius:12px; padding:5px 8px; gap:6px;
    box-shadow:0 4px 12px rgba(30,50,90,.15);
  }
  .widget.bare .widget-head .wtitle{display:none;}
  .widget.bare .widget-body,.widget.bare .mm-stage{background:transparent;}
  /* mindmap node settings popover */
  .mm-cog{
    position:absolute; right:-11px; bottom:-11px; width:22px; height:22px; border-radius:50%;
    border:none; background:var(--blue); color:#fff; font-size:11px; cursor:pointer;
    line-height:1; display:none; padding:0;
  }
  .mm-node:hover .mm-cog{display:block;}
  .mm-pop{
    position:absolute; z-index:20; background:var(--surface); border-radius:12px; padding:9px 10px;
    box-shadow:0 10px 26px rgba(30,50,90,.3); display:flex; flex-direction:column; gap:7px;
  }
  .mm-pop .mp-row{display:flex; gap:5px; align-items:center;}
  .mm-pop .mp-lbl{font-size:11px; font-weight:800; color:var(--muted); width:16px; text-align:center;}
  .mm-pop button{border:none; cursor:pointer; padding:0; background:transparent;}
  .mm-pop .mp-sw{width:19px; height:19px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1.5px var(--line);}
  .mm-pop .mp-sw.on{box-shadow:0 0 0 2.5px var(--ink);}
  .mm-pop .mp-fs{font-weight:900; color:var(--ink); width:24px; height:24px; border-radius:7px; background:var(--surface-2);}
  .mm-pop .mp-fs.on{background:var(--accent-soft);}
  .mm-pop .mp-ls{width:34px; height:24px; border-radius:7px; background:var(--surface-2); position:relative;}
  .mm-pop .mp-ls.on{background:var(--accent-soft);}
  .mm-pop .mp-ls i{display:block; border-top:2.5px solid var(--ink); width:24px; margin:0 auto;}
  .mm-pop .mp-ls[data-ls=dash] i{border-top-style:dashed;}
  .mm-pop .mp-ls[data-ls=dot] i{border-top-style:dotted;}
  .mm-pop .mp-x{margin-left:auto; font-weight:900; color:var(--red); font-size:12px;}
  /* physical tools: ruler, set square, magnifier */
  /* boven de inktlaag (4000): net als een echte lat ligt het gereedschap óp
     het bord - ook in penmodus te verplaatsen en in te stellen; tekenen
     begint ernaast en kleeft aan de tekenrand */
  .dtool{position:absolute; z-index:4200; touch-action:none; user-select:none; cursor:grab; left:120px; top:120px;}
  .dtool:active{cursor:grabbing;}
  .dtool .dtool-x{
    position:absolute; top:-10px; right:-10px; width:24px; height:24px; border-radius:50%;
    border:none; background:var(--red-soft); color:var(--red); font-weight:900; cursor:pointer;
    font-size:12px; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.2); z-index:2;
  }
  .dtool .dtool-rot{
    position:absolute; bottom:-10px; right:-10px; width:26px; height:26px; border-radius:50%;
    border:none; background:var(--blue); color:#fff; cursor:grab; font-size:13px;
    line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.25); z-index:2;
  }
  .dtool-ruler{width:600px; height:76px;}
  .dtool-geo{width:340px; height:184px;}
  /* alleen de driehoek zelf is aan te raken - de lege hoeken van de
     rechthoekige box laten aanrakingen door naar het bord, anders kon er
     niet vlak naast de schuine randen getekend worden */
  .dtool-geo{pointer-events:none;}
  .dtool-geo svg polygon,.dtool-geo .dtool-opts,.dtool-geo .dtool-x,.dtool-geo .dtool-rot{pointer-events:auto;}
  .dtool-opts{position:absolute; top:-12px; left:8px; display:flex; gap:5px;}
  .dtool-opts button{
    width:24px; height:24px; border-radius:50%; border:none; background:var(--surface);
    color:var(--ink); font-size:12px; font-weight:900; cursor:pointer; line-height:1;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  .dtool-opts button:hover{background:var(--accent-soft);}
  /* lengteknop toont de maat ("10 cm") en is dus breder dan een rond knopje */
  .dtool-opts .do-wide{width:auto; min-width:48px; padding:0 9px; border-radius:12px;}
  /* slot-knop kleurt mee zodra het gereedschap vaststaat */
  .dtool-opts .do-lock.on{background:var(--accent-soft);}
  /* live hoek-uitlezing tijdens het draaien van liniaal/geodriehoek */
  .dtool-deg{
    display:none; position:absolute; left:50%; top:50%; margin:-16px 0 0 -24px;
    width:48px; height:32px; line-height:32px; text-align:center; pointer-events:none;
    background:rgba(30,50,90,.85); color:#fff; font-size:14px; font-weight:800;
    border-radius:9px; z-index:3;
  }
  .dtool-deg.snapped{background:var(--green);}
  .dtool-lens{z-index:4500;} /* the glass sits above the ink sheet */
  .dtool-lens canvas{
    border:5px solid #5a6c85; box-shadow:0 8px 22px rgba(0,0,0,.3);
    background:var(--surface); display:block;
  }
  /* =========== Mindmap widget =========== */
  .mm{flex:1; min-height:0; display:flex; flex-direction:column; position:relative;}
  .mm-top{
    position:absolute; top:8px; left:8px; z-index:7; display:flex; gap:8px; align-items:center;
    padding:6px 8px; background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
    border-radius:12px; box-shadow:0 4px 12px rgba(30,50,90,.15); cursor:default;
  }
  .mm-grip{cursor:grab; color:var(--muted); font-size:14px; padding:0 2px; touch-action:none; user-select:none;}
  .mm-grip:active{cursor:grabbing;}
  .mm-hint{font-size:12px; font-weight:700; color:var(--muted); max-width:180px;}
  .mm-stage{flex:1; min-height:0; position:relative; overflow:hidden; background:var(--surface);}
  .mm-stage svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
  .mm-node{
    position:absolute; transform:translate(-50%,-50%); background:var(--surface);
    border:2.5px solid var(--blue); padding:8px 16px; font-weight:800; font-size:15px;
    cursor:grab; touch-action:none; min-width:64px; text-align:center;
    box-shadow:0 3px 10px rgba(30,50,90,.15); border-radius:50px;
  }
  .mm-node:active{cursor:grabbing;}
  .mm-node span{outline:none; cursor:text; display:inline-block; min-width:34px; user-select:text;}
  .mm-node span:empty::before{content:"…"; color:#c2cddc;}
  .mm-node.root{background:var(--yellow); border-color:#d9a400; font-size:17px; z-index:2;}
  .mm.tree .mm-node{border-radius:10px;}
  .mm.web .mm-node{border-radius:16px; border-style:dashed;}
  .mm-node .mm-add,.mm-node .mm-del{
    position:absolute; width:22px; height:22px; border-radius:50%; border:none;
    font-size:13px; font-weight:900; cursor:pointer; line-height:1; display:none; padding:0;
  }
  .mm-node:hover .mm-add,.mm-node:hover .mm-del{display:block;}
  .mm-add{right:-11px; top:50%; transform:translateY(-50%); background:var(--green); color:#fff;}
  .mm-del{left:-9px; top:-9px; background:var(--red-soft); color:var(--red);}
  /* ---------- Widget windows ---------- */
  .widget{
    position:absolute; background:rgba(255,255,255,.55); border-radius:var(--radius);
    backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
    box-shadow:0 4px 14px rgba(30,50,90,.08); border:1px solid rgba(255,255,255,.6);
    display:flex; flex-direction:column;
    min-width:280px; min-height:200px; resize:none; overflow:hidden;
    transition:background .2s, box-shadow .2s, border-color .2s;
  }
  .widget:hover,.widget:focus-within{
    background:rgba(255,255,255,.92);
    box-shadow:0 12px 30px rgba(30,50,90,.2);
    border-color:rgba(255,255,255,.9);
  }
  .widget .wmin,.widget .wclose{opacity:.4; transition:opacity .15s;}
  .widget:hover .wmin,.widget:hover .wclose,
  .widget:focus-within .wmin,.widget:focus-within .wclose{opacity:1;}
  /* eigen, groter aanraakbare resize-greep i.p.v. de piepkleine native
     browser-grip (die met resize:none hierboven is uitgeschakeld) */
  .widget-rs{
    position:absolute; right:4px; bottom:4px; width:34px; height:34px;
    border-radius:50%; background:var(--blue); border:3px solid #fff;
    cursor:nwse-resize; box-shadow:0 2px 6px rgba(0,0,0,.3); touch-action:none;
    opacity:0; transition:opacity .15s; z-index:2;
  }
  .widget:hover .widget-rs,.widget:focus-within .widget-rs{opacity:.6;}
  .widget-rs:hover,.widget-rs:active{opacity:1 !important;}
  .widget.bare .widget-rs,.widget[data-max="1"] .widget-rs{display:none;}
  /* unified floating bar: pen palette + dock, draggable, combined when both active */
  #hud{
    position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:5500;
    display:none; gap:8px; align-items:center; flex-wrap:wrap; max-width:94vw;
    padding:5px 8px; border-radius:14px;
    background:rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:0 6px 18px rgba(30,50,90,.18); border:1px solid rgba(255,255,255,.7);
  }
  #hud{display:flex;}
  .hud-div{display:none; width:1.5px; height:26px; background:#c3cfde; border-radius:2px; flex:none;}
  #hud.has-dock .hud-div{display:block;}
  #dock{display:none; gap:8px; align-items:center; flex-wrap:wrap;}
  #hud.has-dock #dock{display:flex;}
  /* collapse + orientation */
  .hud-btn{
    border:none; background:var(--surface-2); border-radius:8px; width:26px; height:26px;
    cursor:pointer; font-size:13px; line-height:1; padding:0; flex:none; font-weight:900; color:var(--ink);
  }
  .hud-btn:hover{background:var(--surface-3);}
  #hud.min #penbar,#hud.min #dock,#hud.min .hud-div{display:none !important;}
  #hud.vert{
    flex-direction:column; align-items:center; flex-wrap:nowrap;
    max-height:calc(100vh - var(--tbar) - 26px); overflow-y:auto; overflow-x:hidden;
    max-width:none; width:92px;
  }
  #hud.vert #penbar{flex-direction:column; flex-wrap:nowrap; align-items:center;}
  #hud.vert #penbar .wp-group{display:grid; grid-template-columns:repeat(2,30px); justify-items:center; align-items:center;}
  #hud.vert .hud-div{width:26px; height:1.5px;}
  #hud.vert #dock{flex-direction:column; flex-wrap:nowrap;}
  .dock-item{
    border:none; display:flex; align-items:center; gap:7px; background:var(--surface);
    border-radius:10px; padding:6px 12px; font:inherit; font-weight:700; font-size:13px;
    color:var(--ink); cursor:pointer; box-shadow:0 2px 6px rgba(30,50,90,.12);
  }
  .dock-item:hover{background:var(--surface-2); transform:translateY(-2px);}
  .dock-item .di{font-size:16px; line-height:1;}
  /* sluitknop op de dock-pil: geminimaliseerde widgets zijn direct te sluiten */
  .dock-item .dock-close{
    display:flex; align-items:center; justify-content:center;
    width:20px; height:20px; margin:-2px -6px -2px 0; border-radius:7px;
    font-size:11px; color:var(--muted); line-height:1;
  }
  .dock-item .dock-close:hover{background:var(--red-soft); color:var(--red);}
  @media (pointer:coarse){
    .dock-item .dock-close{width:28px; height:28px;}
  }
  .widget-head{
    display:flex; align-items:center; gap:10px; padding:10px 14px;
    background:rgba(255,255,255,.4); border-bottom:1px solid rgba(150,170,200,.28);
    cursor:grab; flex:none;
  }
  .widget-head:active{cursor:grabbing;}
  .widget-head .wicon{font-size:20px;}
  .widget-head .wtitle{font-weight:800; font-size:15px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .wclose{
    border:none; background:var(--red-soft); color:var(--red); width:28px; height:28px;
    border-radius:9px; font-weight:900; cursor:pointer; font-size:14px; line-height:1; flex:none;
  }
  .wclose:hover{background:var(--red); color:#fff;}
  .wmin{
    border:none; background:var(--surface-2); color:var(--ink); width:28px; height:28px;
    border-radius:9px; font-weight:900; cursor:pointer; font-size:15px; line-height:1; flex:none;
  }
  .wmin:hover{background:var(--surface-3);}
  .wz{font-size:10.5px; width:auto; min-width:30px; padding:0 5px;}
  .wz.on{background:var(--accent-soft); color:var(--accent-ink);}
  .widget-body{flex:1; overflow:hidden; position:relative; display:flex; flex-direction:column; min-height:0; container-type:inline-size; container-name:widget;}
  /* ---------- Modals ---------- */
  .modalwrap{
    position:fixed; inset:0; z-index:6000; background:rgba(15,22,38,.4);
    display:none; align-items:center; justify-content:center;
  }
  .modalwrap.open{display:flex;}
  .modal{
    background:var(--surface); border-radius:var(--radius-l); padding:24px 26px;
    width:min(680px,92vw); max-height:88vh; overflow:auto;
    box-shadow:var(--shadow-2); border:1px solid var(--line);
  }
  .modal h2{margin:0 0 14px; font-size:20px; font-weight:700;}
  /* galerij: gelijke tegel-hoogtes (grid-rijen strekken mee, vaste inhoud-zones) */
  .gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); grid-auto-rows:1fr; gap:12px;}
  .gcard{
    border:1px solid var(--line); border-radius:var(--radius); padding:16px 14px;
    text-align:center; cursor:pointer; transition:border-color .15s, box-shadow .15s;
    background:var(--surface); display:flex; flex-direction:column;
    align-items:center; justify-content:flex-start; min-height:132px;
  }
  .gcard:hover{border-color:var(--accent); box-shadow:var(--shadow-1);}
  .gcard .gi{font-size:36px; line-height:1;}
  .gcard .gn{font-weight:700; margin-top:9px; font-size:15px;}
  .gcard .gd{font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.35;}
  /* login + instellingen modals */
  #loginModal{width:min(400px,92vw);}
  .login-logo{display:flex; align-items:center; justify-content:center; gap:10px; margin:2px 0 18px;}
  .login-logo .logo-owl{width:46px; height:40px;}
  .login-logo .logo-word{font-size:24px;}
  /* instellingen is breder dan het inlogscherm: het beheerpaneel (tabblad) heeft
     de ruimte nodig van wat vroeger een eigen, brede modal was (#adminModal) */
  #settingsModal{width:min(760px,94vw); max-height:86vh; overflow:auto;}
  .st-section[data-section="account"]{max-width:420px;}
  .st-section[data-section="account"] .am-h3:first-of-type{margin-top:0;}
  #loginModal input,#settingsModal input{
    width:100%; border:1px solid var(--line); border-radius:var(--radius);
    height:var(--control-h); padding:0 12px;
    font:inherit; font-size:15px; outline:none; margin-bottom:10px;
    background:var(--surface); color:var(--ink);
  }
  #loginModal input:focus,#settingsModal input:focus{border-color:var(--accent);}
  .lrow{display:flex; gap:8px;}
  .lrow .tbtn{flex:1;}
  .lrow input{flex:1; min-width:0; margin-bottom:0;}
  .lrow .pwtoggle{flex:0 0 auto; white-space:nowrap; padding-left:10px; padding-right:10px;}
  .formMsg{min-height:20px; font-size:13.5px; font-weight:700; color:var(--red); margin:6px 0;}
  .formMsg.ok{color:var(--green);}
  .guestnote{font-size:13px; color:var(--muted); margin-top:12px; line-height:1.45;}
  /* instellingen: neutrale kaarten per sectie (.am-reset, hergebruikt van het
     beheerpaneel) i.p.v. het speelse bord-uiterlijk - dit scherm is voor volwassenen */
  #settingsModal .am-reset .lrow{margin:0;}
  #settingsModal .am-reset .guestnote{margin-top:2px;}
  .st-footer{
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    margin-top:12px; padding-top:12px; border-top:1.5px solid var(--line);
    font-size:11px; color:var(--muted); flex:none;
  }
  #settingsModal .am-name{font-size:16px;}
  /* ---------- Instellingen-schil: nav links, inhoud rechts, zoeken boven ----- */
  .st-modal{
    width:min(980px,96vw); height:min(700px,92vh); max-height:92vh;
    display:flex; flex-direction:column; overflow:hidden; padding:18px 22px;
  }
  .st-head{display:flex; align-items:center; gap:14px; flex:none; padding-bottom:12px;}
  .st-head h2{margin:0; font-size:19px;}
  #stSearch{
    flex:1; max-width:360px; margin-left:auto; min-width:120px;
    height:var(--control-h); padding:0 12px; font-size:14px;
    border:1.5px solid var(--line); border-radius:10px;
    background:var(--surface-2); color:var(--ink); outline:none;
  }
  #stSearch:focus{border-color:var(--accent);}
  .st-body{display:flex; flex:1; min-height:0; border-top:1.5px solid var(--line);}
  #stNav{
    width:200px; flex:none; overflow-y:auto; padding:12px 12px 12px 0;
    border-right:1.5px solid var(--line);
    display:flex; flex-direction:column; gap:2px; align-content:flex-start;
  }
  .st-nav-group{
    font-size:10.5px; font-weight:800; color:var(--muted);
    text-transform:uppercase; letter-spacing:.5px; margin:12px 6px 4px;
  }
  .st-nav-group:first-child{margin-top:0;}
  .st-nav-btn{
    display:flex; gap:9px; align-items:center; border:none; background:transparent;
    padding:8px 10px; border-radius:9px; cursor:pointer; text-align:left;
    font-size:14px; font-weight:650; color:var(--ink);
  }
  .st-nav-btn:hover{background:var(--surface-3);}
  .st-nav-btn.active{background:var(--accent-soft); color:var(--accent-ink);}
  .st-nav-ico{flex:none; width:20px; text-align:center;}
  #stContent{flex:1; min-width:0; overflow-y:auto; padding:14px 4px 14px 18px;}
  #stSecHead{margin-bottom:12px;}
  #stSecHead:empty{display:none;}
  .st-sec-title{font-size:17px; font-weight:800;}
  .st-sec-sub{font-size:12.5px; color:var(--muted); margin-top:2px;}
  /* zoekresultaten: gegroepeerd per sectie, klik = navigeren */
  #stSearchResults{display:flex; flex-direction:column; gap:2px;}
  .st-result{
    display:flex; gap:9px; align-items:center; border:none; background:transparent;
    padding:8px 10px; border-radius:9px; cursor:pointer; text-align:left;
    font-size:14px; color:var(--ink); width:100%;
  }
  .st-result:hover{background:var(--surface-3);}
  .st-result-lbl{font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .st-result-sub{margin-left:auto; flex:none; font-size:12px; color:var(--muted);}
  /* smal scherm: nav wordt een horizontale strook boven de inhoud */
  @media (max-width:720px){
    .st-modal{padding:14px;}
    .st-body{flex-direction:column;}
    #stNav{
      width:auto; flex-direction:row; overflow-x:auto; overflow-y:hidden;
      border-right:none; border-bottom:1.5px solid var(--line);
      padding:8px 0; gap:4px;
    }
    .st-nav-group{display:none;}
    .st-nav-btn{flex:none; padding:7px 10px;}
    #stContent{padding:12px 2px;}
    #stSearch{max-width:none;}
  }
  /* =========================================================
     Letter game widget
  ==========================================================*/
  .lg{display:flex; flex-direction:column; flex:1; min-height:0; padding:12px 14px; gap:10px;}
  .lg-top{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .lg-levels{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px;}
  .lg-levels button{
    border:none; border-radius:999px; background:transparent; padding:6px 12px;
    font:inherit; font-weight:700; font-size:13.5px; color:var(--muted); cursor:pointer;
  }
  .lg-levels button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);}
  .lg-cards{display:flex; gap:5px; flex-wrap:wrap;}
  .lg-cards button{
    border:1px solid var(--line); background:var(--surface); width:34px; height:34px; border-radius:10px;
    font:inherit; font-weight:800; color:var(--muted); cursor:pointer; font-size:14px;
  }
  .lg-cards button.active{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);}
  .lg-cards .lg-theme{
    width:auto; padding:0 11px; max-width:120px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;
  }
  .lg-num{
    border:1px solid var(--line); border-radius:10px; height:34px; font:inherit;
    font-weight:800; font-size:13px; color:var(--muted); background:var(--surface);
    padding:0 4px; outline:none; cursor:pointer;
  }
  .lg-snd,.lg-mode{
    border:1px solid var(--line); border-radius:10px; width:34px; height:34px;
    background:var(--surface); cursor:pointer; font-size:15px; line-height:1; padding:0; flex:none;
  }
  .lg-snd.off{opacity:.55;}
  /* small digit blocks/slots for the maths widgets */
  .blok.sm{width:46px; height:74px; border-radius:10px; padding-top:4px;}
  .blok.sm .bl{font-size:24px; height:30px; color:var(--purple);}
  .blok.sm .dots,.slot.sm .dots{grid-template-columns:repeat(2,7px); grid-template-rows:repeat(3,7px); gap:2.5px;}
  .blok.sm .dots i,.slot.sm .dots i{width:7px; height:7px;}
  .blok.sm .blok-dots{margin-bottom:7px;}
  .slot.sm{width:46px; height:74px; padding-top:4px;}
  .slot.sm .ghost{font-size:22px; height:26px;}
  .slot.sm .slot-dots{margin-bottom:6px;}
  .slot.sm .dots i.off{width:6px; height:6px;}
  .mt-slots{display:flex; gap:8px; justify-content:center;}
  .mt-tray{gap:8px; padding:10px 8px; min-height:96px;}
  .mt.blocks .mt-a,.mt.blocks .mt-pad{display:none;}
  .mt:not(.blocks) .mt-slots,.mt:not(.blocks) .mt-tray{display:none;}
  /* on-screen letter keyboard (letters widget, type mode) */
  .lg-kbd{gap:6px; padding:10px;}
  .lg-kbd button{
    width:40px; height:46px; border-radius:10px; border:2px solid var(--wood-d);
    background:linear-gradient(#fdf3dd,var(--wood)); font:inherit; font-weight:900;
    font-size:20px; cursor:pointer; padding:0;
  }
  .lg-kbd button.v{color:var(--red);}
  .lg-kbd button.c{color:var(--blue);}
  .lg.typemode .lg-tray.blocks-tray{display:none;}
  .lg:not(.typemode) .lg-kbd{display:none;}
  .lg-ed-themerow{display:flex; gap:8px; align-items:center;}
  .ed-theme-sel{
    flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:9px 10px;
    font:inherit; font-weight:700; font-size:15px; outline:none; background:var(--surface); cursor:pointer;
  }
  .ed-theme-name, .ed-theme-folder{
    border:2px solid var(--blue); border-radius:10px; padding:9px 10px;
    font:inherit; font-size:15px; outline:none; width:180px;
  }
  .ed-theme-del{
    border:none; background:var(--red-soft); color:var(--red); border-radius:10px;
    width:40px; height:40px; cursor:pointer; font-size:15px; flex:none;
  }
  .ed-theme-del:hover{background:var(--red); color:#fff;}
  .ed-theme-mv{
    border:none; background:var(--surface-2, #eef); color:var(--ink); border-radius:10px;
    width:40px; height:40px; cursor:pointer; font-size:15px; flex:none;
  }
  .lg-progress{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:8px; white-space:nowrap;}
  .lg-stars{color:#d9a400; font-size:14px; min-width:34px; text-align:right;}
  .lg-instr{
    background:var(--surface-2); border:1.5px dashed #bcd4f2;
    border-radius:12px; padding:6px 14px; font-size:14.5px; font-weight:700; color:#37588a;
    text-align:center; min-height:42px; display:flex; align-items:center; justify-content:center;
    flex:none;
  }
  .lg-card{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:16px; background:var(--surface); border:1px solid var(--line);
    border-radius:18px; padding:12px; min-height:0; position:relative; overflow:hidden;
  }
  .lg-pic{font-size:64px; line-height:1; filter:drop-shadow(0 4px 6px rgba(0,0,0,.12));}
  .lg-pic img{width:80px; height:80px; object-fit:contain; border-radius:12px; vertical-align:middle;}
  .lg-slots{display:flex; gap:10px;}
  .slot{
    width:64px; height:98px; border-radius:12px; position:relative;
    background:#e9eef5; border:2.5px dashed #b9c7d9;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding-top:6px; transition:all .12s;
  }
  .slot.droptarget{border-color:var(--green); background:#e3f6ea; transform:scale(1.06);}
  .slot .ghost{font-size:30px; font-weight:800; color:#c2cddc; height:40px; display:flex; align-items:center;}
  .slot.filled{border-style:solid; border-color:transparent; background:transparent; padding:0;}
  .slot.filled .ghost,.slot.filled .slot-dots{display:none;}
  .slot.shake{animation:shake .35s;}
  @keyframes shake{
    0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);}
    40%{transform:translateX(7px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(5px);}
  }
  .blok{
    width:64px; height:98px; border-radius:12px; cursor:grab; touch-action:none;
    display:flex; flex-direction:column; align-items:center; padding-top:6px;
    background:linear-gradient(#fdf3dd,var(--wood)); border:2.5px solid var(--wood-d);
    box-shadow:0 4px 0 var(--wood-d), 0 7px 14px rgba(60,40,0,.16);
    position:relative; flex:none;
  }
  .blok:active{cursor:grabbing;}
  .blok .bl{font-size:34px; font-weight:900; height:44px; display:flex; align-items:center;}
  .blok.vowel .bl{color:var(--red);}
  .blok.cons .bl{color:var(--blue);}
  .blok .blok-dots{margin-top:auto; margin-bottom:10px;}
  .blok.in-slot{cursor:pointer; animation:pop .3s;}
  .blok.dragging{opacity:.25;}
  @keyframes pop{0%{transform:scale(.6);} 60%{transform:scale(1.12);} 100%{transform:scale(1);}}
  .slot .slot-dots{margin-top:auto; margin-bottom:9px;}
  .dots{display:grid; grid-template-columns:repeat(2,9px); grid-template-rows:repeat(3,9px); gap:3px;}
  .dots i{width:9px; height:9px; border-radius:50%; background:transparent;}
  .blok .dots i.on{background:#b98a3c; box-shadow:inset 0 -1.5px 2px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.5);}
  .blok .dots i.off{background:rgba(0,0,0,.05);}
  .slot .dots i.on{background:#aebcce; box-shadow:inset 0 2px 3px rgba(30,50,80,.4);}
  .slot .dots i.off{background:transparent; border:1px dotted #ccd7e4; width:7px; height:7px;}
  .lg-tray{
    display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
    background:var(--surface-2); border-radius:16px; padding:14px 12px; min-height:130px; flex:none;
  }
  .lg-bottom{display:flex; align-items:center; justify-content:center; gap:12px; min-height:46px; flex:none;}
  .lg-next{
    border:none; border-radius:12px; padding:10px 22px; font:inherit; font-weight:800;
    background:var(--green); color:#fff; cursor:pointer; font-size:15.5px; display:none;
  }
  .lg-next.show{display:inline-block; animation:pop .3s;}
  .lg-done{
    position:absolute; inset:0; border-radius:18px; display:none; align-items:center;
    justify-content:center; flex-direction:column; gap:6px;
    background:rgba(255,255,255,.88); backdrop-filter:blur(2px); z-index:5;
  }
  .lg-done.show{display:flex;}
  .lg-done .dg{font-size:52px;}
  .lg-done .dt{font-size:24px; font-weight:900; color:var(--green);}
  .confetti{position:absolute; width:10px; height:10px; border-radius:3px; top:-12px; z-index:6; pointer-events:none; animation:fall linear forwards;}
  @keyframes fall{to{transform:translateY(110vh) rotate(720deg);}}
  #dragClone{
    position:fixed; z-index:9000; pointer-events:none; transform:translate(-50%,-60%) scale(1.08);
    filter:drop-shadow(0 12px 16px rgba(0,0,0,.28));
  }
  /* ---------- custom words editor ---------- */
  .lg-editor{
    position:absolute; inset:0; z-index:20; background:var(--surface); display:none;
    flex-direction:column; gap:10px; padding:14px 16px; overflow:auto;
  }
  .lg-editor.open{display:flex;}
  .lg-ed-head{display:flex; align-items:center; justify-content:space-between;}
  .lg-ed-head b{font-size:17px;}
  .lg-ed-form{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    background:var(--surface-2); border-radius:14px; padding:12px;
  }
  .lg-ed-form input[type=text]{
    border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit;
    font-size:16px; outline:none;
  }
  .lg-ed-form input.ed-word{width:170px; text-transform:lowercase;}
  .ed-preview{width:52px; height:52px; display:flex; align-items:center; justify-content:center;
    font-size:34px; background:var(--surface); border-radius:10px; border:2px dashed var(--line); overflow:hidden; flex:none;}
  .ed-preview img{width:100%; height:100%; object-fit:contain;}
  .ed-add{border:none; border-radius:10px; padding:11px 20px; font:inherit; font-weight:800;
    background:var(--green); color:#fff; cursor:pointer; font-size:14.5px;}
  .ed-msg{width:100%; color:var(--red); font-weight:700; font-size:13.5px; min-height:16px;}
  /* modern tabsysteem: underline-tabs die overlopen in hun paneel.
     De tabbalk deelt de ondergrond met de inhoud; alleen een hairline scheidt ze
     en de accentlijn van de actieve tab valt daaroverheen. */
  .ed-tabs{
    display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:14px;
    overflow-x:auto; scrollbar-width:thin;
  }
  .ed-tabs button{
    border:none; border-radius:0; padding:10px 15px 11px; font:inherit; font-weight:700;
    font-size:14px; background:transparent; color:var(--muted); cursor:pointer;
    position:relative; margin-bottom:-1px; flex:none;
  }
  .ed-tabs button:hover{color:var(--ink);}
  .ed-tabs button.active{color:var(--ink);}
  .ed-tabs button.active::after{
    content:""; position:absolute; left:10px; right:10px; bottom:0;
    height:2.5px; border-radius:2px; background:var(--accent);
  }
  .ed-pane{padding:2px 0 0; min-height:120px;}
  /* uniforme segmented control (kleine keuzegroepen: taal, niveau, timer, chips) */
  .ed-cats{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px;}
  .ed-cats button{
    border:none; background:var(--surface-2); border-radius:999px; padding:6px 12px; font:inherit;
    font-weight:700; font-size:12.5px; color:var(--muted); cursor:pointer;
  }
  .ed-cats button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); outline:1.5px solid var(--accent);}
  .ed-grid{display:flex; gap:4px; flex-wrap:wrap; max-height:170px; overflow:auto;}
  .ed-grid button{
    border:none; background:transparent; border-radius:9px; font-size:26px;
    width:42px; height:42px; cursor:pointer; padding:0; line-height:1;
  }
  .ed-grid button:hover{background:#dbe8f8;}
  .ed-grid button.sel{background:var(--accent-soft); outline:1.5px solid var(--accent);}
  .ed-pictorow{display:flex; gap:8px; margin-bottom:10px;}
  .ed-pictorow input{flex:1; border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit; font-size:15px; outline:none;}
  .ed-pictorow .tbtn{flex:none;}
  .ed-pgrid{display:flex; gap:8px; flex-wrap:wrap; max-height:180px; overflow:auto;}
  .ed-pgrid button{
    border:1px solid var(--line); background:var(--surface); border-radius:12px; width:74px; height:74px;
    cursor:pointer; padding:5px;
  }
  .ed-pgrid button:hover{border-color:var(--blue);}
  .ed-pgrid button.sel{border-color:var(--accent); background:var(--accent-soft);}
  .ed-pgrid img{width:100%; height:100%; object-fit:contain;}
  .ed-credit{font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.4;}
  .ed-credit a{color:var(--blue);}
  .ed-status{font-size:13.5px; font-weight:700; color:var(--muted); padding:6px 0;}
  .ed-upload{background:var(--surface-2); border-radius:10px; padding:11px 16px; font-weight:700;
    font-size:14px; cursor:pointer; display:inline-block;}
  .ed-upload input{display:none;}
  .ed-uphint{font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.45;}
  .ed-p-library{min-height:120px;padding:18px;border:1px dashed var(--accent);border-radius:14px;background:linear-gradient(135deg,var(--surface-2),var(--accent-soft));text-align:center;}
  .ed-open-library{min-height:46px;font-weight:850;}
  .ed-library-hint{max-width:520px;margin:10px auto 0;color:var(--muted);font-size:13px;line-height:1.5;}
  .lg-ed-list{display:flex; flex-direction:column; gap:6px;}
  .lg-ed-list .empty{color:var(--muted); font-weight:700; text-align:center; padding:18px 0;}
  .ed-row{display:flex; align-items:center; gap:12px; background:var(--surface-2); border-radius:12px; padding:7px 12px;}
  .ed-row .ep{width:40px; height:40px; font-size:28px; display:flex; align-items:center; justify-content:center;}
  .ed-row .ep img{width:100%; height:100%; object-fit:contain; border-radius:8px;}
  .ed-row .ew{font-weight:800; font-size:17px; letter-spacing:2px; flex:1;}
  .ed-row .edel{border:none; background:var(--red-soft); color:var(--red); border-radius:8px;
    width:30px; height:30px; cursor:pointer; font-weight:900;}
  .ed-row .edel:hover{background:var(--red); color:#fff;}
  .ed-row.base{opacity:.65;}
  /* =========== Notes widget =========== */
  .notes{flex:1; width:100%; min-height:0; border:none; resize:none; font:inherit; font-size:16px;
    padding:16px; outline:none; background:transparent; color:#26354a; line-height:1.55;}
  .notes.large{font-size:22px;}
  /* =========== Writing pad widget =========== */
  .wp{flex:1; min-height:0; display:flex; flex-direction:column;}
  .wp-bar{
    display:flex; gap:10px; padding:8px 10px; flex-wrap:wrap; align-items:center;
    flex:none; background:var(--surface-2); border-bottom:1px solid var(--line);
  }
  .wp-group{display:flex; gap:4px; align-items:center; background:var(--surface-2); border-radius:10px; padding:3px;}
  .wp-group button{
    border:none; background:transparent; border-radius:8px; width:32px; height:32px;
    cursor:pointer; font-size:16px; line-height:1; padding:0;
    display:flex; align-items:center; justify-content:center;
  }
  .wp-group button.on{background:var(--surface); box-shadow:0 1px 4px rgba(30,50,90,.2);}
  .wp-color{border-radius:50% !important; position:relative;}
  .wp-color i{width:18px; height:18px; border-radius:50%; display:block;}
  .wp-color.on{outline:2.5px solid var(--ink); outline-offset:-3px;}
  .wp-size i{border-radius:50%; background:var(--ink); display:block;}
  .wp-bg{font-size:0 !important;}
  .wp-bg i{
    width:20px; height:20px; display:block; border-radius:4px; border:1.5px solid #9db6d8;
    background-color:#fff; background-size:100% 25%;
  }
  .wp-bg[data-bg=blank] i{background-image:none;}
  .wp-bg[data-bg=dots] i{background-image:radial-gradient(circle,#9db6d8 1px,transparent 1px); background-size:5px 5px;}
  .wp-bg[data-bg=lines] i{background-image:repeating-linear-gradient(#0000 0 4px, #9db6d8 4px 5px);}
  .wp-bg[data-bg=write] i{background-image:repeating-linear-gradient(#0000 0 2px, #c3d5ec 2px 3px, #0000 3px 5px, #6d92c4 5px 6px);}
  .wp-bg[data-bg=grid-s] i{background-image:repeating-linear-gradient(#0000 0 4px, #9db6d8 4px 5px),repeating-linear-gradient(90deg,#0000 0 4px, #9db6d8 4px 5px);}
  .wp-bg[data-bg=grid-b] i{background-image:repeating-linear-gradient(#0000 0 8px, #9db6d8 8px 9px),repeating-linear-gradient(90deg,#0000 0 8px, #9db6d8 8px 9px);}
  .wp-clear{border:none; background:var(--red-soft); color:var(--red); border-radius:10px;
    width:34px; height:34px; cursor:pointer; font-size:15px; margin-left:auto;}
  .wp-clear:hover{background:var(--red); color:#fff;}
  .wp-stage{flex:1; min-height:0; position:relative; background:var(--surface);}
  .wp-stage canvas{position:absolute; inset:0; touch-action:none; cursor:crosshair;}
  .wp-stage.t-text canvas{cursor:text;}
  .wp-text-input{
    position:absolute; z-index:5; background:rgba(255,255,255,.85);
    border:1.5px dashed var(--blue); border-radius:6px; padding:2px 6px;
    font-family:inherit; font-weight:700; outline:none; min-width:130px;
  }
  /* paper backgrounds (CSS, so the eraser only removes ink) */
  .wp-stage.bg-lines{background-image:repeating-linear-gradient(#0000 0 31px, #aec5e4 31px 32px);}
  .wp-stage.bg-write{background-image:repeating-linear-gradient(
    #0000 0 15px, #c3d5ec 15px 16px, #0000 16px 31px, #6d92c4 31px 32.5px, #0000 32.5px 47px, #c3d5ec 47px 48px, #0000 48px 63px);}
  .wp-stage.bg-grid-s{background-image:
    repeating-linear-gradient(#0000 0 19px, #c9d9ee 19px 20px),
    repeating-linear-gradient(90deg,#0000 0 19px, #c9d9ee 19px 20px);}
  .wp-stage.bg-grid-b{background-image:
    repeating-linear-gradient(#0000 0 39px, #aec5e4 39px 40px),
    repeating-linear-gradient(90deg,#0000 0 39px, #aec5e4 39px 40px);}
  /* =========== Media widget =========== */
  .media{flex:1; min-height:0; display:flex; flex-direction:column;}
  .media-bar{
    display:flex; gap:8px; padding:8px 10px; flex:none;
    background:var(--surface-2); border-bottom:1px solid var(--line);
  }
  .media-bar input{
    flex:1; min-width:0; border:1px solid var(--line); border-radius:10px;
    padding:8px 10px; font:inherit; font-size:14px; outline:none;
  }
  .media-bar input:focus{border-color:var(--blue);}
  .media-stage{
    flex:1; min-height:0; background:#141a24; display:flex;
    align-items:center; justify-content:center; overflow:hidden;
  }
  .media-stage iframe{width:100%; height:100%; border:none;}
  .media-stage img,.media-stage video{max-width:100%; max-height:100%;}
  .media-msg{color:#93a4bd; font-weight:700; font-size:14px; text-align:center; padding:20px; line-height:1.5;}
  .media-yt{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
  .media-yt img{max-width:100%; max-height:100%;}
  .media-play{
    position:absolute; border:none; width:76px; height:54px; border-radius:14px;
    background:rgba(224,60,50,.95); color:#fff; font-size:24px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.4);
  }
  .media-play:hover{transform:scale(1.08);}
  /* =========== Math widgets =========== */
  .mt{flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px 14px;}
  .mt-top{display:flex; gap:8px; align-items:center; flex:none;}
  .mt-score{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--muted); white-space:nowrap;}
  .mt-card{
    flex:1; min-height:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:12px; background:var(--surface);
    border:1px solid var(--line); border-radius:18px; position:relative; padding:10px; overflow:hidden;
  }
  .mt-q{font-size:40px; font-weight:900; letter-spacing:1px; text-align:center;}
  .mt-a{
    min-width:110px; height:56px; border-radius:14px; border:2.5px dashed #b9c7d9;
    background:var(--surface-2); font-size:32px; font-weight:900; display:flex; align-items:center;
    justify-content:center; color:var(--blue); padding:0 16px;
  }
  .mt-a.ok{border-style:solid; border-color:var(--green); background:#e3f6ea; color:var(--green);}
  .mt-a.shake{animation:shake .35s;}
  .mt-fb{min-height:24px; font-size:16px; font-weight:800; color:var(--green); text-align:center;}
  .mt-fb.ans{color:var(--red);}
  .mt-pad{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; flex:none;}
  .mt-pad button{
    border:none; border-radius:12px; background:var(--surface-2); font:inherit; font-weight:900;
    font-size:22px; padding:12px 0; cursor:pointer; color:var(--ink);
  }
  .mt-pad button:hover{background:var(--surface-3);}
  .mt-pad .ok{background:var(--green); color:#fff;}
  .mt-done{
    position:absolute; inset:0; border-radius:18px; display:none; flex-direction:column;
    align-items:center; justify-content:center; gap:8px; background:rgba(255,255,255,.9);
    backdrop-filter:blur(2px); z-index:5;
  }
  .mt-done.show{display:flex;}
  .mt-done .dg{font-size:46px;}
  .mt-done .dt{font-size:22px; font-weight:900; color:var(--green);}
  .mt-done .ds{font-size:16px; font-weight:800; color:var(--muted);}
  .mt-again{
    border:none; border-radius:12px; padding:10px 22px; background:var(--green);
    color:#fff; font:inherit; font-weight:800; font-size:15px; cursor:pointer; margin-top:6px;
  }
  /* =========== high-contrast accessibility mode =========== */
  /* wint óók van body.dark: hoog contrast is altijd zwart-op-wit */
  body.hc,body.dark.hc{
    --bg:#fff; --ink:#000; --muted:#2b2b2b; --blue:#0047ab; --red:#c40000;
    --green:#006b2d; --yellow:#ffd400; --wood:#ffe9b0; --wood-d:#8a6a00;
    --surface:#fff; --surface-2:#f2f2f2; --surface-3:#e2e2e2; --line:#000;
    --accent:#0047ab; --accent-ink:#00306f; --accent-soft:#d6e4ff;
    --red-soft:#ffd9d6;
    --glass:#fff; --glass-strong:#fff; --glass-line:#000;
  }
  body.hc #board.bg-dots{background-image:radial-gradient(circle,#7d8ea3 1.7px,transparent 1.7px);}
  body.hc .widget{background:var(--surface); border:2.5px solid #000; box-shadow:0 4px 14px rgba(0,0,0,.35); backdrop-filter:none;}
  body.hc .widget:hover,.body.hc .widget:focus-within{background:var(--surface);}
  body.hc .widget .wmin,body.hc .widget .wclose{opacity:1;}
  body.hc .widget-rs{opacity:1; border:3px solid #000;}
  body.hc .widget-head{background:#f2f2f2; border-bottom:2px solid #000;}
  body.hc .slot{border-color:#000; background:var(--surface);}
  body.hc .slot .ghost{color:#666;}
  body.hc .slot .dots i.on{background:#333;}
  body.hc .blok .dots i.on{background:#6a4a00;}
  body.hc .lg-instr{background:var(--surface); border-color:#000; color:#000;}
  body.hc #hud,body.hc .dock-item,body.hc .fab-item,body.hc #penbar .wp-group{border:2px solid #000; background:var(--surface);}
  body.hc #fab{background:#0047ab;}
  body.hc :focus-visible{outline:3px solid #0047ab; outline-offset:2px;}
  body.hc .mm-node{box-shadow:0 3px 10px rgba(0,0,0,.4); border-width:3px;}
  /* high contrast inside every widget */
  body.hc .lg-levels,body.hc .tseg{background:var(--surface); border:2px solid #000; border-radius:12px;}
  body.hc .lg-levels button,body.hc .tseg button{color:#000;}
  body.hc .lg-levels button.active{background:#006b2d; color:#fff;}
  body.hc .lg-cards button,body.hc .lg-num,body.hc .fl-sel,body.hc .lg-snd,body.hc .lg-mode{
    border-color:#000; color:#000; background:var(--surface);
  }
  body.hc .lg-cards button.active{background:#ffd400; border-color:#000; color:#000;}
  body.hc .lg-tray{background:var(--surface); border:2px dashed #000;}
  body.hc .lg-card,body.hc .mt-card{background:var(--surface); border-color:#000;}
  body.hc .lg-progress,body.hc .mt-score,body.hc .mm-hint,body.hc .dc-sum{color:#000;}
  body.hc .lg-stars{color:#7a5d00;}
  body.hc .mt-a{border-color:#000; background:var(--surface);}
  body.hc .mt-pad button{background:var(--surface); border:2px solid #000; color:#000;}
  body.hc .mt-pad .ok{background:#006b2d; border-color:#006b2d; color:#fff;}
  body.hc .mt-fb{color:#006b2d;}
  body.hc .mt-fb.ans{color:#c40000;}
  body.hc .lg-kbd button,body.hc .blok{border-color:#6a4a00;}
  body.hc .fl-word.dim{color:#8a8a8a;}
  body.hc .slot .dots i.off{border-color:#666;}
  body.hc .np textarea,body.hc .media-bar input,body.hc .ed-theme-sel,
  body.hc .lg-ed-form input[type=text],body.hc .ed-pictorow input{border-color:#000; color:#000;}
  body.hc .np-result{background:#0047ab;}
  body.hc .np-row label,body.hc .thint,body.hc .guestnote,body.hc .ed-credit,
  body.hc .gcard .gd,body.hc .st-footer{color:#222;}
  body.hc .gcard{border-color:#000; background:var(--surface);}
  body.hc .gcat-title{color:#000;}
  body.hc .tbtn.ghost{background:var(--surface); border:2px solid #000; color:#000;}
  body.hc .wmin,body.hc .wclose{border:1.5px solid #000; background:var(--surface);}
  body.hc .wclose{color:#c40000;}
  body.hc .wz.on,body.hc #zoomPct.on{background:#ffd400; color:#000;}
  body.hc .ed-tabs button,body.hc .ed-cats button{color:#000; background:var(--surface); border:1.5px solid #000;}
  body.hc .ed-tabs button.active,body.hc .ed-cats button.active{background:#ffd400;}
  body.hc .ed-pane{border-color:#000; background:var(--surface);}
  body.hc .timer .presets button,body.hc .timer .main button,body.hc .ticon,
  body.hc .hud-btn,body.hc .mm-seg button{background:var(--surface); border:1.5px solid #000; color:#000;}
  body.hc .timer .main .bstart{background:#006b2d; border-color:#006b2d; color:#fff;}
  body.hc .dock-item{color:#000;}
  body.hc .media-msg{color:#ddd;}
  /* =========== Flash words widget =========== */
  .fl-word{font-size:58px; font-weight:900; letter-spacing:3px; min-height:70px; display:flex; align-items:center;}
  .fl-word.dim{color:#c2cddc;}
  .fl-pic{font-size:46px; min-height:56px; display:flex; align-items:center;}
  .fl-pic img{width:56px; height:56px; object-fit:contain;}
  .fl-sel{
    border:1px solid var(--line); border-radius:10px; height:34px; font:inherit;
    font-weight:800; font-size:13px; color:var(--muted); background:var(--surface);
    padding:0 6px; outline:none; cursor:pointer;
  }
  /* =========== Chop & blend widget =========== */
  .hk-word{min-height:70px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center;}
  .hk-whole{font-size:52px; font-weight:900; letter-spacing:3px;}
  .hk-l{font-size:46px; font-weight:900; animation:pop .4s both;}
  .hk-l.v{color:var(--red);}
  .hk-l.c{color:var(--blue);}
  .hk-sep{font-size:30px; color:var(--muted); font-weight:700; margin:0 3px;}
  /* =========== Balloon word widget =========== */
  .bl-balloons{font-size:34px; letter-spacing:4px; min-height:44px;}
  .bl-word{font-size:44px; font-weight:900; letter-spacing:6px; min-height:56px; display:flex; align-items:center;}
  .bl-msg{min-height:26px; font-size:17px; font-weight:800;}
  .bl-msg.win{color:var(--green);}
  .bl-msg.lose{color:var(--red);}
  .bl-kbd button:disabled{cursor:default;}
  /* =========== Anchor words widget =========== */
  .an{flex:1; min-height:0; display:flex; flex-direction:column;}
  .an-hint{
    flex:none; font-size:11.5px; font-weight:700; color:var(--muted);
    padding:6px 10px; background:var(--surface-2); border-bottom:1px solid var(--line);
  }
  /* bibliotheekknoppen: bewaar (💾) en verkenner (🗂) rechtsboven op de stage */
  .an{position:relative;}
  .an-tools{position:absolute; top:34px; right:8px; z-index:3; display:flex; gap:6px;}
  .an-tools button{
    border:1px solid var(--line); background:var(--surface); border-radius:10px;
    width:34px; height:34px; cursor:pointer; font-size:15px; opacity:.85;
  }
  .an-tools button:hover{opacity:1; border-color:var(--blue);}
  .an-stage{flex:1; min-height:0; position:relative; overflow:hidden; background:var(--surface); cursor:grab; touch-action:none;}
  .an-stage:active{cursor:grabbing;}
  .an-layer{position:absolute; inset:0;}
  .an-cell{
    position:absolute; width:128px; height:56px; border-radius:12px; border:2px dashed #dbe4f0;
    display:flex; align-items:center; justify-content:center; gap:6px; font-weight:800; font-size:15px;
    color:var(--ink); padding:2px 8px; overflow:hidden; text-align:center; cursor:pointer;
  }
  .an-cell:hover{border-color:#b6c6dc;}
  .an-cell.filled{border-style:solid; border-color:#cdd7e4; background:var(--surface); box-shadow:0 3px 8px rgba(30,50,90,.12);}
  .an-cell.root{border:2.5px solid #d9a400; background:#fff8dd;}
  .an-cell.root.filled{background:var(--yellow); font-size:16px;}
  .an-cell input{width:100%; border:none; outline:none; font:inherit; text-align:center; background:transparent;}
  .an-word{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
  .an-pic{
    flex:none; width:22px; height:22px; display:flex; align-items:center;
    justify-content:center; font-size:16px; line-height:1;
  }
  .an-pic img{width:100%; height:100%; object-fit:contain;}
  /* geen automatisch plaatje (nog) - lege, klikbare plek i.p.v. een nep-ankersymbool,
     dient als snelkoppeling naar de plaatjeskiezer */
  .an-pic-empty{
    border:1.5px dashed #cdd7e4; border-radius:6px; cursor:pointer; opacity:.6;
    transition:opacity .15s, border-color .15s;
  }
  .an-pic-empty:hover{opacity:1; border-color:var(--blue);}
  .an-dot{
    position:absolute; right:4px; bottom:4px; width:15px; height:15px; border-radius:50%;
    border:1.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3); cursor:pointer; padding:0;
    opacity:.55; transition:opacity .15s;
  }
  .an-cell:hover .an-dot{opacity:1;}
  body.hc .an-cell{border-color:#555; color:#000;}
  /* =========== Dice widget =========== */
  .dc{flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px; align-items:center;}
  .dc-row{flex:1; display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; cursor:pointer;}
  .die{
    width:92px; height:92px; background:var(--surface); border:3.5px solid var(--ink); border-radius:18px;
    display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
    padding:10px; box-shadow:0 5px 0 rgba(0,0,0,.15);
  }
  .die.rolling{animation:shake .3s infinite;}
  .die i{width:16px; height:16px; border-radius:50%; background:var(--ink); place-self:center; visibility:hidden;}
  .die i.on{visibility:visible;}
  .dc-sum{font-size:22px; font-weight:900; min-height:28px;}
  /* =========== Traffic light widget =========== */
  .tl{flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:14px;}
  .tl-house{width:min(100%,390px); background:#22272f; border-radius:26px; padding:14px; display:flex; flex-direction:column; gap:9px; box-shadow:0 10px 26px rgba(0,0,0,.35);}
  .tl-lamp{
    width:70px; height:70px; flex:none; border-radius:50%; border:4px solid rgba(255,255,255,.13); cursor:pointer;
    opacity:.22; transition:all .2s; padding:0;
  }
  .tl-lamp.red{background:#e33; color:#e33;}
  .tl-lamp.orange{background:#f5a623; color:#f5a623;}
  .tl-lamp.green{background:#2ecc71; color:#2ecc71;}
  .tl-lamp.on{opacity:1; box-shadow:0 0 46px currentColor;}
  .tl-option{display:flex;align-items:center;gap:15px;color:#fff}.tl-option>span{display:flex;flex-direction:column;gap:2px}.tl-option strong{font-size:18px}.tl-option small{color:#cbd3df;font-size:13px;font-weight:700}.tl-status{min-height:25px;color:var(--ink);font-size:17px;font-weight:900;text-align:center}
  .tl-mini{padding:12px 10px; gap:10px; border-radius:20px;}
  .tl-mini .tl-lamp{width:62px; height:62px;}
  /* =========== Name picker widget =========== */
  .np{flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px;}
  .np textarea{
    flex:1; min-height:0; border:1px solid var(--line); border-radius:12px; padding:10px;
    font:inherit; font-size:14.5px; resize:none; outline:none;
  }
  .np-result{
    min-height:72px; display:flex; align-items:center; justify-content:center;
    font-size:32px; font-weight:900; color:#fff; text-align:center; padding:8px 12px;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    border-radius:18px; position:relative; overflow:hidden;
    text-shadow:0 2px 6px rgba(0,0,0,.3); letter-spacing:1px;
  }
  .np-result.spin{animation:npspin .25s infinite; background:linear-gradient(135deg,var(--orange),var(--red));}
  .np-result.winner{animation:pop .45s;}
  @keyframes npspin{0%,100%{transform:scale(1) rotate(-1deg);} 50%{transform:scale(1.04) rotate(1deg);}}
  .np-row{display:flex; gap:10px; align-items:center; flex:none;}
  .np-row label{font-size:13px; font-weight:700; color:var(--muted); display:flex; gap:5px; align-items:center; margin-left:auto;}
  .np-progress{margin:-3px 0;color:var(--muted);font-size:12px;font-weight:900;text-align:center}
  /* gallery categories */
  .gcat-title{font-size:13.5px; font-weight:800; color:var(--muted); margin:16px 0 8px; text-transform:uppercase; letter-spacing:.5px;}
  .gcat-title:first-child{margin-top:0;}
  /* =========== Timer widget =========== */
  .timer{display:flex; flex-direction:column; align-items:center; flex:1; min-height:0; gap:10px; padding:14px;}
  .tstage{
    flex:1; min-height:0; width:100%; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px;
  }
  .topts{display:flex; justify-content:space-between; align-items:center; width:100%; flex:none;}
  .tseg{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px;}
  .tseg button{border:none; border-radius:999px; background:transparent; padding:6px 12px; font-size:15px; cursor:pointer; line-height:1; color:var(--muted);}
  .tseg button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);}
  .mm-seg button{font:inherit; font-weight:700; font-size:13px;}
  .ticon{border:none; background:var(--surface-2); border-radius:var(--radius); padding:7px 11px; font-size:15px; cursor:pointer; line-height:1;}
  .ticon.on{background:var(--accent-soft); color:var(--accent-ink);}
  .timer .tpie{
    flex:1 1 0; min-height:80px; aspect-ratio:1/1; width:auto; max-width:100%; max-height:220px;
    display:none; cursor:grab; touch-action:none;
  }
  .timer .tpie:active{cursor:grabbing;}
  .timer.m-pie .tpie,.timer.m-both .tpie{display:block;}
  .timer .tdisp{font-size:46px; font-weight:900; font-variant-numeric:tabular-nums; flex:none;}
  .timer.m-both .tdisp{font-size:26px;}
  .timer.m-pie .tdisp{font-size:17px; color:var(--muted);}
  .timer .tdisp.warn{color:var(--red); animation:blink 1s infinite;}
  @keyframes blink{50%{opacity:.35;}}
  .timer .trow{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; flex:none;}
  .thint{flex:none;}
  .timer .presets button{
    border:none; border-radius:999px; padding:6px 13px; background:var(--surface-2); font:inherit;
    font-weight:800; font-size:12.5px; color:var(--muted); cursor:pointer;
  }
  .timer .presets button:hover{background:var(--surface-3); color:var(--ink);}
  .timer .main button{
    border:none; border-radius:12px; padding:10px 26px; font:inherit; font-weight:800;
    font-size:15.5px; cursor:pointer; background:var(--surface-2); color:var(--ink);
  }
  .timer .main .bstart{background:var(--green); color:#fff; min-width:110px;}
  .thint{font-size:11.5px; color:var(--muted); text-align:center; line-height:1.4;}
  .timer.flash{animation:tflash .5s 4;}
  @keyframes tflash{50%{background:#fdeaa0;}}

/* ---------- login-extra's (school, koppelcode) ---------- */
#liSchool{
  width:100%; border:1px solid var(--line); border-radius:var(--radius);
  height:var(--control-h); padding:0 12px; color:var(--ink);
  font:inherit; font-size:15px; outline:none; margin-bottom:10px; background:var(--surface);
}
.lisub{font-size:13px; font-weight:700; color:var(--muted); margin-bottom:8px;}
#ownPwBlock .lrow{margin-bottom:10px;}
#ownPwBlock input{flex:1; min-width:0;}
/* ---------- weergave-instellingen (tabblad "Weergave") ---------- */
.vw-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:var(--control-h); padding:7px 0; border-bottom:1px solid var(--line);
}
.vw-row:last-of-type{border-bottom:none;}
.vw-lbl{font-weight:700; font-size:14.5px;}
.seg{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px; flex:none;}
.seg button{
  border:none; border-radius:999px; padding:6px 13px; font:inherit; font-weight:700;
  cursor:pointer; background:transparent; color:var(--muted); font-size:13.5px;
}
.seg button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);}
/* ---------- beheerpaneel (tabblad "Beheer" binnen Instellingen) ----------
   alle velden/knoppen in een rij zijn even hoog: var(--control-h) */
.am-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.am-head h2{margin:0; font-size:20px;}
.am-h3{margin:14px 0 6px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;}
.am-msg{
  min-height:20px; font-size:13.5px; font-weight:700; color:var(--green); margin:4px 0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
/* vaste schoolkiezer voor de systeemmanager, boven alle beheer-tabs */
.am-schoolbar{
  display:flex; align-items:center; gap:8px; margin:0 0 10px;
  padding:8px 10px; background:var(--surface-2); border-radius:12px;
}
.am-schoolbar-lbl{font-size:16px;}
.am-schoolbar .am-sel{flex:1; min-width:0;}
.am-add{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0;}
.am-inp,.am-sel,.am-pw{
  border:1px solid var(--line); border-radius:var(--radius); height:var(--control-h);
  padding:0 11px; font:inherit; font-size:14px; outline:none;
  background:var(--surface); color:var(--ink); min-width:0;
}
.am-inp:focus,.am-sel:focus,.am-pw:focus{border-color:var(--accent);}
/* de generieke settings-input-regel (width:100%/marge) geldt niet in het beheerpaneel:
   daar bepalen de am-*-regels de maat, zodat alles in een rij gelijk uitlijnt */
#settingsModal #adminModal input{margin-bottom:0;}
.am-inp{flex:1; min-width:140px;}
.am-pw{width:120px;}
.am-list{display:flex; flex-direction:column; gap:5px;}
.am-group{font-weight:700; font-size:13px; margin-top:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;}
/* inklapbare groepskop (leerlingen per klas): klikbaar, pijltje in de tekst */
.am-group-toggle{cursor:pointer; user-select:none;}
.am-group-toggle:hover{color:var(--ink);}
/* formulier-fout direct bij het formulier zelf */
.am-form-err{width:100%; min-height:0; color:var(--red); font-size:13px; font-weight:700;}
/* Systeem-tab: schoolrij duidelijk zwaarder dan de beheerder-subrijen */
.am-row-school{background:var(--accent-soft);}
.am-row-school > .am-name{font-size:15px;}
.am-row-sub{
  margin-left:22px; background:var(--surface);
  border-left:3px solid var(--line); border-radius:var(--radius-s);
}
/* uitklapbaar gereedschapsblok per gebruikersrij (achter het ✏-knopje) */
.am-row-tools{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; width:100%;
  margin-top:6px; padding-top:8px; border-top:1px dashed var(--line);
}
.am-edit{
  border:none; background:transparent; border-radius:8px; cursor:pointer;
  font-size:14px; padding:4px 8px; opacity:.6;
}
.am-edit:hover{opacity:1; background:var(--surface-3);}
.am-edit.on{opacity:1; background:var(--accent-soft);}
/* uniforme maat: álle knoppen en velden in het beheer op controlhoogte,
   zodat formulieren en actieknoppen in elke rij gelijk uitlijnen */
#adminModal .tbtn{
  min-height:var(--control-h); height:var(--control-h);
  padding:0 14px; font-size:14px;
}
/* één interactiesysteem: mini-label boven elk veld/select/knopgroep */
.am-field{display:flex; flex-direction:column; gap:3px; min-width:0;}
.am-field-lbl{
  font-size:10.5px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.4px;
}
/* de rij-flexregels van .am-inp (flex-basis 0/100%) gelden binnen de
   kolom-flex van het label verticaal en drukten het veld plat - binnenin
   een veldlabel dus altijd de vaste controlhoogte, breedte via het label */
.am-field > .am-inp, .am-field > .am-sel, .am-field > .am-pw, .am-field > .am-inline,
.am-field > .am-classes, .am-field > .am-actions{flex:none; width:100%;}
.am-add .am-field{flex:1 1 100%;}
.am-row-tools .am-field{flex:0 1 auto; min-width:150px;}
.am-inline{display:flex; gap:6px; align-items:center;}
.am-inline > .am-inp, .am-inline > .am-pw{flex:1 1 auto; min-width:0;}
/* gevaarlijke acties: afwijkende kleur + tweede klik als bevestiging */
.am-btn.am-danger{background:var(--red-soft); color:var(--red); font-weight:800;}
.am-btn.am-danger.armed{background:var(--red); color:#fff;}
/* credential-resultaat direct bij de gebruikersrij */
.am-result{
  display:flex; align-items:center; gap:8px; width:100%;
  background:var(--accent-soft); color:var(--accent-ink);
  border-radius:10px; padding:8px 12px; font-weight:800;
}
.am-result code{font-size:16px; letter-spacing:.5px;}
.am-row{
  display:flex; gap:8px; align-items:center; background:var(--surface-2);
  border-radius:var(--radius); padding:7px 10px; flex-wrap:wrap;
}
.am-name{font-weight:700; font-size:14px; flex:1; min-width:120px;}
.am-role{font-size:12px; font-weight:700; color:var(--muted);}
.am-code{font-size:12.5px; font-weight:700; color:var(--orange);}
.am-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.am-btn,.am-copy{
  background:var(--surface); border-radius:var(--radius);
  height:var(--control-h); padding:0 12px; border:1px solid var(--line);
  font:inherit; font-weight:700; font-size:12.5px; cursor:pointer; color:var(--ink); line-height:1;
}
.am-btn:hover,.am-copy:hover{background:var(--surface-3);}
.am-del{
  border:1px solid var(--line); background:var(--red-soft); border-radius:var(--radius);
  width:var(--control-h); height:var(--control-h); cursor:pointer; font-size:13px; flex:none;
}
.am-del:hover{background:var(--red);}
.am-classes{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.am-chip{
  display:inline-flex; gap:6px; align-items:center; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;
  font-weight:700; font-size:13px;
}
button.am-chip{cursor:pointer; color:var(--muted);}
button.am-chip.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);}
.am-chipx{border:none; background:transparent; color:var(--red); font-weight:900; cursor:pointer; padding:0; font-size:11px;}
.am-reset{
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; margin:6px 0; display:flex; flex-direction:column; gap:8px;
}
.am-reset-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.am-reset-list{display:flex; flex-direction:column; gap:5px; max-height:260px; overflow:auto;}
.am-reset-row{
  display:flex; gap:8px; align-items:center; background:var(--surface);
  border-radius:8px; padding:5px 8px; flex-wrap:wrap;
}
.am-reset-pw{font-weight:800; font-family:monospace; font-size:13px; color:var(--green);}
body.hc .am-row,body.hc .am-chip{border:1.5px solid #000; background:var(--surface);}
body.hc .am-reset,body.hc .am-reset-row{border:1.5px solid #000; background:var(--surface);}

/* ============================================================
   Mobiel & tablet: responsieve aanpassingen. Alles hieronder is
   additief - de bovenstaande desktopstijl blijft de standaard.
   ============================================================ */

/* ---------- tablet (≤1024px) ---------- */
@media (max-width:1024px){
}

/* ---------- telefoon (≤600px) ---------- */
@media (max-width:600px){
  #toolbar{padding:0 8px; gap:6px; overflow-x:auto;}
  /* alleen de uil op kleine schermen, woordmerk verdwijnt */
  .logo-word{display:none;}
  .tbtn{padding:0 10px; font-size:13px;}
  /* de balk moet écht passen: zonder dit vielen 💾 Opslaan en ⚙ Instellingen
     buiten beeld en zat 🖼 (afbeeldingscatalogus) precies onder de duim -
     elke mis-tik opende dan het schermvullende afbeeldingenscherm. De
     tekstzoom (A−/A＋) is toegankelijkheid en blijft dus zichtbaar; alleen
     het percentage, de catalogusknop (blijft via ＋-menu bereikbaar) en
     volledig scherm verdwijnen, en opslaan toont alleen 💾. */
  #zoomPct,#btnImages,#btnFs{display:none;}
  #btnSave span{display:none;}
  #btnSave{min-width:0;}
  #userLbl{display:inline-block; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;}
  /* tekenbalk en zwevende knoppen deelden op een telefoon de onderrand en
     lagen over elkaar heen: wissen/sluiten op de tekenbalk raakten dan de
     ＋- of bordenknop, waardoor "steeds" het bordenpaneel of ＋-menu
     (→ afbeeldingenscherm) opende. Nu ligt de tekenbalk in een eigen laag
     bóven de knoppenrij (hij groeit omhoog, dus dit klopt bij elke
     schermbreedte), en houden ＋ en borden de onderrand voor zichzelf.
     Gecentreerd op inhoudsbreedte (geen vaste randen), zodat de balk
     geminimaliseerd ook echt smal is. */
  #hud{bottom:88px; max-width:calc(100vw - 16px);}

  /* beheerpaneel: dichte rijen worden gestapeld i.p.v. verdrukt */
  .am-row{flex-direction:column; align-items:stretch;}
  .am-row .am-pw{width:100%;}
  .am-row .am-actions{display:flex; flex-direction:row; justify-content:flex-end; gap:6px;}
  .am-reset-row{flex-direction:column; align-items:stretch;}
  .am-add .am-inp{flex:1 1 100%;}
}

/* ---------- aanraakschermen (los van breedte) ---------- */
@media (pointer:coarse){
  /* alle controls (ook invoervelden) groeien mee naar tikformaat */
  :root{--control-h:44px;}
  .hud-btn{width:var(--tap-sm); height:var(--tap-sm); font-size:15px;}
  #penbar .wp-group button{width:var(--tap-sm); height:var(--tap-sm);}
  #hud.vert{width:104px;}
  #hud.vert #penbar .wp-group{grid-template-columns:repeat(2,36px);}
  .am-chip{padding:7px 14px;}
  .am-chipx{padding:4px;}
  /* geen hover op aanraakschermen: de greep moet altijd zichtbaar zijn */
  .widget-rs{opacity:.7; width:38px; height:38px;}
}

/* ============================================================
   Menubalk-positie: links of rechts (Weergave-instelling).
   De balk wordt een verticale kolom; bord en zwevende elementen
   schuiven mee via dezelfde body-class.
   ============================================================ */
body.tb-left #toolbar,body.tb-right #toolbar{
  top:0; bottom:0; width:var(--tbar); height:auto;
  flex-direction:column; padding:12px 0; gap:10px;
  overflow-y:auto; overflow-x:hidden;
}
body.tb-left #toolbar{left:0; right:auto; border-right:1px solid var(--line); border-bottom:none;}
body.tb-right #toolbar{right:0; left:auto; border-left:1px solid var(--line); border-bottom:none;}
body.tb-left .logo-word,body.tb-right .logo-word,
body.tb-left #verTag,body.tb-right #verTag,
body.tb-left #btnSave span,body.tb-right #btnSave span,
body.tb-left #userLbl,body.tb-right #userLbl{display:none;}
body.tb-left #toolbar .tbtn,body.tb-right #toolbar .tbtn{padding:0; width:var(--control-h); min-width:0; flex:none;}
body.tb-left #btnSave,body.tb-right #btnSave{min-width:0;}
body.tb-left #zoomPct,body.tb-right #zoomPct{min-width:0; font-size:11.5px;}
body.tb-left #board,body.tb-left #pupilView{inset:0 0 0 var(--tbar);}
body.tb-right #board,body.tb-right #pupilView{inset:0 var(--tbar) 0 0;}
body.tb-right #fab{right:calc(var(--tbar) + 16px);}
body.tb-right #fabBoardsBtn{right:calc(var(--tbar) + 88px);}
body.tb-right #boardStrip{right:calc(var(--tbar) + 12px);}
body.tb-left #fabmenu{right:24px;}
body.tb-right #fabmenu{right:calc(var(--tbar) + 16px);}

/* ============================================================
   Weergave-instelling "glas-effect uit": ondoorzichtige panelen
   i.p.v. blur - rustiger en lichter voor oudere digiborden.
   ============================================================ */
body.no-glass .widget,body.no-glass #hud,body.no-glass .fab-item,
body.no-glass #boardStrip,body.no-glass .mm-top,
body.no-glass .widget.bare .widget-head{
  backdrop-filter:none; -webkit-backdrop-filter:none;
  background:var(--surface);
}
body.no-glass .widget-head{background:var(--surface-2);}

/* ============================================================
   Donker thema: bord-achtergrondpatronen en glas-laag.
   (De chrome-laag volgt automatisch via de tokens in body.dark.)
   ============================================================ */
body.dark #board.bg-dots{background-image:radial-gradient(circle,#2c3a5e 1.4px,transparent 1.4px);}
body.dark #board.bg-lines{background-image:repeating-linear-gradient(#0000 0 39px,#2c3a5e 39px 40px);}
body.dark #board.bg-write{background-image:repeating-linear-gradient(
  #0000 0 19px,#243052 19px 20px,#0000 20px 39px,#3a4a70 39px 40.5px,#0000 40.5px 59px,#243052 59px 60px,#0000 60px 79px);}
body.dark #board.bg-grid-s{background-image:
  repeating-linear-gradient(#0000 0 24px,#243052 24px 25px),
  repeating-linear-gradient(90deg,#0000 0 24px,#243052 24px 25px);}
body.dark #board.bg-grid-b{background-image:
  repeating-linear-gradient(#0000 0 49px,#2c3a5e 49px 50px),
  repeating-linear-gradient(90deg,#0000 0 49px,#2c3a5e 49px 50px);}
body.dark .widget{background:var(--glass); border-color:var(--glass-line);}
body.dark .widget:hover,body.dark .widget:focus-within{background:var(--glass-strong); border-color:rgba(255,255,255,.14);}
body.dark .widget-head{background:rgba(255,255,255,.04); border-bottom-color:rgba(255,255,255,.08);}
body.dark #hud{background:var(--glass); border-color:var(--glass-line);}
body.dark .fab-item{background:var(--glass-strong); color:var(--ink);}
body.dark .fab-item:hover{background:var(--surface-3);}
body.dark #boardStrip{background:var(--glass-strong); border-color:var(--glass-line);}
body.dark .widget.bare .widget-head{background:var(--glass-strong);}
body.dark .mm-top{background:var(--glass-strong);}
body.dark .mm-pop{background:var(--surface); box-shadow:var(--shadow-2);}
body.dark .dock-item{background:var(--surface-2); color:var(--ink);}
body.dark .dock-item:hover{background:var(--surface-3);}
body.dark .wp-group button.on{background:var(--surface-3); box-shadow:none;}
body.dark .lg-kbd button,body.dark .blok{filter:saturate(.9) brightness(.96);}
body.dark .bs-card canvas{background:#fff;} /* bord-preview blijft de echte (witte) bordkleur tonen */


/* ---------- compacte tekenwerkbalk met selectie-popovers ---------- */
#penbar{flex-wrap:nowrap; gap:4px; overflow:visible;}
.pen-picker{position:relative; flex:none;}
.pen-current{
  width:42px; height:32px; padding:0 5px; border:1px solid transparent; border-radius:9px;
  background:var(--surface-2); color:var(--ink); cursor:pointer; display:flex;
  align-items:center; justify-content:center; gap:3px; font:inherit;
}
.pen-current:hover,.pen-picker.open .pen-current{background:var(--surface-3); border-color:var(--line);}
.pen-current-value{font-size:16px; line-height:1; min-width:18px; text-align:center;}
.pen-caret{font-size:8px; color:var(--muted); transform:rotate(0); transition:transform .15s;}
.pen-picker.open .pen-caret{transform:rotate(180deg);}
.pen-current-color{width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);}
.pen-current-size{display:block; border-radius:50%; background:var(--ink);}
.pen-current-bg{width:19px; height:19px; display:block; border:1.5px solid #9db6d8; border-radius:4px; background:#fff;}
.pen-current-bg.bg-dots{background-image:radial-gradient(circle,#9db6d8 1px,transparent 1px); background-size:5px 5px;}
.pen-current-bg.bg-lines{background-image:repeating-linear-gradient(#0000 0 4px,#9db6d8 4px 5px);}
.pen-current-bg.bg-write{background-image:repeating-linear-gradient(#0000 0 2px,#c3d5ec 2px 3px,#0000 3px 5px,#6d92c4 5px 6px);}
.pen-current-bg.bg-grid-s{background-image:repeating-linear-gradient(#0000 0 4px,#9db6d8 4px 5px),repeating-linear-gradient(90deg,#0000 0 4px,#9db6d8 4px 5px);}
.pen-current-bg.bg-grid-b{background-image:repeating-linear-gradient(#0000 0 8px,#9db6d8 8px 9px),repeating-linear-gradient(90deg,#0000 0 8px,#9db6d8 8px 9px);}
#penbar .pen-popover{
  display:none; position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%);
  z-index:20; width:max-content; max-width:min(300px,calc(100vw - 24px)); padding:7px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-2); gap:5px;
}
#penbar .pen-picker.open>.pen-popover{display:flex;}
#penbar .pen-color-popover{width:210px; flex-direction:column; align-items:stretch;}
#penbar .pen-color-popover .wp-group{display:grid; grid-template-columns:repeat(6,28px); background:transparent; padding:0;}
.pen-pop-label{font-size:10px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.45px; margin:2px 2px 0;}
.pen-custom{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:3px; padding-top:7px; border-top:1px solid var(--line); font-size:12px; font-weight:700;}
.pen-custom input{width:34px; height:26px; padding:0; border:0; border-radius:7px; background:transparent; cursor:pointer;}
#hud.vert #penbar .pen-popover{left:calc(100% + 10px); bottom:auto; top:50%; transform:translateY(-50%);}
#hud.vert #penbar .pen-color-popover{display:none;}
#hud.vert #penbar .pen-picker.open>.pen-color-popover{display:flex;}
body.hc #penbar .pen-current,body.hc #penbar .pen-popover{border:2px solid #000;}
@media (max-width:600px),(pointer:coarse){
  #penbar{gap:3px;}
  .pen-current{width:40px; height:36px;}
  #penbar .pen-popover{position:fixed; left:50%; bottom:70px; transform:translateX(-50%);}
}


/* ============================================================
   Nieuwe widgets: verjaardagstaart, getallenlijn en zinsbouwer
   ============================================================ */
/* Verjaardagstaart */
.bd{height:100%; min-height:0; display:grid; grid-template-columns:minmax(180px,220px) 1fr; background:var(--surface);}
.bd-controls{padding:12px; overflow:auto; display:flex; flex-direction:column; gap:8px; background:var(--surface-2); border-right:1px solid var(--line);}
.bd-controls input[type=text],.bd-controls input[type=number],.bd-controls select{
  width:100%; height:36px; border:1px solid var(--line); border-radius:9px; padding:0 9px; background:var(--surface); color:var(--ink); font:inherit; font-size:13px;
}
.bd-controls label{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; font-weight:800; color:var(--muted);}
.bd-controls input[type=range]{width:96px;}.bd-color input{width:42px; height:30px; padding:1px; border:0; background:transparent; cursor:pointer;}
.bd-check{justify-content:flex-start !important;}.bd-party{margin-top:auto; min-height:38px;}
.bd-stage{min-width:0; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:54px 16px 34px; background:radial-gradient(circle at 50% 20%,#fff 0,var(--surface-2) 72%);}
.bd-title{position:absolute; top:16px; left:12px; right:12px; text-align:center; font-size:clamp(20px,4vw,34px); font-weight:900; color:var(--pink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bd-cake{width:min(100%,390px); display:flex; flex-direction:column; align-items:center; filter:drop-shadow(0 10px 10px rgba(29,52,97,.18)); z-index:2;}
.bd-layer{height:72px; position:relative; background:var(--cake); border-radius:20px 20px 12px 12px; border-bottom:8px solid color-mix(in srgb,var(--cake),#8b4b2b 18%); box-shadow:inset 0 13px 0 var(--icing); flex:none;}
.bd-layer-1{width:94%;}.bd-layer-2{width:76%;}.bd-layer-3{width:58%;}
.bd-deco{position:absolute; inset:16px 8px auto; text-align:center; color:#fff; font-weight:900; letter-spacing:5px; white-space:nowrap; overflow:hidden; text-shadow:0 1px 2px rgba(0,0,0,.25);}
.bd-deco.sprinkles{color:#fff5a5;}.bd-deco.stars{color:#fff0a8;font-size:18px}.bd-deco.fruit{font-size:17px;letter-spacing:2px;}
.bd-candle-row{position:absolute; left:8%; right:8%; top:-31px; height:34px; display:flex; justify-content:center; align-items:flex-end; gap:3px;}
.bd-candle{display:block; width:5px; height:25px; border-radius:2px; background:repeating-linear-gradient(45deg,#fff 0 3px,var(--blue) 3px 6px); position:relative;}
.bd-candle::before{content:""; position:absolute; width:8px; height:12px; left:-1.5px; top:-12px; border-radius:70% 30% 60% 40%; background:linear-gradient(#fff7a0,var(--orange)); box-shadow:0 0 8px var(--orange);}
.bd-age-badge{position:absolute; right:8%; top:20%; z-index:4; min-width:58px; height:58px; padding:0 10px; border-radius:20px; display:grid; place-items:center; color:#fff; font-size:29px; font-weight:900; transform:rotate(7deg); box-shadow:0 5px 12px rgba(0,0,0,.2); border:3px solid #fff;}
.bd-plate{width:min(94%,420px); height:30px; border-radius:50%; margin-top:-12px; box-shadow:0 8px 12px rgba(29,52,97,.22); z-index:1;}
/* Getallenlijn */
.nlw{height:100%; min-height:0; display:flex; flex-direction:column; gap:11px; padding:14px; background:var(--surface);}
.nlw-settings{display:flex; align-items:end; gap:8px; flex-wrap:wrap;}
.nlw-settings label{font-size:11px; font-weight:800; color:var(--muted); display:flex; flex-direction:column; gap:3px;}
.nlw-settings input,.nlw-settings select{width:72px; height:34px; border:1px solid var(--line); border-radius:9px; padding:0 8px; background:var(--surface); color:var(--ink); font:inherit;}
.nlw-new{margin-left:auto; min-height:34px;}.nlw-playtop{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}.nlw-task{text-align:center; font-size:clamp(18px,3vw,27px); font-weight:900; color:var(--blue);}.nlw-score{padding:5px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:900}
.nlw-scroll{flex:1; min-height:115px; overflow-x:auto; overflow-y:hidden; border-radius:14px; background:var(--surface-2); padding:20px 18px 8px;}
.nlw-line{position:relative; min-width:max-content; height:88px; display:flex; align-items:center; padding:0 18px;}
.nlw-line::before{content:""; position:absolute; height:4px; left:18px; right:18px; top:38px; border-radius:4px; background:var(--ink);}
.nlw-tick{width:52px; height:76px; flex:none; border:0; background:transparent; color:var(--ink); position:relative; cursor:pointer; font:inherit; font-weight:800; padding:0;}
.nlw-tick i{position:absolute; width:3px; height:18px; background:var(--ink); top:31px; left:calc(50% - 1.5px);}
.nlw-tick span{position:absolute; top:53px; left:0; right:0; text-align:center; font-size:12px;}
.nlw-tick.selected::before{content:""; position:absolute; width:23px; height:23px; border-radius:50%; background:var(--pink); border:3px solid #fff; left:calc(50% - 14px); top:27px; z-index:2; box-shadow:0 2px 6px rgba(0,0,0,.25);}
.nlw-actions{display:flex; align-items:center; justify-content:center; gap:8px;}.nlw-value{min-width:76px; text-align:center; font-size:28px; font-weight:900; color:var(--pink);}
.nlw-feedback{min-height:24px; text-align:center; font-weight:800;}.nlw-feedback.ok{color:var(--green);}.nlw-feedback.bad{color:var(--red);}
/* Zinsbouwer */
.sb{height:100%; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px; background:var(--surface);}
.sb-sentence{min-height:72px; border:2px dashed var(--line); border-radius:14px; padding:12px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; font-size:clamp(17px,3vw,25px); font-weight:900;}
.sb-sentence.empty{color:var(--muted); font-size:14px; font-weight:700;}.sb-part{padding:7px 11px; border-radius:10px;}.sb-part.who{background:#dce9ff;color:#174c9b}.sb-part.does{background:#dcf7e7;color:#176b3a}.sb-part.what{background:#fff0cf;color:#855b00}
.sb-banks{flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}.sb-bank{min-width:0; border-radius:12px; padding:9px; background:var(--surface-2);}.sb-bank h3{margin:0 0 7px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;}
.sb-chips{display:flex; flex-wrap:wrap; gap:6px;}.sb-chip-wrap{display:inline-flex;align-items:stretch}.sb-chip{border:0; border-radius:999px; padding:7px 10px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; text-align:left;}.sb-bank.who .sb-chip{background:#dce9ff;color:#174c9b}.sb-bank.does .sb-chip{background:#dcf7e7;color:#176b3a}.sb-bank.what .sb-chip{background:#fff0cf;color:#855b00}
.sb-chip-wrap .sb-chip{border-radius:999px 0 0 999px}.sb-chip-remove{border:0;border-radius:0 999px 999px 0;padding:0 7px;background:var(--surface-3);color:var(--muted);font-weight:900;cursor:pointer}.sb-chip-remove:hover{background:var(--red-soft);color:var(--red)}
.sb-add,.sb-actions{display:flex; align-items:center; gap:7px; flex-wrap:wrap;}.sb-add select,.sb-add input{height:36px; border:1px solid var(--line); border-radius:9px; padding:0 9px; background:var(--surface); color:var(--ink); font:inherit;}.sb-add input{flex:1; min-width:150px;}.sb-actions{justify-content:flex-end;}.sb-back{font-size:20px;}
body.dark .bd-stage{background:radial-gradient(circle at 50% 20%,var(--surface-2),var(--surface));}
@media(max-width:600px){.bd{grid-template-columns:1fr}.bd-controls{max-height:155px;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(2,1fr)}.bd-party{margin-top:0}.sb-banks{grid-template-columns:1fr}.nlw-settings{gap:5px}}

/* Educatieve widgets en compacte widgetbibliotheek */
.gallery-head,.gallery-tools,.gallery-data{display:flex;align-items:center;gap:8px}.gallery-head h2{flex:1}.gallery-tools{position:sticky;top:-24px;z-index:2;background:var(--surface);padding:6px 0 10px}.gallery-tools input{flex:1;height:42px;border:1px solid var(--line);border-radius:12px;padding:0 13px;background:var(--surface);color:var(--ink);font:inherit}.gallery-data{margin:8px 0 14px;flex-wrap:wrap}#galleryTemplates{display:flex;gap:7px;overflow-x:auto;padding:2px 0 8px}.gcat-title{margin:18px 0 8px;font-size:13px;font-weight:900;color:var(--muted);text-transform:uppercase}.gcard{position:relative}.gstar{position:absolute;right:7px;top:7px;border:0;background:transparent;color:var(--orange);font-size:22px;cursor:pointer}.gallery-empty,.edu-empty{text-align:center;color:var(--muted);padding:28px}.widget.locked .widget-rs{display:none}.widget.locked{outline:2px solid var(--accent-soft)}.widget.preview .widget-head{position:absolute;z-index:4;width:100%;opacity:0}.widget.preview:hover .widget-head,.widget.preview:focus-within .widget-head{opacity:1}.widget.preview .widget-rs{display:none}.widget.preview{border-color:transparent;box-shadow:none}.wpreview.on{background:var(--accent-soft);color:var(--accent-ink)}
.edu{height:100%;display:flex;flex-direction:column;background:var(--surface);color:var(--ink)}.edu-settings{flex:none;background:var(--surface-2);border-bottom:1px solid var(--line)}.edu-settings summary{cursor:pointer;padding:9px 12px;font-weight:800;font-size:13px}.edu-controls{display:flex;align-items:end;gap:8px;flex-wrap:wrap;padding:0 12px 10px}.edu-controls label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:800;color:var(--muted)}.edu-controls input,.edu-controls select,.edu-controls textarea{min-height:34px;border:1px solid var(--line);border-radius:9px;padding:5px 8px;background:var(--surface);color:var(--ink);font:inherit}.edu-controls textarea{height:65px;resize:vertical}.edu-stage{flex:1;min-height:0;overflow:auto;padding:16px;display:flex;align-items:center;justify-content:center}
.fraction-game{width:min(100%,620px);display:flex;flex-direction:column;align-items:center;gap:9px}.fraction-summary{min-height:34px;padding:5px 13px;border-radius:999px;background:var(--surface-2);color:var(--purple);font-size:18px;font-weight:950}.fraction-wall{width:100%;display:flex;flex-direction:column;gap:5px}.fraction-wall>div{display:flex;gap:4px}.fraction-piece{flex:1;min-height:38px;border:2px solid hsl(var(--fraction-hue) 55% 43%);border-radius:7px;background:hsl(var(--fraction-hue) 75% 90%);font-weight:800;color:#20304a;cursor:pointer;transition:transform .12s,filter .12s}.fraction-piece:hover{filter:brightness(.96);transform:translateY(-1px)}.fraction-piece.selected{background:hsl(var(--fraction-hue) 70% 55%);color:#fff}.fraction-clear{align-self:flex-end;min-height:34px}
.place-grid{display:grid;grid-template-columns:repeat(6,1fr);width:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden}.place-grid div{text-align:center;border-right:1px solid var(--line)}.place-grid b{display:block;padding:8px;background:var(--surface-2);font-size:12px}.place-grid output{display:block;padding:18px 4px;font-size:clamp(25px,5vw,48px);font-weight:900;color:var(--blue)}
.money-app{width:100%;min-height:100%;align-self:flex-start;display:flex;flex-direction:column;justify-content:flex-start;color:var(--ink)}
.money-top{position:sticky;top:-16px;z-index:6;width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px;padding:8px 4px;background:var(--surface);border-bottom:1px solid var(--line)}.money-level-control{display:flex;align-items:center;gap:6px}.money-level-control>span{color:var(--muted);font-size:12px;font-weight:900}.money-levels button{min-width:31px;padding:6px 9px;white-space:nowrap}.money-mode{width:36px;padding:0;font-size:18px}.money-score{margin-left:auto;padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:900}
.money-task-card{width:min(100%,650px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-1)}.money-task-card h3{margin:0;text-align:center;font-size:clamp(19px,3vw,25px)}.money-level-hint{margin:-7px 0 0;text-align:center;color:var(--muted);font-size:12px;font-weight:800}
.money-target{width:100%;min-height:98px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px;border-radius:16px;background:var(--surface-2)}.money-target>span:first-child{flex-basis:100%;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}.money-assignment{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center}.money-task-amount{font-size:clamp(45px,10vw,72px);line-height:1;font-weight:950;color:var(--green)}.money-task-words{flex-basis:100%;margin:0;font-size:clamp(21px,4vw,31px);line-height:1.15;font-weight:950;color:var(--purple)}.money-assignment.compact .money-task-amount{font-size:clamp(38px,8vw,58px)}.money-assignment.compact .money-task-words{font-size:clamp(19px,4vw,27px)}
.money-wallet{width:100%;min-height:112px;padding:10px;border:3px dashed var(--line);border-radius:18px;background:linear-gradient(145deg,var(--surface-2),var(--surface));transition:border-color .15s,background .15s,transform .15s}.money-wallet>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.money-wallet output{font-size:24px;font-weight:950;color:var(--green)}.money-wallet>p{margin:22px auto;color:var(--muted);font-weight:800;text-align:center}.money-wallet.droptarget{border-color:var(--green);background:#e4f6eb;transform:scale(1.01)}.money-wallet.money-remove-target{border-color:var(--red);background:#fff0ed;box-shadow:0 0 0 4px rgba(190,55,45,.1)}
.money-pile{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;min-height:58px}
.money-piece{position:relative;display:block;flex:none;overflow:hidden;padding:0;border:0;background:transparent;color:#26354a;filter:drop-shadow(0 3px 3px rgba(20,35,60,.28));user-select:none}.money-piece:is(button){appearance:none;cursor:grab;touch-action:none}.money-piece:is(button):active{cursor:grabbing}.money-piece:is(button):focus-visible{outline:3px solid var(--accent);outline-offset:3px}.money-piece-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.money-piece-fallback{display:none;width:100%;height:100%;place-items:center;border:1px solid rgba(30,40,55,.35);background:var(--surface-2);font:900 12px/1 system-ui}.money-piece.image-missing .money-piece-image{display:none}.money-piece.image-missing .money-piece-fallback{display:grid}
.money-piece.coin{width:44px;height:44px;border-radius:50%}.money-piece.coin[data-value="1"]{width:36px;height:36px}.money-piece.coin[data-value="2"]{width:42px;height:42px}.money-piece.coin[data-value="5"]{width:47px;height:47px}.money-piece.coin[data-value="10"]{width:44px;height:44px}.money-piece.coin[data-value="20"]{width:49px;height:49px}.money-piece.coin[data-value="50"]{width:54px;height:54px}.money-piece.coin[data-value="100"]{width:52px;height:52px}.money-piece.coin[data-value="200"]{width:57px;height:57px}
.money-piece.note{height:43px;border-radius:2px}.money-piece.note .money-piece-fallback{border-radius:2px}.money-piece.note[data-value="500"]{width:82px;height:42px}.money-piece.note[data-value="1000"]{width:86px;height:45px}.money-piece.note[data-value="2000"]{width:89px;height:48px}.money-piece.note[data-value="5000"]{width:93px;height:51px}.money-drag-clone{opacity:.98}.money-drag-clone.from-wallet{opacity:.92;filter:drop-shadow(0 14px 18px rgba(160,45,45,.3))}
.money-tray-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}.money-tray-wrap>b{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px}.money-cash-tray{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:11px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.money-count-task{width:100%;min-height:128px;display:grid;place-items:center;padding:14px;border-radius:17px;background:linear-gradient(145deg,#eef7e9,var(--surface-2));border:1px solid var(--line)}.money-count-task .money-piece{transform:rotate(var(--money-tilt,0deg))}
.money-shop-task{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.8fr);gap:12px}.money-product,.money-paid{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px;border:1px solid var(--line);border-radius:17px;background:var(--surface-2)}.money-product-icon{font-size:clamp(52px,8vw,70px);line-height:1;filter:drop-shadow(0 5px 5px rgba(30,45,70,.2))}.money-product-name{max-width:100%;font-size:17px;font-weight:950;text-align:center}.money-product>b,.money-paid>b{color:var(--muted);font-size:12px;text-transform:uppercase}.money-product .money-task-amount{font-size:37px}.money-product .money-task-words{font-size:19px}.money-paid>output{font-size:31px;font-weight:950;color:var(--blue)}
.money-digit-answer,.money-type-answer{width:min(100%,300px);display:flex;flex-direction:column;align-items:center;gap:10px}.money-digit-answer>p,.money-type-answer>p{margin:0;color:var(--muted);font-weight:800;text-align:center}.money-answer-slots{display:flex;align-items:center;justify-content:center;gap:6px}.money-answer-slots>strong{font-size:29px}.money-digit-slot.slot.sm{width:43px;height:64px;padding-top:1px}.money-digit-slot.slot.sm .ghost{height:24px;font-size:20px}.money-digit-slot.slot.sm .slot-dots{margin-bottom:3px}.money-digit-slot.filled{padding:0}.money-digit-slot.fixed{border-style:solid;background:var(--surface-2);opacity:.72}.money-digit-block.blok{width:39px;height:58px;min-height:58px;padding-top:2px;cursor:default}.money-digit-block.blok .bl{height:28px;font-size:25px;color:var(--purple)}.money-digit-block.blok .blok-dots{margin-bottom:4px}.money-digit-tray.lg-tray{display:grid;grid-template-columns:repeat(5,39px);gap:7px;min-height:0;padding:11px 14px}.money-digit-tray .money-drag-digit{cursor:grab}.money-digit-tray .money-drag-digit:active{cursor:grabbing}.money-digit-slot.droptarget{border-color:var(--green);background:#e3f6ea;transform:scale(1.06)}
.money-type-display{min-width:190px;padding:9px 14px;border:3px dashed var(--line);border-radius:14px;background:var(--surface-2);font-size:34px;font-weight:950;letter-spacing:2px;color:var(--green)}.money-keypad{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.money-keypad .tbtn{min-width:0;padding:0;font-size:20px}
.money-feedback{min-height:24px;margin:0;text-align:center;font-weight:900}.money-feedback.ok{color:var(--green)}.money-feedback.bad{color:var(--red)}.money-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.money-actions .tbtn:not(.ghost){background:var(--green);color:#fff}
@media(max-width:520px){.money-task-card{gap:9px;padding:10px}.money-level-control>span{display:none}.money-top{top:-10px;gap:5px}.money-shop-task{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:7px}.money-product,.money-paid{min-height:112px;padding:8px 6px;gap:4px}.money-product-icon{font-size:46px}.money-product-name{font-size:14px}.money-product .money-task-amount{font-size:32px}.money-product .money-task-words{font-size:16px}.money-paid>output{font-size:26px}.money-cash-tray{gap:6px;padding:9px}}
.wordtypes{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}.wordtypes button{border:0;border-radius:10px;padding:10px 13px;font:inherit;font-weight:900;background:var(--surface-2)}.wordtypes button[data-type=noun]{background:#dce9ff;color:#174c9b}.wordtypes button[data-type=verb]{background:#dcf7e7;color:#176b3a}.wordtypes button[data-type=adjective]{background:#fff0cf;color:#855b00}.wordtypes p{flex-basis:100%;text-align:center;color:var(--muted);font-size:12px}
.schedule{width:min(100%,450px);display:flex;flex-direction:column;gap:7px}.schedule>div{display:flex;align-items:center;gap:12px;padding:9px;background:var(--surface-2);border-radius:12px;border-left:4px solid var(--widget-accent)}.schedule-icon{width:33px;height:33px;display:grid;place-items:center;flex:none;border-radius:10px;background:var(--surface);font-size:20px;font-style:normal}.schedule time{font-weight:900;color:var(--blue)}.schedule span{flex:1;font-weight:800}.schedule .tbtn{height:30px;min-height:30px;padding:0 9px}.class-total{flex-basis:100%;width:100%;margin:0 0 3px;color:var(--muted);font-size:12px;font-weight:900;text-align:center}.mood{display:flex;gap:8px;flex-wrap:wrap}.mood .tbtn{flex:1;min-width:62px;font-size:36px;height:auto;padding:12px;background:var(--surface);border:2px solid var(--line);color:var(--ink)}.mood span{display:block;font-size:14px}.poll{width:min(100%,440px);display:flex;flex-direction:column;gap:8px}.poll h3{margin-bottom:0;text-align:center}.poll .tbtn{position:relative;overflow:hidden;text-align:left}.poll .tbtn i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--widget-accent) 22%,var(--surface));z-index:0;transition:width .25s}.poll .tbtn span{position:relative;float:right;font-weight:900}.poll .tbtn{isolation:isolate}
@media(max-width:600px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gcard{min-height:120px;padding:13px 8px}.gcard .gd{display:none}.widget .wdup,.widget .wpreview{display:none}.edu-stage{padding:10px}.place-grid b{font-size:9px}.place-grid output{padding:12px 2px}}

/* Wereldoriëntatie: natuurherkenning en topografie */
.world-app{width:100%;min-height:100%;align-self:flex-start;display:flex;flex-direction:column;justify-content:flex-start;color:var(--ink)}
.world-top{position:sticky;top:-16px;z-index:6;width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;padding:9px 4px;background:color-mix(in srgb,var(--surface) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.world-top>strong{font-size:15px}.world-top>span{padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:900;white-space:nowrap}
.world-task-card{width:min(100%,680px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:13px;padding:18px;border:1px solid color-mix(in srgb,var(--line) 80%,var(--accent));border-radius:24px;background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--surface-2) 68%,var(--surface)));box-shadow:0 18px 40px rgba(24,42,66,.12)}.world-task-card>h3{max-width:560px;margin:0;text-align:center;font-size:clamp(19px,4cqi,27px);line-height:1.2}.world-intro{width:100%;margin:0;padding:10px 14px;border-radius:14px;background:linear-gradient(120deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 55%,var(--surface)));color:var(--accent-ink);font-weight:850;line-height:1.4;text-align:center}
.world-visual{width:min(100%,460px);display:flex;align-items:flex-start;justify-content:center;gap:12px}.world-visual.mixed{width:min(100%,620px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.world-photo{position:relative;min-width:0;margin:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 75%,var(--ink));border-radius:19px;background:#152432;box-shadow:0 10px 24px rgba(20,36,52,.18)}.world-picture{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}.world-photo-badge{position:absolute;left:9px;top:9px;padding:5px 9px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(10,27,42,.78);color:#fff;font-size:10px;font-weight:950;letter-spacing:.45px;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.18);backdrop-filter:blur(6px)}.world-photo-credit{position:absolute;right:7px;bottom:7px;max-width:calc(100% - 14px);overflow:hidden;padding:4px 7px;border-radius:8px;background:rgba(10,27,42,.8);color:#fff!important;font-size:9px;font-weight:750;line-height:1.2;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;backdrop-filter:blur(6px)}.world-photo-credit:hover,.world-photo-credit:focus-visible{text-decoration:underline;outline:2px solid #fff;outline-offset:1px}
.world-identity{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.world-identity h3{margin:0;font-size:18px;line-height:1.2}.world-identity em{color:var(--muted);font-size:12px;font-family:Georgia,serif;font-weight:650}
.world-answers{width:min(100%,560px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.world-answers .tbtn{min-width:0;min-height:48px;padding:8px 11px;border:1px solid var(--line);background:var(--surface);box-shadow:0 3px 8px rgba(20,36,52,.06)}.world-answers .tbtn:hover{border-color:var(--accent);background:var(--accent-soft)}.world-answers .tbtn.correct{background:var(--green);color:#fff;border-color:transparent}.world-feedback{min-height:24px;margin:0;text-align:center;font-weight:900}.world-feedback.ok{color:var(--green)}.world-feedback.bad{color:var(--red)}.world-actions{display:flex;justify-content:center}.world-fact{width:min(100%,560px);margin:0;padding:11px 14px;border:1px solid color-mix(in srgb,var(--green) 28%,var(--line));border-radius:15px;background:#eef7e9;color:#2f6f3e;text-align:center}.world-fact .world-identity em{color:#527c5b}.world-fact p{margin:6px 0 0;font-weight:800;line-height:1.4}
.world-answers .tbtn.wrong{background:color-mix(in srgb,var(--red) 14%,var(--surface));color:var(--red);border-color:var(--red)}.world-clue{width:min(100%,560px);padding:18px 20px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:18px;background:linear-gradient(135deg,var(--accent-soft),var(--surface));color:var(--accent-ink);font-size:clamp(16px,3.2cqi,21px);font-weight:850;line-height:1.5;text-align:center}.world-clue-latin{font-family:Georgia,serif;font-size:clamp(23px,4.6cqi,34px);font-style:italic;font-weight:700}
.world-photo-answers{width:min(100%,640px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.world-photo-choice{position:relative;min-width:0;margin:0;overflow:hidden;border:3px solid transparent;border-radius:18px;background:#152432;box-shadow:0 8px 18px rgba(20,36,52,.16);transition:border-color .15s,transform .15s,box-shadow .15s}.world-image-button{display:block;width:100%;margin:0;padding:0;border:0;background:#152432;cursor:pointer}.world-image-button .world-picture{transition:transform .18s,filter .18s}.world-photo-choice:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(20,36,52,.2)}.world-image-button:hover .world-picture{transform:scale(1.025)}.world-image-button:focus-visible{outline:4px solid var(--accent);outline-offset:-4px}.world-choice-number{position:absolute;left:8px;top:8px;display:grid;width:28px;height:28px;place-items:center;border:2px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(10,27,42,.86);color:#fff;font-size:13px;font-weight:950;pointer-events:none}.world-photo-choice.correct{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 25%,transparent)}.world-photo-choice.wrong{border-color:var(--red)}.world-photo-choice.wrong .world-picture{filter:saturate(.65) brightness(.82)}
.world-gallery{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.world-specimen{min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;padding:11px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(155deg,var(--surface),var(--surface-2));box-shadow:0 8px 22px rgba(20,36,52,.08)}.world-specimen .world-visual{width:100%}.world-specimen p{margin:0;padding:0 5px 3px;color:var(--muted);font-size:12px;font-weight:720;line-height:1.4;text-align:center}
.topo-card{width:min(100%,740px)}.topo-map-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:7px;overflow:hidden;padding:10px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(155deg,#edf8fd,#dff2fb)}.topo-map{display:block;width:min(100%,510px);height:auto;max-height:590px;touch-action:manipulation;filter:drop-shadow(0 9px 13px rgba(29,60,76,.13))}.topo-water{fill:#dff3fb}.topo-province{stroke:#fff;stroke-width:4.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:filter .15s,opacity .15s,fill .15s}.topo-province[role=button]{cursor:pointer}.topo-province[role=button]:hover,.topo-province[role=button]:focus{filter:brightness(.88) saturate(1.12);outline:none}.topo-province[role=button]:focus-visible{stroke:var(--navy);stroke-width:8}.topo-province.picked{fill:var(--red)!important}.topo-province.target{fill:var(--green)!important}.topo-label,.topo-city-label{fill:#18324e;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;font-size:18px;font-weight:950;text-anchor:middle;pointer-events:none}.topo-city-label{text-anchor:start;font-size:16px}.topo-city-label.left{text-anchor:end}.topo-marker{cursor:pointer}.topo-hit{fill:transparent}.topo-dot{fill:var(--navy);stroke:#fff;stroke-width:4;transition:fill .15s,stroke-width .15s}.topo-marker:hover .topo-dot,.topo-marker:focus .topo-dot{fill:var(--orange);outline:none}.topo-marker:focus-visible .topo-dot{stroke:var(--navy);stroke-width:8}.topo-marker.picked .topo-dot{fill:var(--red)}.topo-marker.target .topo-dot{fill:var(--green);stroke-width:7}.topo-source{align-self:flex-end;color:#3b657b;font-size:9px;font-weight:750;text-decoration:none}.topo-source:hover,.topo-source:focus-visible{text-decoration:underline}
.topo-province.inactive{opacity:.32}.topo-region[role=button],.topo-river[role=button],.world-continent[role=button]{cursor:pointer}.topo-region.picked .topo-province{fill:var(--red)!important}.topo-region.target .topo-province{fill:var(--green)!important}.topo-region:hover .topo-province,.topo-region:focus .topo-province{filter:brightness(.88) saturate(1.12)}.topo-region:focus-visible .topo-province{stroke:var(--navy);stroke-width:8}.topo-region-label{font-size:20px}
.topo-river.inactive{opacity:.22}.topo-river-hit,.topo-river-line{fill:none;stroke-linecap:round;stroke-linejoin:round}.topo-river-hit{stroke:transparent;stroke-width:38;pointer-events:stroke}.topo-river-line{stroke:var(--river-color);stroke-width:10;pointer-events:none;transition:stroke .15s,stroke-width .15s}.topo-river:hover .topo-river-line,.topo-river:focus .topo-river-line{stroke-width:15}.topo-river:focus-visible .topo-river-line{stroke:var(--navy);stroke-width:18}.topo-river.picked .topo-river-line{stroke:var(--red)}.topo-river.target .topo-river-line{stroke:var(--green);stroke-width:16}.topo-river-label{fill:#18324e;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;font-size:20px;font-style:italic;font-weight:950;text-anchor:middle;pointer-events:none}
.world-map-wrap{padding:12px}.world-map{width:100%;max-width:680px;max-height:none}.world-continent{stroke:#fff;stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:filter .15s,opacity .15s,fill .15s}.world-continent.inactive{opacity:.28}.world-continent:hover,.world-continent:focus{filter:brightness(.88) saturate(1.12);outline:none}.world-continent:focus-visible{stroke:var(--navy);stroke-width:4}.world-continent.picked{fill:var(--red)!important}.world-continent.target{fill:var(--green)!important}.world-continent-label{fill:#18324e;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;font-size:14px;font-weight:950;text-anchor:middle;pointer-events:none}
.topo-world-legend{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.topo-world-legend span{display:flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:999px;background:var(--surface);color:var(--ink);font-size:11px;font-weight:850}.topo-world-legend i{width:10px;height:10px;flex:none;border:1px solid rgba(24,50,78,.18);border-radius:50%}
body.dark .world-fact{background:#1d3b2a;color:#a9e5b7}body.dark .world-fact .world-identity em{color:#a9e5b7}body.dark .topo-map-wrap{background:linear-gradient(155deg,#193446,#122c3e)}body.dark .topo-water{fill:#173145}body.dark .topo-label,body.dark .topo-city-label,body.dark .topo-river-label,body.dark .world-continent-label{fill:#f7fbff;stroke:#18324e}body.dark .topo-source{color:#a9cadb}

.clock-app{width:100%;min-height:100%;display:flex;flex-direction:column;justify-content:flex-start;color:var(--ink)}
.clock-top{position:sticky;top:-16px;z-index:6;width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px;padding:8px 4px;background:var(--surface);border-bottom:1px solid var(--line)}.clock-level-control{display:flex;align-items:center;gap:6px}.clock-level-control>span{color:var(--muted);font-size:12px;font-weight:900}.clock-levels button{min-width:31px;padding:6px 9px;white-space:nowrap}.clock-mode{width:36px;padding:0;font-size:18px}.clock-score{margin-left:auto;padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:900}
.clock-task-card{width:min(100%,620px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-1)}
.clock-task-card h3{margin:0;text-align:center;font-size:clamp(18px,3vw,24px)}.clock-intro{max-width:440px;margin:0;text-align:center;color:var(--muted);font-weight:700;line-height:1.5}
.clock-target{width:100%;min-height:88px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px;border-radius:15px;background:var(--surface-2)}.clock-target>span:first-child{flex-basis:100%;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}.clock-target-words{font-size:20px;color:var(--purple)}.clock-assignment{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center}.clock-assignment.compact{width:100%}.clock-assignment.compact .clock-task-digital{font-size:44px}.clock-assignment.compact .clock-task-words{font-size:24px}.clock-task-digital{font-size:clamp(48px,10vw,78px);line-height:1;font-weight:950;letter-spacing:2px;color:var(--blue)}.clock-task-words{flex-basis:100%;margin:0;font-size:clamp(24px,5vw,36px);line-height:1.15;font-weight:950;color:var(--purple)}.clock-daypart{padding:6px 11px;border-radius:999px;background:var(--purple);color:#fff;font-size:14px;font-weight:900}.clock-target .clock-reference{--clock-size:112px;border-width:5px;box-shadow:inset 0 0 0 2px var(--line),0 4px 10px rgba(20,35,60,.12)}.clock-reference b{font-size:9px}.clock-reference .clock-pin{left:calc(50% - 6px);top:calc(50% - 6px);width:12px;height:12px;border-width:2px}
.clock-work{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}.clock{--clock-size:min(230px,62vw);width:var(--clock-size);height:var(--clock-size);flex:none;position:relative;overflow:hidden;border:9px solid var(--ink);border-radius:50%;background:radial-gradient(circle at 50% 46%,var(--surface) 0 62%,var(--surface-2) 100%);box-shadow:inset 0 0 0 3px var(--line),0 8px 20px rgba(20,35,60,.14)}
.clock-set-answer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.clock-period{display:flex;align-items:center;justify-content:center;gap:3px;padding:3px;border-radius:999px;background:var(--surface-2)}
.clock-period .tbtn{min-height:36px;padding:0 12px;border-radius:999px}
.clock-period .tbtn.active{background:var(--purple);color:#fff;border-color:transparent}
.clock-tick{position:absolute;z-index:1;border-radius:4px}.clock-tick.hour{left:calc(50% - 2px);top:3%;width:4px;height:5%;background:var(--blue);transform-origin:50% 940%}.clock-tick.minor{left:calc(50% - 1px);top:4%;width:2px;height:4%;background:var(--ink);opacity:.28;transform-origin:50% 1150%}
.clock b{position:absolute;z-index:2;left:calc(50% - 12px);top:calc(50% - 12px);width:24px;height:24px;display:grid;place-items:center;font-size:14px;transform:rotate(var(--clock-angle)) translateY(calc(var(--clock-size)*-.34)) rotate(calc(-1 * var(--clock-angle)))}
.clock-hand{position:absolute;z-index:4;left:calc(50% - 5px);bottom:50%;width:10px;border-radius:9px;transform-origin:50% 100%;background:var(--ink);cursor:grab;touch-action:none}.clock-hand:active{cursor:grabbing}.clock-hour{height:28%}.clock-min{left:calc(50% - 4px);width:8px;height:39%;background:var(--pink)}.clock-pin{position:absolute;z-index:5;left:calc(50% - 8px);top:calc(50% - 8px);width:16px;height:16px;border:3px solid var(--surface);border-radius:50%;background:var(--pink);box-shadow:0 1px 4px rgba(0,0,0,.28)}
.clock.interactive{touch-action:none;user-select:none;outline:4px solid transparent;transition:outline-color .15s,transform .15s}.clock.interactive:hover,.clock.interactive:focus-within{outline-color:var(--accent-soft)}
.clock-time-blocks{display:flex;align-items:center;justify-content:center;gap:5px;margin:0;padding:6px;border:0;border-radius:14px;background:transparent;color:var(--ink);font:inherit}.clock-time-blocks:is(button){cursor:pointer}.clock-time-blocks:is(button):hover,.clock-time-blocks:is(button):focus-visible{background:var(--accent-soft);outline:2px solid var(--accent)}.clock-time-blocks>strong{font-size:30px}
.clock-digit-block.blok{width:42px;height:62px;min-height:62px;padding-top:3px;cursor:default}.clock-digit-block.blok .bl{height:31px;font-size:27px;color:var(--purple)}.clock-digit-block.blok .blok-dots{margin-bottom:5px}.clock-digit-block.blok .dots,.clock-digit-slot .dots{grid-template-columns:repeat(2,6px);grid-template-rows:repeat(3,6px);gap:2px}.clock-digit-block.blok .dots i,.clock-digit-slot .dots i{width:6px;height:6px}
.clock-live-answer{padding:6px 12px;border:2px dashed var(--line);border-radius:16px;background:var(--surface-2)}.clock-read-layout{width:100%;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.clock-read-layout>.clock-assignment{flex:1;min-width:190px}.clock-read-layout .clock{--clock-size:180px}.clock-block-answer{width:min(100%,250px);display:flex;flex-direction:column;align-items:center;gap:10px}.clock-block-answer>p{margin:0;color:var(--muted);font-weight:800;text-align:center}.clock-answer-slots{display:flex;align-items:center;justify-content:center;gap:7px}.clock-digit-slot.slot.sm{width:46px;height:66px;padding-top:2px}.clock-digit-slot.slot.sm .ghost{height:25px;font-size:20px}.clock-digit-slot.slot.sm .slot-dots{margin-bottom:4px}.clock-digit-slot.filled{padding:0}.clock-slot-colon{font-size:30px;margin:0 2px}.clock-block-tray.lg-tray{display:grid;grid-template-columns:repeat(5,38px);gap:7px;min-height:0;padding:11px 14px}.clock-block-tray .clock-drag-block{width:38px;height:56px;min-height:56px;cursor:grab}.clock-block-tray .clock-drag-block:active{cursor:grabbing}.clock-block-tray .clock-drag-block:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.clock-digit-slot.droptarget{border-color:var(--green);background:#e3f6ea;transform:scale(1.06)}
.clock-choices{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.clock-choices.wood .clock-time-blocks{border:1px solid var(--line);background:var(--surface-2)}.clock-word-choice{min-height:48px;border:2px solid var(--wood-d)!important;background:linear-gradient(#fdf3dd,var(--wood))!important;color:var(--ink)!important;box-shadow:0 3px 0 var(--wood-d)}.clock-digital-choice{min-width:118px;min-height:58px;font-size:28px!important;color:var(--blue)!important}.clock-type-answer{width:min(100%,250px);display:flex;flex-direction:column;align-items:center;gap:9px}.clock-type-answer>p{margin:0;color:var(--muted);font-weight:800;text-align:center}.clock-type-display{min-width:180px;padding:9px 14px;border:3px dashed var(--line);border-radius:14px;background:var(--surface-2);font-size:34px;font-weight:950;letter-spacing:3px;color:var(--blue)}.clock-keypad{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.clock-keypad .tbtn{min-width:0;padding:0;font-size:20px}.clock-keypad .ok{background:var(--green);color:#fff}
.clock-feedback{min-height:24px;margin:0;text-align:center;font-weight:900}.clock-feedback.ok{color:var(--green)}.clock-feedback.bad{color:var(--red)}.clock-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.clock-actions .tbtn:not(.ghost){background:var(--green);color:#fff}.clock-drag-hint{color:var(--muted);font-weight:800;text-align:center}
@media(max-width:480px){.clock-task-card{padding:12px}.clock-level-control>span{display:none}.clock-top{gap:5px}.clock{--clock-size:min(210px,68vw)}.clock-target{min-height:72px}.clock-block-tray.lg-tray{gap:7px;padding:9px}}

/* ============================================================
   Kindvriendelijke spel-laag
   Eén accent, duidelijke missies en tastbare bediening voor elk widgettype.
   ============================================================ */
.widget{--widget-accent:var(--teal);--widget-soft:color-mix(in srgb,var(--widget-accent) 12%,var(--surface))}
.widget:is([data-widget="anchor"],[data-widget="letters"],[data-widget="flits"],[data-widget="hak"],[data-widget="ball"],[data-widget="sentence"],[data-widget="wordtypes"]){--widget-accent:var(--purple)}
.widget:is([data-widget="madd"],[data-widget="msub"],[data-widget="mmul"],[data-widget="mdiv"],[data-widget="mpct"],[data-widget="numberline"],[data-widget="fractions"],[data-widget="clock"],[data-widget="placevalue"],[data-widget="money"]){--widget-accent:var(--blue)}
.widget:is([data-widget="trees"],[data-widget="birds"],[data-widget="plants"],[data-widget="topography"]){--widget-accent:var(--green)}
.widget:is([data-widget="birthday"],[data-widget="schedule"],[data-widget="light"],[data-widget="mood"],[data-widget="poll"]){--widget-accent:var(--pink)}
.widget[data-widget="media"]{--widget-accent:var(--orange)}
.widget:not(.bare){border-top:4px solid var(--widget-accent)}
.widget:not(.bare) .widget-head .wicon{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:11px;background:var(--widget-soft);font-size:20px;transform:rotate(-3deg)}
.widget:not(.bare) .widget-head .wtitle{color:color-mix(in srgb,var(--widget-accent) 74%,var(--ink))}
.widget-body{background-image:radial-gradient(circle at 96% 4%,color-mix(in srgb,var(--widget-accent) 8%,transparent) 0 54px,transparent 55px)}
.widget-body .tbtn{transition:transform .12s,filter .12s,box-shadow .12s}.widget-body .tbtn:not(.ghost){background:var(--widget-accent);box-shadow:0 3px 0 color-mix(in srgb,var(--widget-accent) 72%,#18233a)}.widget-body .tbtn:active{transform:translateY(2px) scale(.985);box-shadow:none}.widget-body :is(button,input,select,textarea):focus-visible{outline:3px solid color-mix(in srgb,var(--widget-accent) 72%,#fff);outline-offset:2px}
.play-mission{width:min(100%,560px);margin:0 auto;padding:8px 12px;border:1px solid color-mix(in srgb,var(--widget-accent) 25%,var(--line));border-radius:13px;background:var(--widget-soft);color:color-mix(in srgb,var(--widget-accent) 68%,var(--ink));font-size:13px;font-weight:850;line-height:1.35;text-align:center}
.fl-reflect{width:100%;padding:8px 10px;border-radius:14px;background:var(--widget-soft);text-align:center}.fl-reflect p{margin:0 0 7px;font-weight:900}.fl-reflect>div{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.fl-reflect[hidden]{display:none}
.dc-history{min-height:28px;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}.dc-history span{margin-right:3px;color:var(--muted);font-size:11px;font-weight:850}.dc-history b{min-width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--widget-soft);color:var(--widget-accent)}
.notes-app{height:100%;display:flex;flex-direction:column;background:#fff8cf;transition:background .15s}.notes-app[data-theme="mint"]{background:#e5f7df}.notes-app[data-theme="sky"]{background:#e2f3ff}.notes-app[data-theme="lilac"]{background:#f0e8ff}.notes-tools{min-height:42px;display:flex;align-items:center;gap:7px;padding:6px 8px;border-bottom:1px solid rgba(29,52,97,.12);color:#52627b;font-size:11px;font-weight:900}.notes-swatches{display:flex;gap:4px}.notes-swatches button{width:24px;height:24px;padding:0;border:2px solid rgba(29,52,97,.16);border-radius:50%;cursor:pointer}.notes-swatches button[data-theme="sun"]{background:#fff0a8}.notes-swatches button[data-theme="mint"]{background:#cdeebe}.notes-swatches button[data-theme="sky"]{background:#c6e9ff}.notes-swatches button[data-theme="lilac"]{background:#dfd0ff}.notes-swatches button.on{outline:2px solid var(--ink);outline-offset:1px}.notes-size{height:28px;padding:0 7px;border:1px solid rgba(29,52,97,.18);border-radius:8px;background:rgba(255,255,255,.5);color:#33445f;font-weight:900;cursor:pointer}.notes-size.on{background:#fff}.notes-count{margin-left:auto;white-space:nowrap}
.mt-card,.lg-card,.money-task-card,.clock-task-card,.world-task-card,.sb-sentence,.nlw-scroll{box-shadow:0 7px 20px rgba(29,52,97,.09)}
@media(pointer:coarse){.widget-body :is(.tbtn,.sb-chip,.nlw-tick,.fraction-piece,.tl-lamp){min-height:44px}}
@media(prefers-reduced-motion:reduce){.widget-body *,.widget-body *::before,.widget-body *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@container widget (max-width:520px){.play-mission{padding:6px 9px;font-size:12px}.tl{padding:8px}.tl-house{padding:9px}.tl-lamp{width:58px;height:58px}.tl-option{gap:11px}.tl-option strong{font-size:16px}.tl-option small{font-size:11px}.notes-color-label{display:none}.notes-tools{gap:5px}.notes-count{font-size:10px}.fraction-game{gap:6px}.fraction-piece{min-height:34px;font-size:11px}.dc-history span{flex-basis:100%;text-align:center}.sb-surprise{flex-basis:100%}}

/* ============================================================
   Widgetinhoud op telefoonformaat
   De widget-body is de container: dit werkt zowel op het bord als
   in de leerlingweergave en ook wanneer een widget zelf smal is.
   ============================================================ */
@media(max-width:600px){
  #pupilView{padding:8px;gap:12px}
  #pupilView .pupil-card{width:100%!important;max-width:100%;min-width:0!important}
  .widget:not(.bare){max-width:calc(100% - 8px)}
  .widget-head{gap:4px;padding:6px 8px}
  .widget-head .wicon{font-size:18px}
  .wmin,.wclose{width:36px;height:36px;border-radius:10px}
  .wz{min-width:36px;padding:0 4px}
}
@media(pointer:coarse){
  .lg-levels button,.lg-cards button,.lg-snd,.lg-mode,.fl-sel,.tseg button,
  .nlw-settings input,.nlw-settings select,.sb-add input,.sb-add select,
  .edu-controls input,.edu-controls select{min-height:var(--tap-sm)}
  .mm-node .mm-add,.mm-node .mm-del,.mm-node .mm-cog{display:block}
  .an-tools button{width:var(--tap-sm);height:var(--tap-sm)}
}

@container widget (max-width:520px){
  /* gedeelde taal-, reken- en gereedschapskaarten */
  .lg,.mt,.dc,.np,.timer,.nlw,.sb{gap:8px;padding:8px}
  .lg-top,.mt-top,.topts,.np-row,.nlw-settings{flex-wrap:wrap}
  .lg-top>*,.mt-top>*{max-width:100%}
  .lg-levels{max-width:100%;overflow-x:auto;scrollbar-width:thin}
  .lg-levels button{padding:6px 9px}
  .lg-progress,.mt-score{min-width:0;margin-left:0;flex:1;justify-content:flex-end;text-align:right}
  .lg-card,.mt-card{gap:8px;padding:8px}
  .lg-pic{font-size:clamp(42px,16cqi,60px)}
  .lg-pic img{width:clamp(58px,20cqi,76px);height:clamp(58px,20cqi,76px)}
  .lg-instr{padding:6px 8px;font-size:13px}
  .lg-slots{width:100%;max-width:100%;justify-content:flex-start;gap:7px;overflow-x:auto;padding:3px 1px 8px}
  .lg-tray{gap:7px;min-height:0;max-height:44%;overflow:auto;padding:8px}
  .lg-kbd{gap:5px;padding:7px}
  .lg-kbd button{width:36px;height:42px;font-size:18px}
  .lg-ed-form{gap:7px;padding:9px}
  .lg-ed-form input.ed-word,.ed-theme-name,.ed-theme-folder{width:min(100%,170px)}
  .ed-pictorow{flex-wrap:wrap}
  .fl-sel{min-width:0}
  .fl-word{min-height:54px;font-size:clamp(30px,14cqi,48px);letter-spacing:2px;text-align:center}
  .hk-word{min-height:54px}
  .hk-whole{font-size:clamp(30px,13cqi,44px)}
  .hk-l{font-size:clamp(27px,12cqi,40px)}
  .hk-sep{font-size:22px;margin:0 1px}
  .bl-balloons{font-size:clamp(24px,9cqi,32px);letter-spacing:2px}
  .bl-word{min-height:45px;font-size:clamp(28px,12cqi,40px);letter-spacing:3px;text-align:center}
  .mt-q{font-size:clamp(28px,12cqi,38px)}
  .mt-a{min-width:90px;height:50px;font-size:28px}
  .mt-pad{gap:6px}
  .mt-pad button{min-height:44px;padding:8px 0}

  /* schrijfblad, media, mindmap, anker, dobbelsteen, namen en timer */
  .wp-bar{gap:4px;padding:5px;max-height:45%;overflow:auto}
  .wp-group{gap:2px;padding:2px}
  .wp-group button{width:30px;height:30px}
  .wp-clear{width:34px;height:34px}
  .media-bar{flex-wrap:wrap;padding:7px}
  .media-bar input{flex-basis:190px}
  .mm-top{max-width:calc(100% - 16px);gap:4px;padding:4px 6px}
  .mm-hint{display:none}
  .mm-seg button{padding:5px 8px;font-size:12px}
  .mm-node{max-width:46%;padding:7px 10px}
  .mm-pop{max-width:calc(100% - 8px)}
  .an-hint{min-height:42px;padding:6px 92px 6px 8px}
  .an-tools{top:4px;right:4px}
  .an-cell{width:112px;height:52px;padding:2px 5px;font-size:13px}
  .dc-row{gap:8px}
  .die{width:clamp(64px,25cqi,84px);height:clamp(64px,25cqi,84px);padding:8px}
  .die i{width:clamp(10px,4cqi,14px);height:clamp(10px,4cqi,14px)}
  .np-result{min-height:62px;padding:7px;font-size:clamp(23px,9cqi,30px)}
  .np-row{gap:7px}
  .np-row .tbtn{flex:1}
  .np-row label{margin-left:0}
  .timer{gap:7px;padding:8px}
  .timer .tpie{max-height:190px}
  .timer .tdisp{font-size:clamp(36px,15cqi,46px)}
  .timer .presets button{padding:7px 10px}
  .timer .main button{padding:10px 16px}
  .tseg button{padding:6px 9px}

  /* verjaardag, getallenlijn en zinsbouwer */
  .bd{grid-template-columns:1fr}
  .bd-controls{max-height:165px;border-right:0;border-bottom:1px solid var(--line);
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px}
  .bd-controls>*{min-width:0}
  .bd-controls input[type=range]{width:min(96px,100%)}
  .bd-party{margin-top:0}
  .bd-stage{padding:48px 10px 25px}
  .bd-layer{height:62px}
  .bd-age-badge{min-width:48px;height:48px;font-size:24px}
  .nlw-settings{align-items:end;gap:5px}
  .nlw-settings label{flex:1;min-width:64px}
  .nlw-settings input,.nlw-settings select{width:100%}
  .nlw-new{margin-left:0}
  .nlw-scroll{padding-inline:8px}
  .nlw-actions{gap:5px;flex-wrap:wrap}
  .nlw-value{min-width:58px;font-size:24px}
  .sb-banks{grid-template-columns:1fr}
  .sb-sentence{min-height:60px;padding:8px}
  .sb-add{gap:5px}
  .sb-add input{min-width:120px}
  .sb-actions{gap:5px}

  /* educatieve widgets: dezelfde compacte opbouw als de oefenklok */
  .edu-stage{align-items:safe center;justify-content:safe center;padding:10px}
  .edu-controls{gap:6px;padding:0 8px 8px}
  .fraction-wall,.place-grid,.wordtypes,.schedule,.mood,.poll{align-self:center}
  .place-grid b{padding:6px 2px;font-size:9px;overflow-wrap:anywhere}
  .place-grid output{padding:12px 2px;font-size:clamp(22px,8cqi,36px)}
  .wordtypes,.mood{width:100%;justify-content:center}
  .schedule>div{gap:7px;padding:8px}
  .schedule span{min-width:0;overflow-wrap:anywhere}
  .mood .tbtn{font-size:30px;padding:9px}
  .poll h3{margin:8px 0}

  .money-task-card,.clock-task-card,.world-task-card{gap:9px;padding:10px}
  .world-top{top:-10px;gap:5px}
  .world-gallery{grid-template-columns:1fr}
  .world-visual.mixed{gap:6px}
  .world-photo-badge{left:6px;top:6px;padding:4px 7px;font-size:8px}
  .world-photo-credit{right:5px;bottom:5px;max-width:calc(100% - 10px);font-size:8px}
  .world-photo-answers{gap:6px}
  .world-clue{padding:13px 12px}
  .topo-map-wrap{padding:6px}
  .topo-map{max-height:450px}
  .world-map-wrap{padding:4px}
  .world-map{max-height:none}
  .world-continent-label{font-size:12px}
  .topo-world-legend{gap:4px}
  .topo-world-legend span{padding:4px 6px;font-size:10px}
  .money-top,.clock-top{top:-10px;gap:5px}
  .money-level-control>span,.clock-level-control>span{display:none}
  .money-shop-task{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:7px}
  .money-product,.money-paid{min-height:112px;padding:8px 6px;gap:4px}
  .money-product-icon{font-size:46px}
  .money-product-name{font-size:14px}
  .money-product .money-task-amount{font-size:32px}
  .money-product .money-task-words{font-size:16px}
  .money-paid>output{font-size:26px}
  .money-cash-tray{gap:6px;padding:9px}
  .clock{--clock-size:min(210px,68cqi)}
  .clock-target{min-height:72px}
  .clock-read-layout{gap:10px}
  .clock-read-layout>.clock-assignment{min-width:0;flex-basis:100%}
  .clock-block-tray.lg-tray{gap:7px;padding:9px}
}

@container widget (max-width:340px){
  .lg,.mt,.dc,.np,.timer,.nlw,.sb{padding:6px}
  .lg-cards{gap:3px}
  .lg-cards button,.lg-snd,.lg-mode{width:32px;height:34px}
  .lg .slot:not(.clock-digit-slot):not(.money-digit-slot),
  .lg .blok:not(.clock-digit-block):not(.money-digit-block){width:52px;height:82px}
  .clock-answer-slots,.money-answer-slots{gap:4px}
  .clock-digit-slot.slot.sm,.money-digit-slot.slot.sm{width:39px;height:60px}
  .clock-digit-block.blok,.money-digit-block.blok{width:34px;height:52px;min-height:52px}
  .clock-block-tray.lg-tray,.money-digit-tray.lg-tray{
    grid-template-columns:repeat(5,34px);gap:4px;padding:7px}
  .clock-block-tray .clock-drag-block{width:34px;height:52px;min-height:52px}
  .clock-type-display,.money-type-display{min-width:0;width:100%;font-size:30px}
  .world-answers{grid-template-columns:1fr}
  .world-visual.mixed{gap:5px}
  .schedule>div{flex-wrap:wrap}
  .schedule span{flex-basis:calc(100% - 70px)}
  .sb-add input{flex-basis:100%}
  .bd-controls{grid-template-columns:1fr;max-height:180px}
}