:root{
    --cream:#FFF6EC;--peach:#FFE8D6;--blush:#FFD9B8;
    --bubblegum:#FF8C42;--sky:#7EC8FF;--sunset:#FFB26B;
    --mint:#8EEAC8;--grape:#B69BFF;--ink:#2A1E3A;--ink-soft:#5A4A6A;
    --bounce:cubic-bezier(.34,1.56,.64,1);
  }
  html,body{background:var(--cream);color:var(--ink);font-family:'Nunito',system-ui,sans-serif;overflow-x:hidden}
  body{background:radial-gradient(1200px 700px at 10% -10%,var(--blush) 0%,transparent 60%),
       radial-gradient(900px 600px at 110% 10%,var(--peach) 0%,transparent 55%),
       radial-gradient(1000px 700px at 50% 110%,#FFEED4 0%,transparent 60%),var(--cream);min-height:100vh}
  .font-display{font-family:'Fredoka',system-ui,sans-serif;letter-spacing:-.01em}

  .blob{position:fixed;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none;z-index:0;mix-blend-mode:multiply}
  .blob.b1{width:520px;height:520px;left:-120px;top:-80px;background:var(--bubblegum);animation:blobFloat 18s ease-in-out infinite}
  .blob.b2{width:440px;height:440px;right:-100px;top:20%;background:var(--sky);animation:blobFloat 22s ease-in-out infinite reverse}
  .blob.b3{width:400px;height:400px;left:30%;bottom:-140px;background:var(--sunset);animation:blobFloat 26s ease-in-out infinite}
  .blob.b4{width:340px;height:340px;right:10%;bottom:-100px;background:var(--mint);animation:blobFloat 20s ease-in-out infinite reverse}
  @keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,25px) scale(.95)}}


  .card{background:#fff;border-radius:28px;box-shadow:0 10px 30px rgba(255,140,66,.12),0 2px 6px rgba(42,30,58,.06);position:relative;z-index:2}
  .card.grad-bubblegum{background:linear-gradient(135deg,#fff 0%,#fff 60%,#FFE7D3 100%)}
  .card.grad-sky{background:linear-gradient(135deg,#fff 0%,#fff 60%,#DCEEFF 100%)}
  .card.grad-sunset{background:linear-gradient(135deg,#fff 0%,#fff 60%,#FFE6D0 100%)}
  .card.grad-mint{background:linear-gradient(135deg,#fff 0%,#fff 60%,#D6F6EA 100%)}
  .card.grad-grape{background:linear-gradient(135deg,#7C5BE6 0%,#5C3FB6 60%,#3B1E6B 100%)}
  .card.rainbow{background:linear-gradient(135deg,#FFD9B8 0%,#FFE8D6 25%,#FFF6C8 50%,#D6F6EA 75%,#DCEEFF 100%)}

  .btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;padding:.75rem 1.25rem;border-radius:999px;transition:transform .25s var(--bounce),box-shadow .25s var(--bounce),background .2s;cursor:pointer;border:none;font-family:'Fredoka',sans-serif}
  .btn:hover{transform:translateY(-2px) scale(1.03)}
  .btn:active{transform:translateY(1px) scale(.98)}
  .btn-primary{background:linear-gradient(135deg,var(--bubblegum),#E55A19);color:#fff;box-shadow:0 6px 18px rgba(255,140,66,.45)}
  .btn-sky{background:linear-gradient(135deg,var(--sky),#5BA8F2);color:#fff;box-shadow:0 6px 18px rgba(126,200,255,.45)}
  .btn-sun{background:linear-gradient(135deg,var(--sunset),#FF8C42);color:#fff;box-shadow:0 6px 18px rgba(255,178,107,.5)}
  .btn-mint{background:linear-gradient(135deg,var(--mint),#4FD4A8);color:#0B4A38;box-shadow:0 6px 18px rgba(142,234,200,.5)}
  .btn-ghost{background:#FFF;color:var(--ink);box-shadow:0 2px 8px rgba(42,30,58,.08);border:2px solid #FFE7D3}
  .btn-ghost:hover{background:#FFFAF5}
  .btn-admin{background:linear-gradient(135deg,#2A1E3A,#4A2E5A);color:#fff;box-shadow:0 6px 18px rgba(42,30,58,.35)}

  .wobble{display:inline-block;animation:wobble 3.4s var(--bounce) infinite}
  @keyframes wobble{0%,100%{transform:rotate(-3deg) translateY(0)}25%{transform:rotate(3deg) translateY(-3px)}50%{transform:rotate(-2deg) translateY(1px)}75%{transform:rotate(4deg) translateY(-2px)}}

  .coin{display:inline-block;animation:flip 3s var(--bounce) infinite}
  @keyframes flip{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

  .badge-tilt{transition:transform .3s var(--bounce)}
  .badge-tilt:hover{transform:rotate(-6deg) scale(1.08)}

  .book{display:inline-block;transform-origin:bottom center;animation:bookRock 4s var(--bounce) infinite}
  .book:nth-child(2n){animation-delay:-1s;animation-duration:5s}
  .book:nth-child(3n){animation-delay:-2s;animation-duration:4.5s}
  @keyframes bookRock{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

  .fade-in{opacity:0;animation:fadeIn .9s var(--bounce) forwards}
  .fade-in.delay-1{animation-delay:.15s}.fade-in.delay-2{animation-delay:.30s}
  .fade-in.delay-3{animation-delay:.45s}.fade-in.delay-4{animation-delay:.60s}
  @keyframes fadeIn{0%{opacity:0;transform:translateY(14px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}

  .bar{position:relative;height:14px;background:#FFEAF2;border-radius:999px;overflow:hidden}
  .bar>span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--bubblegum),var(--sunset),var(--sky));border-radius:999px;transition:width .9s var(--bounce)}

  .nav-pill{position:relative;padding:.45rem .7rem;border-radius:999px;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:all .25s var(--bounce);display:inline-flex;align-items:center;gap:.35rem;font-size:.92rem;white-space:nowrap}
  .nav-pill .nav-ico{width:20px;height:20px;object-fit:contain;flex-shrink:0}
  .nav-pill:hover{background:#FFF4EA;color:var(--ink)}
  .nav-pill.active{background:linear-gradient(135deg,var(--bubblegum),#E55A19);color:#fff;box-shadow:0 4px 14px rgba(255,140,66,.4)}
  .nav-pill-admin.active{background:linear-gradient(135deg,#2A1E3A,#4A2E5A);color:#fff}
  /* Meldingsbol — verschijnt rechtsboven op een nav-pill als er werk ligt
     (bv. nieuwe bestellingen). Wit randje zorgt dat hij bovenop de pill
     duidelijk leesbaar blijft, ook bij de actieve donkere stijl. */
  .nav-pill .badge-dot{
    position:absolute;top:-6px;right:-6px;
    min-width:20px;height:20px;padding:0 6px;
    border-radius:999px;
    background:linear-gradient(135deg,#E55A19,#FF8C42);
    color:#fff;font-family:'Fredoka',sans-serif;font-weight:800;font-size:11px;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 4px 10px rgba(229,90,25,.5),0 0 0 2px #fff;
    animation:badgePulse 2s ease-in-out infinite;
    z-index:2;pointer-events:none;
  }
  @keyframes badgePulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.12)}
  }

  .tile{cursor:pointer;transition:transform .3s var(--bounce),box-shadow .3s var(--bounce);position:relative}
  .tile:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 40px rgba(255,140,66,.2)}
  .tile.done::after{content:"✓ Gedaan";position:absolute;top:10px;right:10px;background:linear-gradient(135deg,#4FD4A8,#2EB888);color:#fff;font-weight:800;font-size:11px;padding:4px 10px;border-radius:999px;font-family:'Fredoka',sans-serif}
  .tile.live::before{content:"● Live";position:absolute;top:10px;left:10px;background:linear-gradient(135deg,#B69BFF,#9478FF);color:#fff;font-weight:800;font-size:10px;padding:3px 8px;border-radius:999px;font-family:'Fredoka',sans-serif;z-index:1}

  .kid-tile{cursor:pointer;border-radius:24px;padding:1.25rem;transition:transform .3s var(--bounce);box-shadow:0 6px 18px rgba(42,30,58,.08);color:#fff;text-align:center}
  .kid-tile:hover{transform:translateY(-4px) rotate(-1deg) scale(1.03)}
  .kid-tile h4{font-family:'Fredoka',sans-serif;font-weight:700;margin-top:.5rem}

  .modal-bg{position:fixed;inset:0;background:rgba(42,30,58,.45);backdrop-filter:blur(6px);z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .25s ease}
  .modal-bg.fullscreen-bg{padding:0;background:rgba(42,30,58,.6)}

  /* Page-style — denksport-look. Witte cream-achtergrond i.p.v. donkere
     overlay, kleine '← Terug'-knop en subtiele titel. Pilot op sudoku. */
  .modal-bg.page-style-bg{background:var(--cream);backdrop-filter:none;animation:none}
  .modal.fullscreen.page-style{
    background:var(--cream);box-shadow:none;animation:none;
    padding:0 !important;
  }
  .modal.fullscreen.page-style .modal-head{
    display:flex;align-items:center;gap:.75rem;
    padding:.85rem 1.25rem;margin-bottom:0;
    border-bottom:1px solid #FFE7D3;background:#fff;
    flex-shrink:0;
  }
  .modal.fullscreen.page-style .ps-back{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:.45rem .9rem;border-radius:999px;
    background:#fff;border:2px solid #FFE7D3;color:var(--ink);
    font-weight:700;cursor:pointer;font-family:'Fredoka',sans-serif;
    transition:background .2s;font-size:.95rem;
  }
  .modal.fullscreen.page-style .ps-back:hover{background:#FFFAF5}
  .modal.fullscreen.page-style .ps-title{
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;
    color:var(--ink-soft);flex:1;
  }
  .modal.fullscreen.page-style .modal-body{
    padding:.5rem 1rem;background:var(--cream);
  }
  .modal.fullscreen.page-style .modal-actions{
    padding:.6rem 1rem 1rem;background:var(--cream);border-top:1px solid #FFE7D3;
    justify-content:center;gap:.5rem;
  }

  /* Page-style modal-body: niet scrollen, content centreren. Geldt voor zowel
     numeric-page-body (sudoku/minisudoku/binaire) als word-puzzels — bij die
     laatste verbergen we de clue-lijst, zodat alles in 1 scherm past. */
  .modal.fullscreen.page-style .modal-body{
    overflow:hidden !important;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  /* Word-puzzels in page-style: verberg clue-lijst + intro (active-clue-bar
     laat de huidige clue zien bij klik), centreer het grid, en cap cellen
     op basis van --cols/--rows die per modal worden gezet als inline-style
     op de puzzle-layout. */
  .modal.fullscreen.page-style .puzzle-clues-col,
  .modal.fullscreen.page-style .fil-clues-col{display:none}
  /* Verberg de intro-paragraaf (eerste <p>) in modal-body. :first-of-type
     ipv :first-child zodat het ook werkt als er een <style>-block voor staat
     (filippine-v2). De spelregels staan in de Info-popup via de ℹ️-knop. */
  .modal.fullscreen.page-style .modal-body > p:first-of-type{display:none}
  .modal.fullscreen.page-style .puzzle-layout,
  .modal.fullscreen.page-style .fil-layout{
    display:flex;justify-content:center;width:100%;
  }
  /* BELANGRIJK: standaard .puzzle-grid-col heeft overflow:auto wat een scroll
     veroorzaakt. In page-style overschrijven we naar visible — de cellen
     scalen zo dat alles past, geen scroll nodig. */
  .modal.fullscreen.page-style .puzzle-grid-col,
  .modal.fullscreen.page-style .fil-grid-col{
    display:flex;justify-content:center;flex:0 1 auto;
    overflow:visible !important;max-height:none !important;
  }
  .modal.fullscreen.page-style .cw-wrap{padding:.2rem;max-width:100%;overflow:visible}
  /* Voor alle page-style puzzels: verberg de modal-head zodat het grid
     extra hoogte krijgt. ← Terug zit in de action-bar onderaan. */
  .modal.fullscreen.page-style:has(.puzzle-layout) .modal-head,
  .modal.fullscreen.page-style:has(.fil-layout) .modal-head,
  .modal.fullscreen.page-style:has(.ck-wrap) .modal-head,
  .modal.fullscreen.page-style:has(.numeric-page-body) .modal-head,
  .modal.fullscreen.page-style:has(.ws-wrap) .modal-head,
  .modal.fullscreen.page-style:has(.ng-grid) .modal-head,
  .modal.fullscreen.page-style:has(.hd-grid) .modal-head{display:none}
  /* Cell-size fallback voor de eerste render — fitGridToScreen() in JS
     meet daarna de werkelijke beschikbare ruimte en overschrijft via een
     inline style (geen !important hier zodat JS-waarde wint). */
  .modal.fullscreen.page-style .puzzle-layout .cw-grid,
  .modal.fullscreen.page-style .fil-layout .cw-grid{
    --cell:min(60px, calc((100dvh - 220px) / var(--rows,12)), calc((100dvw - 1.5rem) / var(--cols,12)));
  }
  /* Compacte action-bar in page-style. Forceer 1 rij + horizontale scroll
     ipv wrap, anders rekt de hoogte op en past het grid niet meer. */
  .modal.fullscreen.page-style .modal-actions{
    padding:.4rem 1rem !important;gap:.4rem;
    flex-wrap:nowrap !important;overflow-x:auto;
  }
  .modal.fullscreen.page-style .modal-actions::-webkit-scrollbar{height:0;display:none}
  .modal.fullscreen.page-style .modal-actions .btn{
    padding:.5rem .85rem;font-size:.95rem;flex-shrink:0;
  }
  /* Absolute zekerheid: geen zichtbare scrollbars in page-style modal-body. */
  .modal.fullscreen.page-style .modal-body{scrollbar-width:none}
  .modal.fullscreen.page-style .modal-body::-webkit-scrollbar{display:none}
  /* Modal-body als flex-column: puzzle-layout krijgt flex:1 (alle ruimte tussen
     header en pad), clue-bar en pad zitten in de natuurlijke flow eronder.
     overflow:hidden op puzzle-layout zorgt dat een groot grid binnen z'n
     grenzen blijft (geen overlap met de pad). */
  .modal.fullscreen.page-style .modal-body{
    display:flex !important;flex-direction:column;align-items:stretch;
    justify-content:flex-start !important;
    padding:.5rem !important;gap:.4rem;
  }
  .modal.fullscreen.page-style .puzzle-layout,
  .modal.fullscreen.page-style .fil-layout{
    flex:1 1 auto;min-height:0;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .modal.fullscreen.page-style .active-clue-bar{
    flex:0 0 auto;margin:0;padding:.25rem .6rem;min-height:auto;
    width:100%;max-width:none;font-size:.8rem;
  }
  .modal.fullscreen.page-style .active-clue-primary{font-size:.85rem}
  .modal.fullscreen.page-style .active-clue-secondary{font-size:.7rem}
  .modal.fullscreen.page-style .letter-pad{
    flex:0 0 auto;margin:0;padding:0;
  }
  /* Woordzoeker page-style: layout verticaal (grid bovenin gecentreerd,
     woordenlijst eronder net als legpuzzel), oranje brand-kleuren. */
  .modal.fullscreen.page-style .ws-layout{
    display:flex !important;flex-direction:column;align-items:center;
    flex:1 1 auto;min-height:0;gap:.4rem;
  }
  .modal.fullscreen.page-style .ws-grid-col{
    flex:0 1 auto;display:flex;align-items:center;justify-content:center;
    align-self:center;  /* override bestaande align-self:flex-start */
  }
  .modal.fullscreen.page-style .ws-clues-col{
    flex:0 0 auto;width:100%;min-height:0;
  }
  .modal.fullscreen.page-style .ws-words{
    background:#FFFAF5;border:1px solid #FFE7D3;border-radius:12px;
    padding:.5rem;max-width:none;min-width:0;max-height:160px;
    overflow-y:auto;
  }
  .modal.fullscreen.page-style .ws-words h4{
    font-size:.85rem;margin:0 0 .35rem 0;color:var(--ink-soft);
  }
  .modal.fullscreen.page-style .ws-word-list{
    display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;
  }
  .modal.fullscreen.page-style .ws-word{
    background:#fff;border:2px solid #FFE7D3;
    padding:.3rem .6rem;border-radius:8px;
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:.85rem;
    color:var(--ink);
  }
  .modal.fullscreen.page-style .ws-word.done{opacity:.4;text-decoration:line-through}
  /* Grid + cellen in huisstijl-oranje */
  .modal.fullscreen.page-style .ws-grid{
    background:#E55A19 !important;border-color:#E55A19 !important;
  }
  .modal.fullscreen.page-style .ws-cell{
    background:#fff;color:var(--ink);
  }
  .modal.fullscreen.page-style .ws-cell:hover{background:#FFFAF5}
  .modal.fullscreen.page-style .ws-cell.anchor{
    background:#FFC09A;color:var(--ink);
    outline:3px solid var(--bubblegum);outline-offset:-3px;
  }
  /* Found-cellen behouden de inline-kleur die JS instelt — geen hover-override. */
  .modal.fullscreen.page-style .ws-cell.found:hover{background:inherit}

  /* Legpuzzel-pad: woord-chips onder het grid i.p.v. letter-toetsenbord. */
  .legpuzzel-pad{
    flex:0 0 auto;width:100%;
    display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;
    padding:.5rem;max-height:160px;overflow-y:auto;
    background:#FFFAF5;border-radius:12px;border:1px solid #FFE7D3;
  }
  .legpuzzel-word-chip{
    padding:.4rem .7rem;border-radius:8px;
    background:#fff;border:2px solid #FFE7D3;
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:.95rem;
    color:var(--ink);cursor:pointer;
    transition:transform .1s, background .15s, border-color .15s;
  }
  .legpuzzel-word-chip:hover{background:#FFFAF5}
  .legpuzzel-word-chip:active{transform:scale(.95)}
  .legpuzzel-word-chip.lp-selected{
    background:linear-gradient(135deg,#FFC09A,#FF8C42);
    color:#fff;border-color:#E55A19;
    box-shadow:0 4px 12px rgba(255,140,66,.4);
  }
  .legpuzzel-word-chip.lp-placed{
    opacity:.4;text-decoration:line-through;
    cursor:default;pointer-events:none;
  }
  /* Pad-buttons compacter — 3 rijen samen ~95px hoog. */
  .modal.fullscreen.page-style .letter-pad button{
    padding:.3rem .1rem;font-size:.85rem;border-radius:7px;
  }
  /* Action-buttons compacter zodat de balk ~38px hoog blijft. */
  .modal.fullscreen.page-style .modal-actions{
    padding:.2rem .5rem !important;
  }
  .modal.fullscreen.page-style .modal-actions .btn{
    padding:.3rem .65rem;font-size:.85rem;
  }
  /* Numeric-page-body: gecentreerd, grid + nummerpad. Cellen worden gecapt
     op beschikbare ruimte (header/actions/intro/numpad nemen ~340px verticaal)
     EN op de werkelijke aantal kolommen via --cols (CSS-var per puzzel). */
  .numeric-page-body{
    display:flex;flex-direction:column;align-items:center;
    gap:.6rem;padding:0;width:100%;max-width:560px;
    margin:0 auto;  /* horizontaal centreren in modal-body */
    --cols:9;--rows:9;
  }
  .numeric-page-body .cw-grid{
    --cell:min(60px, calc((100dvh - 340px) / var(--rows)), calc((100dvw - 2rem) / var(--cols))) !important;
  }
  /* Intro-paragraaf in numeric-page-body verbergen — info zit in ℹ️-popup. */
  .numeric-page-body > p:first-of-type{display:none}
  /* Gegeven cijfers in sudoku: wit met zwarte cijfers (normaal startgetal,
     geen 'hint'-stijl zoals bij kruiswoord). */
  .numeric-page-body .cw-cell.given{background:#fff !important}
  .numeric-page-body .cw-cell.given input:disabled{color:#000 !important;font-weight:800}
  /* Selectie-stijl exact zoals crossword .active-cell: input krijgt felle
     oranje + bubblegum border. Werkt consistent voor en na invullen omdat
     de stijl op de INPUT zit (niet op de cel) en blijft staan zolang de
     cel de .selected-pad class heeft. */
  .cw-cell.selected-pad input{
    background:#FFC09A !important;
    box-shadow:inset 0 0 0 2px var(--bubblegum);
    z-index:3;
  }
  /* QWERTY letter-pad voor word-puzzels (kruiswoord / cryptische / doorloper /
     legpuzzel / filippine). Wordt onder het grid gerenderd; cellen zijn
     readonly zodat het OS-toetsenbord op mobiel niet popt. */
  .letter-pad{
    width:100%;max-width:100%;margin:.5rem auto 0;
    padding:0 .25rem;
    display:flex;flex-direction:column;gap:.35rem;
  }
  .letter-pad .lp-row{display:flex;gap:.35rem;justify-content:center;width:100%}
  .letter-pad button{
    flex:1;min-width:0;padding:.85rem .15rem;
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.15rem;
    background:#fff;border:2px solid #FFE7D3;border-radius:10px;
    cursor:pointer;color:var(--ink);transition:transform .12s, background .2s;
  }
  .letter-pad button:hover{background:#FFFAF5}
  .letter-pad button:active{transform:scale(.94)}
  .letter-pad .lp-backspace{
    flex:3;background:linear-gradient(135deg,#FFE7D3,#FFD9B8);
    color:#7A4E00;font-size:1.2rem;
  }
  @media (max-width:640px){
    .letter-pad{gap:.25rem}
    .letter-pad .lp-row{gap:.2rem}
    .letter-pad button{padding:.65rem .1rem;font-size:1rem;border-radius:8px}
  }

  .sudoku-numpad{
    display:grid;grid-template-columns:repeat(5,1fr);
    gap:.4rem;width:100%;max-width:560px;
  }
  .sudoku-numpad button{
    padding:.55rem .25rem;
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.25rem;
    background:#fff;border:2px solid #FFE7D3;border-radius:12px;
    cursor:pointer;color:var(--ink);transition:transform .15s, background .2s;
  }
  .sudoku-numpad button:hover{background:#FFFAF5}
  .sudoku-numpad button:active{transform:scale(.94)}
  .sudoku-numpad button.eraser{
    background:linear-gradient(135deg,#FFE7D3,#FFD9B8);
    color:#7A4E00;
  }
  /* iOS Safari zoomt standaard in op een dubbel-tap. Voor alle interactieve
     puzzel-elementen (cellen, letter-/cijferpad, actiebar, woord-chips)
     schakelen we dat uit met touch-action: manipulation — single-tap blijft
     werken, dubbel-tap-zoom verdwijnt. Pinch-zoom blokkeren we al via
     touchmove-preventDefault elders. Op desktop heeft deze property geen
     visueel effect, dus desktop ongemoeid. */
  .letter-pad button,
  .sudoku-numpad button,
  .modal-actions .btn,
  .cw-cell, .fp-cell, .ck-cell, .ng-cell, .hd-cell,
  .legpuzzel-word-chip{
    touch-action:manipulation;
  }
  @media (max-width:640px){
    .modal.fullscreen.page-style .modal-head{padding:.55rem .75rem;gap:.5rem}
    .modal.fullscreen.page-style .ps-back{padding:.35rem .65rem;font-size:.85rem}
    .modal.fullscreen.page-style .ps-title{font-size:.85rem}
    .sudoku-numpad button{padding:.6rem .25rem;font-size:1.15rem}
    .sudoku-page-body{gap:.6rem}
  }

  .modal{background:#fff;border-radius:28px;max-width:720px;width:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(42,30,58,.3);animation:modalIn .5s var(--bounce)}
  .modal.wide{max-width:1100px}
  .modal.extra-wide{max-width:1400px}
  .modal.fullscreen{max-width:none;width:100vw;height:100vh;max-height:100dvh;border-radius:0;padding:1.25rem 1.5rem !important}
  .modal .modal-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
  .modal .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto}
  .modal .modal-body.puzzle{overflow:hidden;display:flex;flex-direction:column;gap:.5rem}
  .modal .modal-actions{flex-shrink:0;display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}
  /* Landschap-melding voor puzzel-modals — alleen tonen op kleine schermen
     in landschap-oriëntatie. Cellen passen daar niet meer betekenisvol. */
  .landscape-rotate-prompt{display:none;position:absolute;inset:0;background:#fff;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;z-index:60}
  .landscape-rotate-prompt .rotate-icon{font-size:5rem;animation:rotatePulse 1.5s ease-in-out infinite;display:inline-block}
  .landscape-rotate-prompt .rotate-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.6rem;color:var(--bubblegum);margin-top:.75rem}
  .landscape-rotate-prompt .rotate-sub{margin-top:.4rem;font-size:.95rem;color:var(--ink-soft)}
  @keyframes rotatePulse{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}}
  /* Tonen wanneer de modal in landschap én de hoogte beperkt is (telefoons,
     niet tablets). 500px max-height vangt vrijwel alle smartphones in landschap. */
  @media (orientation:landscape) and (max-height:500px){
    .modal.fullscreen .landscape-rotate-prompt{display:flex}
  }

  /* Mobiel: kleinere padding zodat de puzzel meer ruimte heeft + nooit verticaal scrollen. */
  @media (max-width:640px){
    .modal.fullscreen{padding:.6rem !important}
    .modal .modal-head{margin-bottom:.35rem}
    .modal .modal-actions{margin-top:.4rem;gap:.3rem}
    .modal .modal-actions .btn{padding:.5rem .75rem;font-size:.85rem}
    .modal .modal-body.puzzle{overflow:hidden;gap:.3rem}
    .modal .modal-body.puzzle p{font-size:.78rem;margin-bottom:.25rem}
    .puzzle-grid-col{padding:0;display:flex;justify-content:center}
    .active-clue-bar{padding:.4rem .55rem;border-radius:10px;margin-bottom:.25rem}
    .active-clue-primary{font-size:.88rem;line-height:1.25}
    .active-clue-secondary{font-size:.72rem;line-height:1.2}
    /* Puzzel-actiebar: alleen emoji op mobiel zodat alle knoppen in 1 rij passen
       zonder horizontale scroll. Bevestigings-popup vangt de zware acties op
       (zie mobileActionConfirm in render.js). Desktop: .mobile-emoji-only doet
       niets omdat de mediaquery niet matcht — knoppen blijven volledig tekst. */
    .modal-actions.mobile-emoji-only .btn-text{display:none}
    .modal-actions.mobile-emoji-only .btn{
      padding:.5rem .7rem;min-width:2.6rem;justify-content:center;
    }
    .modal-actions.mobile-emoji-only .btn-emoji{font-size:1.15rem;line-height:1}
  }
  @keyframes modalIn{0%{transform:scale(.92) translateY(20px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}

  /* ============ PUZZLE SIDE-BY-SIDE LAYOUT ============ */
  .puzzle-layout{display:flex;gap:1.5rem;align-items:stretch;flex:1 1 auto;min-height:0;flex-wrap:nowrap}
  .puzzle-grid-col{flex:0 0 auto;min-width:0;max-height:100%;overflow:auto;padding:.25rem;align-self:flex-start}
  .puzzle-clues-col{flex:1 1 400px;min-width:300px;max-height:100%;overflow-y:auto;padding-right:.5rem}

  /* Multi-column clue layout — vult alle beschikbare breedte-ruimte */
  .clues-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:1.5rem;align-content:start}
  .clue-section h4{position:sticky;top:0;background:#fff;padding:.2rem 0 .5rem;margin-bottom:.25rem;z-index:2;border-bottom:1px solid #FFE7D3}
  .clue-section ol{column-width:190px;column-gap:1.5rem;column-fill:balance;list-style:none;padding:0;margin:0}
  .clue-section ol li{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;padding:3px 4px;font-size:.88rem;line-height:1.4;border-radius:6px;transition:background .15s}
  .clue-section ol li:hover{background:#FFF4EA}
  .clue-section ol li b{color:var(--bubblegum);margin-right:.3rem}
  @media (max-width:900px){
    /* GEEN overflow-y:auto meer — puzzel moet altijd zonder scroll passen.
       De cell-formule (min van breedte+hoogte) zorgt dat alles in beeld is. */
    .puzzle-layout{flex-wrap:wrap}
    .puzzle-grid-col,.puzzle-clues-col{max-height:none;width:100%}
    .puzzle-clues-col{min-width:0}
    .clue-section ol{column-width:240px}
  }

  /* ============ PUZZEL VAN DE WEEK (hero) ============ */
  .week-hero{position:relative;border-radius:36px;padding:3rem 2rem 2.5rem;background:linear-gradient(135deg,#FFE8D6 0%,#FFD9B8 50%,#FFF6C8 100%);border:3px solid #FFD93D;overflow:hidden;text-align:center;transition:transform .4s var(--bounce),box-shadow .4s var(--bounce)}
  .week-hero:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(255,140,66,.25)}
  .week-hero::before{content:"⭐";position:absolute;top:10%;right:4%;font-size:16rem;opacity:.13;transform:rotate(18deg);pointer-events:none;animation:twinkle 5s ease-in-out infinite}
  .week-hero::after{content:"🎊";position:absolute;bottom:8%;left:6%;font-size:6rem;opacity:.12;animation:floatY 7s ease-in-out infinite}
  @keyframes twinkle{0%,100%{transform:rotate(18deg) scale(1);opacity:.13}50%{transform:rotate(22deg) scale(1.08);opacity:.22}}
  @keyframes floatY{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-14px) rotate(5deg)}}
  .week-trophy{position:absolute;top:1.25rem;left:1.75rem;font-size:3.8rem;filter:drop-shadow(0 6px 12px rgba(217,147,0,.4));animation:trophyBounce 3.2s ease-in-out infinite;transform-origin:center}
  img.week-trophy{width:64px;height:64px;object-fit:contain}
  .week-hero:hover .week-trophy{animation-duration:1.4s}
  @keyframes trophyBounce{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(6deg) translateY(-8px)}}
  .week-label{font-family:'Fredoka';font-weight:700;font-size:.85rem;letter-spacing:.22em;color:#8B5A00;margin-bottom:1rem;display:inline-flex;align-items:center;gap:.4rem}
  .week-label .dot-star{color:#FFB300}
  .week-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(2.5rem,6vw,4.5rem);line-height:1;color:var(--ink);margin:0;letter-spacing:-.02em}
  .week-title .accent{background:linear-gradient(135deg,var(--sunset) 0%,var(--bubblegum) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block;transition:transform .3s var(--bounce)}
  .week-hero:hover .week-title .accent{transform:rotate(-4deg) scale(1.06)}
  .week-desc{color:var(--ink-soft);font-size:1.05rem;max-width:640px;margin:1rem auto 0;line-height:1.55}
  .week-countdown{display:flex;justify-content:center;gap:1rem;margin:2rem 0 1.5rem;flex-wrap:wrap}
  .count-box{background:#fff;border-radius:22px;padding:1rem 1.4rem;min-width:110px;text-align:center;box-shadow:0 10px 25px rgba(42,30,58,.08);transition:transform .35s var(--bounce),box-shadow .35s var(--bounce);cursor:default}
  .count-box:hover{transform:translateY(-6px) scale(1.05) rotate(-1.5deg);box-shadow:0 18px 35px rgba(255,140,66,.25)}
  .count-num{font-family:'Fredoka';font-weight:700;font-size:2.75rem;line-height:1;background:linear-gradient(135deg,var(--sunset),var(--bubblegum));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  .count-label{font-family:'Fredoka';font-weight:700;font-size:.72rem;letter-spacing:.16em;color:var(--ink-soft);margin-top:.4rem}
  .week-cta{display:inline-flex;align-items:center;gap:.6rem;padding:1.1rem 2.6rem;border-radius:999px;background:linear-gradient(135deg,var(--sunset),var(--bubblegum));color:#fff;font-family:'Fredoka';font-weight:700;font-size:1.15rem;box-shadow:0 12px 32px rgba(255,140,66,.45);transition:transform .35s var(--bounce),box-shadow .35s var(--bounce);cursor:pointer;border:none;position:relative;overflow:hidden}
  .week-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);transform:translateX(-150%);transition:transform .7s ease}
  .week-cta:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 20px 45px rgba(255,140,66,.6)}
  .week-cta:hover::before{transform:translateX(150%)}
  .week-cta:active{transform:translateY(-1px) scale(.98)}
  .week-cta-done{display:inline-flex;align-items:center;gap:.6rem;padding:1.1rem 2.5rem;border-radius:999px;background:linear-gradient(135deg,#8EEAC8,#4FD4A8);color:#0B4A38;font-family:'Fredoka';font-weight:700;font-size:1.1rem;box-shadow:0 10px 25px rgba(142,234,200,.5)}

  .week-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1.25rem}
  .week-stat{background:#fff;border-radius:26px;padding:1.5rem;border:2px solid transparent;transition:all .35s var(--bounce);position:relative;overflow:hidden;cursor:default}
  .week-stat::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,140,66,.07),transparent 60%);opacity:0;transition:opacity .35s}
  .week-stat:hover{transform:translateY(-8px) rotate(-.3deg);border-color:var(--bubblegum);box-shadow:0 20px 40px rgba(255,140,66,.22)}
  .week-stat:hover::before{opacity:1}
  .week-stat:hover .week-stat-icon{transform:rotate(10deg) scale(1.2)}
  .week-stat.highlight{border-color:var(--bubblegum);box-shadow:0 12px 28px rgba(255,140,66,.2)}
  .week-stat-icon{font-size:2.4rem;transition:transform .4s var(--bounce);display:inline-block}
  .week-stat h3{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.25rem;margin-top:.75rem}
  .week-stat p{color:var(--ink-soft);font-size:.9rem;margin-top:.4rem;line-height:1.45}

  /* ============ SHOP IMAGE BOX (whole product visible) ============ */
  .shop-img-box{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#FFF 0%,#FFFAF5 100%);border-radius:18px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:.25rem}
  .shop-img-box img{width:100%;height:100%;object-fit:contain;display:block;border-radius:14px}
  .shop-img-box.fallback{background:linear-gradient(135deg,#FFE8D6,#FFD9B8);font-size:4.5rem}

  /* ============ BOOK SOLVE DIALOG (klant) ============ */
  .book-layout{display:grid;grid-template-columns:220px 1fr;gap:1.5rem;align-items:start}
  @media (max-width:800px){.book-layout{grid-template-columns:1fr}}
  .book-sidebar{position:sticky;top:0}
  .book-main{min-width:0}
  .book-q-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.75rem}
  .book-q-card{padding:1rem;border-radius:18px;background:linear-gradient(135deg,#fff,#FFFAF5);border:2px solid transparent;transition:border .25s,background .25s,transform .25s var(--bounce);box-shadow:0 3px 10px rgba(42,30,58,.05)}
  .book-q-card:hover{transform:translateY(-3px)}
  .book-q-card.correct{background:linear-gradient(135deg,#F0FFF6,#D6F6EA);border-color:#4FD4A8}
  .book-q-card.incorrect{background:linear-gradient(135deg,#FFF8F2,#FFE0CB);border-color:#E55A19}
  .book-q-card.already{background:linear-gradient(135deg,#F3F7FF,#DCEEFF);border-color:#7EC8FF}
  .book-q-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.5rem}
  .book-q-title{font-family:'Fredoka';font-weight:700;font-size:.95rem;line-height:1.2;flex:1}
  .book-q-points{flex-shrink:0;background:#FFF1A8;color:#7A4E00;padding:.2rem .6rem;border-radius:999px;font-family:'Fredoka';font-weight:700;font-size:.72rem}
  .book-q-input{font-family:'Fredoka';font-weight:600;font-size:1rem}
  .book-q-status{margin-top:.5rem;min-height:1.5rem}

  /* ============ BOOK COVER BOX (portrait, whole cover visible) ============ */
  .cover-img-box{width:100%;aspect-ratio:3/4;background:linear-gradient(135deg,#FFF 0%,#FFFAF5 100%);border-radius:18px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:.25rem}
  .cover-img-box img{width:100%;height:100%;object-fit:contain;display:block;border-radius:14px}
  .cover-img-box.fallback{background:linear-gradient(135deg,#FFE7D3,#FFF1A8);font-size:4rem}

  /* ============ PDF READER (klant) ============ */
  .modal.fullscreen.pdf-modal{padding:.6rem .9rem !important}
  .modal-body.pdf-body{overflow:hidden;display:flex;flex-direction:column;padding:0}
  .pdf-reader{display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto;min-height:0;width:100%}
  .pdf-canvas-wrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2A1E3A,#4A2E5A);border-radius:14px;padding:.5rem;position:relative;overflow:hidden}
  .pdf-canvas-wrap canvas{box-shadow:0 20px 40px rgba(0,0,0,.35);border-radius:4px;background:#fff;display:block}
  .pdf-controls{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;flex-shrink:0;padding:.25rem 0}
  .pdf-page-info{font-family:'Fredoka';font-weight:700;min-width:90px;text-align:center;font-size:1.05rem}
  .pdf-nav-btn{padding:.55rem 1.2rem;border-radius:999px;background:linear-gradient(135deg,var(--bubblegum),#E55A19);color:#fff;font-family:'Fredoka';font-weight:700;border:none;cursor:pointer;transition:transform .25s var(--bounce),box-shadow .25s;box-shadow:0 6px 18px rgba(255,140,66,.35)}
  .pdf-nav-btn:hover:not(:disabled){transform:translateY(-2px) scale(1.05);box-shadow:0 10px 22px rgba(255,140,66,.5)}
  .pdf-nav-btn:disabled{background:#E0D5E8;color:#9a8aa5;cursor:not-allowed;box-shadow:none}

  /* ============ TERMS POPUP (first login) ============ */
  .terms-body{font-weight:500;color:var(--ink)}
  .terms-body ul{list-style:disc;margin:.4rem 0 .4rem 1.25rem;padding-left:.25rem}
  .terms-body li{margin:.35rem 0}
  .terms-body a{color:var(--bubblegum);font-weight:700}
  .terms-body a:hover{color:#E55A19;text-decoration:underline}

  /* ============ ARENA TILES (redesign) ============ */
  .arena-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
  .arena-tile{
    position:relative;overflow:hidden;padding:1.5rem;border-radius:28px;cursor:pointer;
    background:linear-gradient(135deg,#fff 0%,#FFF8FC 55%,#FFE8F3 100%);
    box-shadow:0 6px 22px rgba(42,30,58,.08);
    transition:transform .35s var(--bounce),box-shadow .35s var(--bounce);
    display:flex;flex-direction:column;gap:.7rem;min-height:230px;
  }
  .arena-tile.gradient-sky{background:linear-gradient(135deg,#fff 0%,#F2F9FF 55%,#DCEEFF 100%)}
  .arena-tile.gradient-sun{background:linear-gradient(135deg,#fff 0%,#FFF8EC 55%,#FFE6D0 100%)}
  .arena-tile.gradient-mint{background:linear-gradient(135deg,#fff 0%,#F0FBF7 55%,#D6F6EA 100%)}
  .arena-tile.gradient-grape{background:linear-gradient(135deg,#fff 0%,#F7F2FF 55%,#EAE0F5 100%)}
  .arena-tile:hover{transform:translateY(-8px) rotate(-.4deg) scale(1.02);box-shadow:0 22px 40px rgba(255,140,66,.25)}
  .arena-tile:hover .arena-emoji{transform:scale(1.08)}
  .arena-tile:active{transform:translateY(-2px) scale(.99)}

  .arena-badge{align-self:flex-start;padding:.3rem .75rem;border-radius:999px;font-family:'Fredoka';font-weight:700;font-size:.72rem;display:inline-flex;align-items:center;gap:.3rem;z-index:2}
  .arena-badge.populair{background:#FFE7D3;color:#5C2E0B}
  .arena-badge.nieuw{background:#D6F6EA;color:#0B4A38}
  .arena-badge.klassiek{background:#EAE0F5;color:#3B1E6B}
  .arena-emoji{display:block;margin:.2rem auto auto;flex:1 1 auto;min-height:0;max-height:100%;transition:transform .45s var(--bounce);filter:drop-shadow(0 6px 14px rgba(42,30,58,.18))}
  img.arena-emoji{width:auto;height:140px;max-width:80%;object-fit:contain}
  .arena-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.2rem;color:var(--ink);line-height:1.1;text-align:center}
  .arena-foot{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:.2rem;font-size:.78rem;color:var(--ink-soft);font-family:'Fredoka';font-weight:600}
  .arena-hints{display:inline-flex;align-items:center;gap:.3rem}
  .arena-done-today{color:#0F5132;font-weight:700}
  .arena-done-ribbon{position:absolute;top:18px;right:-42px;width:150px;transform:rotate(45deg);background:linear-gradient(135deg,#4FD4A8,#2EB888);color:#fff;font-family:'Fredoka';font-weight:800;font-size:11px;letter-spacing:.6px;text-align:center;padding:5px 0;box-shadow:0 3px 8px rgba(46,184,136,.4),inset 0 -1px 0 rgba(0,0,0,.08);z-index:3;pointer-events:none}
  .arena-tile-done .arena-emoji{opacity:.32;filter:grayscale(.4) drop-shadow(0 4px 8px rgba(42,30,58,.1))}
  .arena-tile-done:hover .arena-emoji{opacity:.5;transform:scale(1.05)}
  .arena-live-dot{position:absolute;top:1.4rem;right:1.4rem;width:10px;height:10px;border-radius:50%;background:#E55A19;box-shadow:0 0 0 4px rgba(229,90,25,.25);animation:livePulse 2s infinite;z-index:2}
  @keyframes livePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

  .filter-pill{padding:.55rem 1.1rem;border-radius:999px;background:#fff;color:var(--ink);font-weight:700;font-family:'Fredoka';cursor:pointer;transition:transform .2s var(--bounce),background .2s,color .2s,box-shadow .2s;font-size:.85rem;border:none;box-shadow:0 2px 8px rgba(42,30,58,.06)}
  .filter-pill:hover{transform:translateY(-2px) scale(1.04);background:#FFFAF5}
  .filter-pill.active{background:#2A1E3A;color:#fff;box-shadow:0 8px 20px rgba(42,30,58,.35)}

  .inp{width:100%;padding:.8rem 1rem;border:2px solid #FFE7D3;border-radius:14px;background:#FFFAFC;font-family:'Nunito',sans-serif;font-weight:600;transition:border .2s}
  .inp:focus{outline:none;border-color:var(--bubblegum);background:#fff}
  label{font-weight:700;font-size:.85rem;color:var(--ink-soft);margin-bottom:.3rem;display:block}

  .tag{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.72rem;font-weight:800;font-family:'Fredoka',sans-serif}
  .tag-green{background:#D6F6EA;color:#0B4A38}
  .tag-red{background:#FFE0CB;color:#7A1A2E}
  .tag-yellow{background:#FFF3C8;color:#6B4F00}
  .tag-blue{background:#DCEEFF;color:#0B3A6B}
  .tag-pink{background:#FFE7D3;color:#5C2E0B}
  .tag-purple{background:#E9DFFF;color:#3B1E6B}

  .chip{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .7rem;border-radius:999px;background:#FFF4EA;font-weight:700;font-size:.8rem;color:var(--ink-soft)}
  .chip .chip-ico{width:18px;height:18px;object-fit:contain;flex-shrink:0}
  .chip-admin{background:#EAE0F5;color:#3B1E6B}

  .coin-big{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF1A8,#FFC13B 60%,#D99300);display:inline-flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:700;color:#7A4E00;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15),0 4px 10px rgba(217,147,0,.4)}

  .shelf{background:linear-gradient(180deg,#FFE8D6 0%,#F0C89C 100%);height:14px;border-radius:6px;box-shadow:0 8px 0 #D9A977,0 10px 20px rgba(0,0,0,.1);margin-top:-6px}
  .divider{height:1px;background:linear-gradient(90deg,transparent,#FFD1E1,transparent);margin:1rem 0}

  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:#FFD1E1;border-radius:999px}
  ::-webkit-scrollbar-thumb:hover{background:#FFC09A}

  .plant-pot{width:60px;height:50px;background:linear-gradient(180deg,#C97B4F,#8D4F2A);border-radius:4px 4px 18px 18px;margin:0 auto;position:relative}
  .plant-stem{width:6px;background:#3E8B4E;margin:0 auto;border-radius:999px;transition:height .8s var(--bounce)}
  .plant-leaf{width:24px;height:16px;background:#5DB76F;border-radius:50% 50% 50% 0;display:inline-block}

  .hole{width:80px;height:50px;background:radial-gradient(ellipse at center 120%,#3A2515,#7A4A2A);border-radius:50%;position:relative;overflow:hidden;cursor:pointer}
  .mole{width:50px;height:50px;background:radial-gradient(circle at 50% 30%,#A87754,#6B4226);border-radius:50% 50% 40% 40%;position:absolute;left:50%;transform:translateX(-50%);bottom:-55px;transition:bottom .2s var(--bounce);display:flex;align-items:center;justify-content:center;font-size:22px}
  .mole.up{bottom:-5px}

  .mcard{aspect-ratio:3/4;border-radius:16px;cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform .5s var(--bounce)}
  .mcard.flipped{transform:rotateY(180deg)}
  .mcard-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:2.3rem;box-shadow:0 4px 12px rgba(42,30,58,.15)}
  .mcard-front{background:linear-gradient(135deg,var(--bubblegum),var(--sky));color:#fff;font-family:'Fredoka';font-size:1.6rem}
  .mcard-back{background:#fff;transform:rotateY(180deg)}

  /* ============ CROSSWORD GRID ============
     De grid zet een --cell variabele die de cel-grootte bepaalt; op desktop
     38 px, op mobiel schaalt-ie omlaag naar wat past binnen de viewport.
  */
  .cw-wrap{display:inline-block;padding:.5rem;background:#FFFAF5;border-radius:18px;max-width:100%}
  /* Donkere achtergrond + 3px padding = duidelijk zichtbare rand om het hele grid heen.
     Sudoku-/binaire-/hundred-puzzels hebben hierdoor automatisch een dikke buitenrand. */
  .cw-grid{display:grid;gap:1px;background:#2A1E3A;padding:3px;border-radius:8px;overflow:hidden;border:2px solid #2A1E3A}
  /* Box-shadow ipv gap zodat scheidingslijnen ook bij kleine cellen scherp zichtbaar blijven. */
  .cw-cell{width:var(--cell,38px);height:var(--cell,38px);background:#FFF6EC;position:relative;display:flex;align-items:center;justify-content:center;scroll-margin-bottom:60vh;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(42,30,58,.55)}
  /* Brand-blokjes ipv pure-zwart voor blank-cellen — past beter bij de
     cream/peach/grape palette van Digipuzzel. */
  .cw-cell.blank{background:linear-gradient(135deg,#FF8C42,#E55A19);cursor:default;box-shadow:inset 0 0 0 1px rgba(42,30,58,.4)}
  .cw-cell.given{background:#FFF1A8}
  /* font-size MOET >=16px om iOS-auto-zoom op focus te voorkomen.
     De cel zelf is hidden-overflow + center, dus letters die net iets te breed
     worden voor kleine cellen worden veilig gecentreerd zonder zoom. */
  .cw-cell input{width:100%;height:100%;border:none;background:transparent;text-align:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:max(16px, calc(var(--cell,38px) * 0.55));color:var(--ink);text-transform:uppercase;outline:none;padding:0;line-height:1}
  .cw-cell{overflow:hidden}
  .cw-cell input:focus{background:#FFE7D3;z-index:2}
  .cw-cell input:disabled{color:#7A4E00;font-weight:800}
  .cw-cell.ok input{background:#D6F6EA;color:#0B4A38}
  .cw-cell.err input{background:#FFE0CB;color:#7A1A2E;animation:shake .3s}
  /* Highlight van het actieve woord + actieve cel — gestuurd door cwFocus()/updateActiveClueBar() */
  .cw-cell.active-word{background:#FFEED4}
  .cw-cell.active-word.given{background:#FFE49B}
  .cw-cell.active-cell input{background:#FFC09A;box-shadow:0 0 0 2px var(--bubblegum) inset;z-index:3}
  /* Dikke scheidingslijnen tussen sudoku-subblokken (3×3, 3×2, etc.)
     We gebruiken echte border-right/border-bottom zodat de streep zichtbaar is
     bovenop de bestaande 2 px grid-gap — niet via box-shadow die in diezelfde
     gap zou verdwijnen. */
  .cw-cell.block-right{border-right:3px solid #2A1E3A}
  .cw-cell.block-bottom{border-bottom:3px solid #2A1E3A}
  /* Doorloper: bars tussen aangrenzende cellen om woord-grenzen aan te geven. */
  .cw-cell.bar-right{box-shadow:inset 0 0 0 1px rgba(42,30,58,.55), inset -3px 0 0 0 #2A1E3A}
  .cw-cell.bar-bottom{box-shadow:inset 0 0 0 1px rgba(42,30,58,.55), inset 0 -3px 0 0 #2A1E3A}
  .cw-cell.bar-right.bar-bottom{box-shadow:inset 0 0 0 1px rgba(42,30,58,.55), inset -3px 0 0 0 #2A1E3A, inset 0 -3px 0 0 #2A1E3A}

  /* === Zweeds raadsel === Clues staan IN het grid (zw-clue cellen), letter-
     cellen bevatten optioneel een pijl-icoon die start + richting markeert.
     Clue-cellen krijgen dezelfde oranje gradient als .cw-cell.blank zodat het
     bij de huisstijl past; tekst-kleur is wit voor contrast. */
  .cw-cell.zw-clue{
    background:linear-gradient(135deg,#FF8C42,#E55A19);
    cursor:default;
    color:#fff;
    font-family:'Fredoka',sans-serif;
    font-size:max(8px, calc(var(--cell,38px) * 0.19));
    line-height:1.05;
    text-align:center;
    padding:2px;
    overflow:hidden;
    align-items:center;
    justify-content:center;
    word-break:break-word;
    hyphens:auto;
    text-shadow:0 1px 0 rgba(122,26,25,.35);
  }
  .cw-cell.zw-clue .zw-clue-text{
    display:block;
    width:100%;
    overflow:hidden;
    font-family:'Fredoka',sans-serif;
    font-weight:700;
  }
  .cw-cell.zw-letter{ position:relative; }
  .cw-cell.zw-letter .zw-arrow{
    position:absolute;
    top:1px;
    right:1px;
    color:#E55A19;
    line-height:0;
    pointer-events:none;
    z-index:1;
  }
  .cw-cell.zw-letter .zw-arrow svg{ display:block; }
  /* Actieve cel + actief woord — oranje accent in plaats van de bestaande
     roze (--bubblegum) zodat het past bij de Zweeds-huisstijl. */
  .cw-cell.zw-letter.active-word{ background:#FFE4C7; }
  .cw-cell.zw-letter.active-cell input{
    background:#FFC09A;
    box-shadow:0 0 0 2px #E55A19 inset;
    z-index:3;
  }
  /* Tijdelijke flash op cellen die nog leeg zijn bij Controleer. */
  .cw-cell.zw-letter.zw-missing{
    animation:zw-missing-pulse 1.2s ease-in-out infinite;
  }
  @keyframes zw-missing-pulse{
    0%,100%{ box-shadow:inset 0 0 0 1px rgba(42,30,58,.55); }
    50%   { box-shadow:inset 0 0 0 3px #E55A19; background:#FFE4C7; }
  }
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
  .cw-clue-num{position:absolute;top:1px;left:3px;font-size:calc(var(--cell,38px) * 0.27);font-weight:800;color:var(--ink-soft);font-family:'Fredoka';pointer-events:none;line-height:1}

  /* ============ ACTIVE-CLUE-BAR ============
     Sticky balk boven het grid die de clue van de actieve cel toont in beide
     richtingen. Mobiel is ie altijd zichtbaar; desktop ook handig naast de lijst.
  */
  .active-clue-bar{
    position:sticky;top:0;z-index:4;background:linear-gradient(135deg,#FFFAF5,#FFE7D3);
    border-radius:14px;padding:.6rem .9rem;margin-bottom:.5rem;
    box-shadow:0 3px 12px rgba(255,140,66,.25);min-height:2.4rem;
    display:flex;flex-direction:column;gap:.15rem;
  }
  .active-clue-bar:empty{display:none}
  .active-clue-primary{font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.3}
  .active-clue-secondary{font-size:.78rem;color:var(--ink-soft);line-height:1.3;opacity:.85}
  .active-clue-bar .dir-arrow{display:inline-block;width:1.2rem;font-weight:800;color:var(--bubblegum)}
  .active-clue-bar .clue-num-tag{display:inline-block;min-width:1.5em;color:var(--bubblegum);font-weight:800;margin-right:.2rem}

  /* Mobiel: de clue-lijst onder/naast het grid is overbodig zodra de bar er is. */
  @media (max-width:640px){
    .puzzle-clues-col{display:none}
    .active-clue-primary{font-size:1rem}
  }

  /* Woordzoeker: woordenlijst als compact horizontaal strip boven het grid. */
  .ws-words-strip{background:#FFFAF5;border:1px solid #FFE7D3;border-radius:10px;padding:.4rem .55rem;max-height:25vh;overflow-y:auto}
  .ws-words-header{font-family:'Fredoka',sans-serif;font-weight:700;font-size:.85rem;color:var(--ink);margin-bottom:.3rem}
  .ws-words-flow{display:flex;flex-wrap:wrap;gap:.3rem}
  @media (max-width:640px){
    .ws-words-strip{max-height:14vh;padding:.3rem .45rem}
    .ws-words-header{font-size:.75rem;margin-bottom:.2rem}
    .ws-word{padding:2px 6px;font-size:.78rem}
  }

  /* Legpuzzel: woordenlijst boven het grid in compacte strip — altijd zichtbaar. */
  .legpuzzel-words{background:#FFFAF5;border:1px solid #FFE7D3;border-radius:10px;padding:.4rem .55rem;max-height:30vh;overflow-y:auto}
  .legpuzzel-words .lp-row{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;padding:.15rem 0}
  .legpuzzel-words .lp-len{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:6px;background:var(--bubblegum);color:#fff;font-weight:800;font-size:.7rem;margin-right:.3rem;flex-shrink:0}
  @media (max-width:640px){
    .legpuzzel-words{max-height:22vh;font-size:.78rem}
  }

  /* ============ HINT REVEAL ANIMATIE ============
     Speelt 1.4s zodra useHint() de class 'hint-reveal' aan een cel hangt.
     Drie lagen tegelijk: cel-pop met glow-ring, kleur-flash op de letter,
     en een ✨-stertje dat omhoog zweeft. Werkt voor elk gridtype omdat alle
     puzzel-renderers door renderGridHtml() lopen. */
  .cw-cell.hint-reveal,.ng-cell.hint-reveal,.fp-cell.hint-reveal,.ck-cell.hint-reveal,.hd-cell.hint-reveal{animation:hintCellPop 1.4s var(--bounce) both;z-index:5;overflow:visible;position:relative}
  .cw-cell.hint-reveal input,.fp-cell.hint-reveal input,.ck-cell.hint-reveal input,.hd-cell.hint-reveal input{animation:hintLetterFlash 1.4s ease-out both}
  .cw-cell.hint-reveal::after,.ng-cell.hint-reveal::after,.fp-cell.hint-reveal::after,.ck-cell.hint-reveal::after,.hd-cell.hint-reveal::after{
    content:"✨";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);font-size:22px;pointer-events:none;
    animation:hintSparkleFloat 1.4s ease-out both;z-index:6;
    filter:drop-shadow(0 2px 4px rgba(255,178,107,.5));
  }
  @keyframes hintCellPop{
    0%  {transform:scale(.55);box-shadow:0 0 0 0 rgba(255,178,107,.85)}
    25% {transform:scale(1.28);box-shadow:0 0 0 14px rgba(255,178,107,.5),0 0 28px 6px rgba(255,140,66,.55)}
    55% {transform:scale(.96);box-shadow:0 0 0 10px rgba(255,178,107,.15),0 0 20px 4px rgba(255,140,66,.25)}
    80% {transform:scale(1.04);box-shadow:0 0 0 4px rgba(255,178,107,0)}
    100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,178,107,0)}
  }
  @keyframes hintLetterFlash{
    0%  {background:linear-gradient(135deg,#FFE38B,#FFB26B);color:#7A4E00;transform:scale(.7)}
    30% {background:linear-gradient(135deg,#FFD93D,#FF8C42);color:#fff;transform:scale(1.15);text-shadow:0 0 8px rgba(255,255,255,.8)}
    70% {background:linear-gradient(135deg,#FFE38B,#FFB26B);color:#5A3A00;transform:scale(1)}
    100%{background:#FFF1A8;color:#7A4E00;transform:scale(1);text-shadow:none}
  }
  @keyframes hintSparkleFloat{
    0%  {opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0deg)}
    20% {opacity:1;transform:translate(-50%,-90%) scale(1.5) rotate(25deg)}
    60% {opacity:1;transform:translate(-50%,-160%) scale(1.1) rotate(-30deg)}
    100%{opacity:0;transform:translate(-50%,-220%) scale(.6) rotate(60deg)}
  }
  /* Reduced motion: behoud de kleur-flash maar laat de pop weg, voor mensen die
     bewegingsgevoelig zijn (en dat dus zelf in OS-instellingen aangeven). */
  @media (prefers-reduced-motion:reduce){
    .cw-cell.hint-reveal,.ng-cell.hint-reveal,.fp-cell.hint-reveal,.ck-cell.hint-reveal,.hd-cell.hint-reveal{animation:none}
    .cw-cell.hint-reveal::after,.ng-cell.hint-reveal::after,.fp-cell.hint-reveal::after,.ck-cell.hint-reveal::after,.hd-cell.hint-reveal::after{animation:none;opacity:0}
  }
  /* Filippine: thema-kolom (verborgen woord) subtiel gemarkeerd; sterker bij oplossing */
  .cw-cell.fil-theme{background:#FFE7D3}
  .cw-cell.fil-theme input{background:transparent}
  .cw-cell.fil-theme input:focus{background:#FFCCE0}
  .cw-cell.fil-theme.ok input{background:#FFB3D4;color:#7A1A4A;font-weight:800}
  /* Woordzoeker: klassiek letterraster — klik eerste en laatste letter, ook diagonaal/omgekeerd */
  .ws-wrap{display:inline-block;padding:.5rem;background:#FFFAF5;border-radius:18px;user-select:none;max-width:100%}
  .ws-grid{display:grid;gap:1px;background:#2A1E3A;padding:3px;border-radius:8px;overflow:hidden;border:2px solid #2A1E3A}
  .ws-cell{width:var(--cell,38px);height:var(--cell,38px);background:#FFF1A8;display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-weight:800;color:#7A4E00;cursor:pointer;transition:transform .1s;position:relative;font-size:calc(var(--cell,38px) * 0.5);box-shadow:inset 0 0 0 1px rgba(42,30,58,.45)}
  .ws-cell:hover{background:#FFE38B;transform:scale(1.05);z-index:2}
  .ws-cell.anchor{outline:3px solid var(--bubblegum);outline-offset:-3px;background:#FFB3D4;color:#5C1A3E;z-index:3}
  .ws-cell.preview{outline:2px dashed var(--bubblegum);outline-offset:-2px;z-index:2}
  .ws-cell.found{cursor:default;color:#2A1E3A}
  .ws-cell.found:hover{transform:none}
  /* Eigen layout zodat de woordenlijst intern scrollt i.p.v. onder de modal-body te verdwijnen. */
  .ws-layout{display:flex;gap:1rem;align-items:stretch;flex:1 1 auto;min-height:0;flex-wrap:nowrap}
  .ws-layout > .ws-grid-col{flex:0 0 auto;align-self:flex-start}
  .ws-layout > .ws-clues-col{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column}
  .ws-words{background:#FFFAF5;padding:1rem;border-radius:18px;overflow-y:auto;min-width:280px;max-width:520px;flex:1 1 auto;min-height:0}
  .ws-words h4{position:sticky;top:0;background:#FFFAF5;padding:.25rem 0 .5rem;z-index:1}
  /* Woordenlijst in een auto-fit grid: meerdere kolommen naast elkaar zodat
     ~30 woorden zonder scrollen passen naast het 13×13 grid. */
  .ws-word-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.3rem .4rem}
  .ws-word{padding:3px 8px;font-size:.82rem;font-weight:700;border-radius:6px;background:#fff;color:var(--ink);letter-spacing:.04em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ws-word.done{text-decoration:line-through;color:#555}
  @media (max-width:900px){
    .ws-layout{flex-wrap:wrap}
    .ws-layout > .ws-clues-col{width:100%;min-height:0}
    .ws-words{max-height:30vh;max-width:none}
    .ws-word-list{grid-template-columns:repeat(auto-fill,minmax(6rem,1fr))}
  }
  /* ws-cell schaalt nu via --cell, geen aparte mobile-override meer nodig */
  /* Filippine: clue-rijen uitgelijnd naast grid-rijen (grid = 38px cell + 2px gap = 40px pitch) */
  .fil-layout{display:flex;gap:1rem;align-items:flex-start;flex:1 1 auto;min-height:0;flex-wrap:nowrap}
  .fil-grid-col{flex:0 0 auto}
  .fil-clues-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding-top:.625rem}
  .fil-clue-row{height:40px;display:flex;align-items:center;gap:.5rem;padding:0 .5rem;font-size:.92rem;border-radius:8px}
  .fil-clue-row:hover{background:#FFF4EA}
  .fil-clue-row b{color:var(--bubblegum);min-width:1.6em;text-align:right;font-weight:800}
  @media (max-width:900px){
    .fil-layout{flex-wrap:wrap}
    .fil-clues-col{padding-top:.25rem;width:100%}
    .fil-clue-row{height:auto;padding:4px 4px}
  }
  @media (max-width:640px){
    /* Active-clue-bar vervangt de lijst onderaan op mobiel — geen scroll meer. */
    .fil-clues-col{display:none}
    .fil-layout{justify-content:center}
  }

  /* library dropzone */
  .dropzone{border:3px dashed #FFC09A;border-radius:24px;padding:2rem;text-align:center;background:#FFFAF5;cursor:pointer;transition:all .2s}
  .dropzone:hover{background:#FFEAF2;border-color:var(--bubblegum)}
  .dropzone.over{background:#FFE7D3;transform:scale(1.02)}

  @media (max-width:640px){
    .blob{filter:blur(50px)}
    .cw-cell input{font-size:.85rem}
    .modal{padding:1rem}
    /* scroll-margin-bottom:60vh op .cw-cell was bedoeld om de cel boven het
       native OS-toetsenbord te houden. Op mobiel onderdrukken we dat keyboard
       (inputmode='none' + custom letter-/numpad), dus die marge bestaat alleen
       nog als landmijn die elke cel-tap omhoog scrollt. Plaatsing NA de base
       .cw-cell-regel zodat de override daadwerkelijk wint qua source-order. */
    .cw-cell{scroll-margin-bottom:0}
  }

  /* ===== Landingspage — stappenbalk (Zo werkt het) ===== */
  .step-num{width:48px;height:48px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.5rem;background:linear-gradient(135deg,var(--bubblegum),#E55A19);color:#fff;box-shadow:0 4px 12px rgba(255,140,66,.4);margin-bottom:.75rem}

  /* ===== Landingspage — boeken-carousel ===== */
  .book-carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 18px;scrollbar-width:thin;scrollbar-color:var(--bubblegum) #FFE7D3}
  .book-carousel::-webkit-scrollbar{height:8px}
  .book-carousel::-webkit-scrollbar-track{background:#FFE7D3;border-radius:999px}
  .book-carousel::-webkit-scrollbar-thumb{background:var(--bubblegum);border-radius:999px}
  .book-carousel .card{flex:0 0 180px;scroll-snap-align:start;padding:12px}
  @media (min-width:768px){ .book-carousel .card{flex-basis:200px} }

  /* ===== Landingspage — puzzeltypes galerij ===== */
  .ptype-tile{background:#fff;border:2px solid #FFE7D3;border-radius:20px;padding:14px 10px;text-align:center;transition:transform .2s var(--bounce),box-shadow .2s;cursor:default;position:relative}
  .ptype-tile:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(255,140,66,.18)}
  .ptype-tile .emo{font-size:2rem;display:block;margin:0 auto .25rem}
  .ptype-tile img.emo{width:56px;height:56px;object-fit:contain}
  .ptype-tile .nm{font-family:'Fredoka',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink)}
  .ptype-tile .tg{position:absolute;top:6px;right:6px;font-size:.6rem;padding:2px 7px;border-radius:999px;background:var(--bubblegum);color:#fff;font-weight:700}
  .ptype-tile .tg.soon{background:#5A4A6A}

  /* ===== Landingspage — abonnementkaarten ===== */
  .plan-card{background:#fff;border-radius:24px;padding:22px;border:3px solid transparent;position:relative;transition:transform .25s var(--bounce),box-shadow .25s}
  .plan-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(255,140,66,.2)}
  .plan-card.popular{border-color:var(--bubblegum);background:linear-gradient(180deg,#FFF6EC 0%,#fff 80%)}
  .plan-card .popbadge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--bubblegum),#E55A19);color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:.8rem;padding:4px 14px;border-radius:999px;box-shadow:0 4px 10px rgba(255,140,66,.4)}