:root{
    --cream:#FFF6EC;--peach:#FFE8D6;--blush:#FFD9B8;
    --bubblegum:#FF8C42;--sky:#7EC8FF;--sunset:#FFB26B;
    /* Donkere knop-oranjes: witte tekst haalt hierop WCAG AA (≥4.5:1);
       op --bubblegum zelf is dat 2.3:1 — die blijft alleen voor decoratie/koppen. */
    --bubblegum-deep:#CC4B00;--bubblegum-deeper:#B34100;
    --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 zet display:inline-flex en wint daarmee van Tailwinds `hidden`
     (styles.css laadt ná tailwind.css). Voor knoppen die op mobiel weg
     moeten (bv. "Inloggen" in de header — die zit daar in het hamburger-
     paneel) is er daarom deze klasse. */
  @media (max-width:639px){ .btn-verberg-mobiel{ display:none !important } }
  /* Spiegelbeeld voor items die alléén op mobiel horen (zelfde reden:
     .nav-pill/.btn zetten display en winnen van Tailwinds sm:hidden). */
  @media (min-width:640px){ .verberg-desktop{ display:none !important } }
  @media (min-width:768px){ .verberg-vanaf-md{ display:none !important } }
  @media (min-width:1280px){ .verberg-vanaf-xl{ display:none !important } }
  .btn-primary{background:linear-gradient(135deg,var(--bubblegum-deep),var(--bubblegum-deeper));color:#fff;box-shadow:0 6px 18px rgba(204,75,0,.4)}
  .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)}

  /* Speelbare dag-sudoku op de /puzzel/sudoku-landingspagina (SSR-grid). */
  .ls-grid{display:grid;grid-template-columns:repeat(9,minmax(30px,46px));justify-content:center;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff;max-width:100%}
  .ls-cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid #e8d9c8;font-size:clamp(.95rem,3.5vw,1.25rem);font-weight:700;color:var(--ink);text-align:center;min-width:0}
  .ls-given{background:#fff}
  .ls-input{background:#fff;color:#B34100;caret-color:#B34100;width:100%;height:100%;border-radius:0;padding:0;appearance:none}
  .ls-input:focus{outline:3px solid var(--sky);outline-offset:-3px;position:relative;z-index:1}
  .ls-wrong{background:#ffe1e1 !important}
  /* Kruiswoord-variant: kolommen via inline style; blokken donker, hokjes-
     nummers klein linksboven in de cel. Deelt .ls-cell/.ls-input met sudoku. */
  .lk-grid{display:grid;justify-content:center;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff;max-width:100%}
  .lk-wrap{position:relative;display:flex;aspect-ratio:1;min-width:0}
  .lk-wrap .ls-input{font-size:clamp(.8rem,2.8vw,1.05rem);text-transform:uppercase}
  .lk-num{position:absolute;top:0;left:2px;font-size:.5rem;line-height:1.4;font-style:normal;font-weight:700;color:#8a7a62;z-index:1;pointer-events:none}
  .lk-block{background:var(--ink);border:1px solid var(--ink);aspect-ratio:1;min-width:0}

  .nav-pill{position:relative;min-height:44px;padding:.55rem .85rem;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-deep),var(--bubblegum-deeper));color:#fff;box-shadow:0 4px 14px rgba(204,75,0,.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,
  .chip .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)}
  }

  /* Spelregels-tekst: grotere base font dan default text-sm (.875rem) voor 50+
     leesbaarheid op tablet/armlengte. text-xs (.75rem) → .spelregels-note (.875rem).
     Geldt alleen binnen .spelregels-uitleg en de spelregels-blokken zelf. */
  .spelregels-text{font-size:1rem;line-height:1.55}
  .spelregels-note{font-size:.875rem;line-height:1.5}
  .spelregels-uitleg p{line-height:1.55}
  @media (max-width:640px){
    .spelregels-text{font-size:.95rem}
  }

  /* Profiel sub-tabs (Dashboard / Mijn gegevens / Mijn vorderingen).
     Segmented-control stijl: alle pills in één gemeenschappelijke strip zodat
     duidelijk is dat ze bij elkaar horen. Min-height 48px voor 50+ tap-targets. */
  .profile-tabs{display:flex;gap:.3rem;padding:.4rem;background:#FFF4EA;border-radius:999px;flex-wrap:wrap;border:1px solid #FFE7D3}
  .profile-tab{flex:1 1 0;min-width:140px;min-height:48px;padding:.65rem 1rem;border-radius:999px;border:none;background:transparent;cursor:pointer;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:all .25s var(--bounce);white-space:nowrap}
  .profile-tab:hover{color:var(--ink);background:rgba(255,255,255,.6)}
  .profile-tab.active{background:linear-gradient(135deg,var(--bubblegum-deep),var(--bubblegum-deeper));color:#fff;box-shadow:0 4px 14px rgba(204,75,0,.4)}
  @media (max-width:640px){
    .profile-tab{font-size:.95rem;min-width:0;padding:.65rem .5rem;gap:.35rem;flex:1 1 45%}
  }

  .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)}

  /* Gast-punten-HUD (#entry-hud, entry-points.js) is een fixed badge in de
     rechterbovenhoek. Fullscreen-puzzels verbergen hun modal-head en tekenen
     het grid edge-to-edge tot bovenaan, waardoor de badge op elk smal scherm
     (telefoon/tablet) OVER de bovenste puzzelcellen valt. body.puzzle-scroll-lock
     staat exact aan zolang er een puzzel-modal open is (syncBodyScrollLockForPuzzle
     in render.js) — verberg de badge dan; hij komt vanzelf terug bij sluiten. */
  body.puzzle-scroll-lock #entry-hud{display:none}

  /* 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,
  .modal.fullscreen.page-style:has(.fs-wrap) .modal-head,
  .modal.fullscreen.page-style:has(.cr-wrap) .modal-head,
  .modal.fullscreen.page-style:has(.wk-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;
    scrollbar-width:thin;scrollbar-color:#E55A19 #FFE7D3;
  }
  .modal.fullscreen.page-style .ws-words::-webkit-scrollbar{-webkit-appearance:none;width:9px}
  .modal.fullscreen.page-style .ws-words::-webkit-scrollbar-track{background:#FFE7D3;border-radius:9px}
  .modal.fullscreen.page-style .ws-words::-webkit-scrollbar-thumb{background:#E55A19;border-radius:9px;border:2px solid #FFE7D3}
  .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:#FFF0E2;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-uitleg: korte 2-staps instructie boven de woord-chips, zodat
     spelers meteen zien hoe ze woorden in het grid plaatsen. */
  .legpuzzel-help{
    flex:0 0 auto;width:100%;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:.4rem .6rem;margin-bottom:.4rem;padding:.5rem .6rem;
    background:#FFF6EE;border:1px solid #FFE7D3;border-radius:12px;
    font-family:'Fredoka',sans-serif;font-size:.85rem;color:var(--ink);
  }
  .legpuzzel-help .lp-step{display:inline-flex;align-items:center;gap:.35rem}
  .legpuzzel-help .lp-step-num{
    display:inline-flex;align-items:center;justify-content:center;
    width:1.25rem;height:1.25rem;border-radius:50%;
    background:linear-gradient(135deg,#FFC09A,#FF8C42);
    color:#fff;font-weight:700;font-size:.8rem;flex:0 0 auto;
  }
  .legpuzzel-help .lp-step-arrow{color:#FF8C42;font-weight:700}

  /* 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: blenden met de gewone cellen (geen kleurvlak),
     alleen een zwart startgetal. iOS Safari kleurt disabled inputs standaard
     grijs via -webkit-text-fill-color + verlaagde opacity, ongeacht `color` —
     daarom die twee expliciet meezetten, anders ogen de startgetallen vaalgrijs
     op de iPhone. */
  .numeric-page-body .cw-cell.given{background:#FFF6EC !important}
  .numeric-page-body .cw-cell.given input:disabled{color:#000 !important;-webkit-text-fill-color:#000 !important;opacity:1 !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}
    .legpuzzel-help{font-size:.78rem;gap:.3rem .45rem;padding:.4rem .5rem}
    .legpuzzel-help .lp-step-arrow{display:none}
  }

  .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 — tonen op touch-apparaten
     (telefoons + tablets) in landschap. Cellen passen daar niet meer
     betekenisvol en de gebruiker moet rechtop draaien voor de beste ervaring. */
  .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)}}
  /* (pointer:coarse) filtert desktops/laptops uit — alleen touch-primary
     devices (telefoons + tablets) krijgen de melding in landschap. */
  @media (pointer:coarse) and (orientation:landscape){
    .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 touch-apparaten (telefoons + tablets)
     zodat alle knoppen in 1 rij passen zonder horizontale scroll.
     Bevestigings-popup vangt de zware acties op (zie mobileActionConfirm in
     render.js). Desktop (pointer:fine): .mobile-emoji-only doet niets — de
     mediaquery matcht niet en knoppen blijven volledig tekst. */
  @media (pointer:coarse){
    .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)}

  /* Duels (plan C) */
  .duel-tegel-icoon{font-size:3rem;line-height:1;text-align:center}
  .duel-typen{grid-template-columns:repeat(2,1fr)}
  .duel-type{min-height:120px;border:3px solid transparent;text-align:left}
  .duel-type-actief{border-color:var(--sunset);box-shadow:0 0 0 4px rgba(255,140,66,.25)}
  .duel-rij{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem 0;border-top:1px solid #FFE7CB}
  .duel-rij:first-of-type{border-top:none}
  .duel-code{font-family:'Fredoka',sans-serif;font-size:2.4rem;letter-spacing:.35em;font-weight:700;margin:.75rem 0;color:var(--ink)}
  .duel-code-inp{text-transform:uppercase;letter-spacing:.3em;font-size:1.4rem;text-align:center;max-width:14rem;margin:0 auto}
  .duel-strip{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.5rem .9rem;margin:0 .5rem .25rem;border-radius:14px;background:linear-gradient(135deg,#FFF3E4,#FFE6D0);border:2px solid #FFD9B8;font-size:.9rem}
  .duel-strip-kant{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}
  .duel-strip-tegen{align-items:flex-end;text-align:right}
  .duel-strip-label{font-size:.72rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .duel-strip b{font-family:'Fredoka',sans-serif;font-size:1.25rem}
  .duel-strip-hints{font-size:.72rem;color:#7A4E00}
  .duel-balk{width:100%;max-width:160px;height:10px;border-radius:999px;background:#fff;overflow:hidden;border:1px solid #FFD9B8}
  .duel-balk-vul{height:100%;background:linear-gradient(90deg,var(--sunset),var(--bubblegum));transition:width .45s ease}
  .duel-tabel{width:100%;margin:.75rem 0;border-collapse:collapse}
  .duel-tabel td{padding:.4rem .5rem;border-top:1px solid #FFE7CB}
  .duel-tabel td:first-child{font-weight:700}
  .duel-uitslag-kop{font-family:'Fredoka',sans-serif;font-size:1.8rem;font-weight:700;text-align:center}

  .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}

  /* Prijskaarten in de gast-shop (instap-item + Premium-prijzen). Zelfde
     hover-bounce-patroon als .arena-tile hierboven, maar subtieler — dit
     zijn geen klikbare tegels naar een puzzel, alleen een lichte "levendige"
     aanraking. */
  .shop-price-card{transition:transform .3s var(--bounce),box-shadow .3s var(--bounce)}
  .shop-price-card:hover{transform:scale(1.03);box-shadow:0 14px 30px rgba(42,30,58,.14)}

  /* ============ ARENA TILES (redesign) ============ */
  /* Compacte tegels (aug 2026): min 200px zodat er op een breed scherm 5
     naast elkaar passen — minder scrollen. Hover tilt de tegel boven de rest uit. */
  .arena-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
  .arena-tile{
    position:relative;overflow:hidden;padding:1.1rem;border-radius:22px;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:.5rem;min-height:180px;
  }
  .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(-6px) rotate(-.4deg) scale(1.07);box-shadow:0 22px 40px rgba(255,140,66,.25);z-index:4}
  .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:104px;max-width:80%;object-fit:contain}
  .arena-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.05rem;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}
  /* Admin-spelregels: base-punten die door drie niveau-overrides worden
     overruled — bewerkbaar, maar zichtbaar buiten werking. */
  .inp.gr-base-ongebruikt{opacity:.5;background:#F4F1F7;border-style:dashed}
  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)}
  /* Gegeven (cadeau) letters blenden met de gewone cellen: geen geel kader,
     gewoon een donkere letter zoals de rest. (Sudoku houdt zijn eigen witte
     given-stijl via de .numeric-page-body-override hieronder.) */
  .cw-cell.given{background:#FFF6EC}
  /* 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:var(--ink);-webkit-text-fill-color:var(--ink);opacity:1;font-weight:800}
  /* Gegeven letter: klikbaar (voor woordselectie/legpuzzel-plaatsing) maar niet
     wijzigbaar. De disabled input negeert pointer-events zodat de tik naar de
     cel-div gaat (die roept cwClickCell aan); de letter blijft vast. */
  .cw-cell.given input{pointer-events:none}
  .cw-cell.ok input{background:#D6F6EA;color:#0B4A38}
  .cw-cell.err input{background:#FFE0CB;color:#7A1A2E;animation:shake .3s}
  /* Foute-controle: door de klant ingevuld-maar-fout vakje. Werkt op zowel
     input-cellen als tekst-cellen (legpuzzel/cipher), vandaar op het element zelf
     én op een eventuele input erin. Wordt gewist bij aanpassen/nieuwe controle. */
  .cell-wrong, .cell-wrong input { background:#FFE0CB !important; color:#7A1A2E !important; animation:shake .3s; }
  /* Live-goed (demo): generieke groene markering, werkt op elke cel/inhoud
     (fp-/hd-/ck-/cw-cel). Alleen tijdens typen in de demo. */
  .cell-ok, .cell-ok input { background:#D6F6EA !important; color:#0B4A38 !important; }
  /* Highlight van het actieve woord + actieve cel — gestuurd door cwFocus()/updateActiveClueBar() */
  .cw-cell.active-word{background:#FFEED4}
  .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}
  /* Suguru: dikke rand tussen cellen die in verschillende cages zitten.
     4px donkerpaars zodat cage-grenzen er duidelijk uitspringen tegenover de
     1px standaard-celranden. Inset box-shadow — een gewone border-right werkt
     niet betrouwbaar bij display:grid omdat hij door de vaste kolombreedte
     geclipped of bedekt kan raken. */
  .cw-cell.cage-right{box-shadow:inset 0 0 0 1px rgba(42,30,58,.25), inset -4px 0 0 0 var(--ink)}
  .cw-cell.cage-bottom{box-shadow:inset 0 0 0 1px rgba(42,30,58,.25), inset 0 -4px 0 0 var(--ink)}
  .cw-cell.cage-right.cage-bottom{box-shadow:inset 0 0 0 1px rgba(42,30,58,.25), inset -4px 0 0 0 var(--ink), inset 0 -4px 0 0 var(--ink)}

  /* Suguru: elke cage een eigen pastel-tint via greedy graph-coloring
     (aangrenzende cages krijgen verschillende kleur-indexen). Tinten zijn
     gedempte versies van de Digipuzzel huisstijl (sky/mint/sunset/grape/
     blush/sun). !important zodat ze óók de algemene .numeric-page-body
     .cw-cell.given{background:#fff !important}-regel overschrijven — anders
     zou een given-cel wit (of erger: transparent → zwart) worden. */
  .numeric-page-body[data-puzzle-type="suguru"] .cw-cell.cage-color-0{background:#D9E9FF !important}  /* sky-pastel  */
  .numeric-page-body[data-puzzle-type="suguru"] .cw-cell.cage-color-1{background:#D5F3E4 !important}  /* mint-pastel */
  .numeric-page-body[data-puzzle-type="suguru"] .cw-cell.cage-color-2{background:#FFE0C8 !important}  /* sunset-pastel */
  .numeric-page-body[data-puzzle-type="suguru"] .cw-cell.cage-color-3{background:#EBE0FF !important}  /* grape-pastel */
  .numeric-page-body[data-puzzle-type="suguru"] .cw-cell.cage-color-4{background:#FFD9D9 !important}  /* blush-pastel */
  .numeric-page-body[data-puzzle-type="suguru"] .cw-cell.cage-color-5{background:#FFF1B8 !important}  /* sun-pastel  */
  /* Suguru: startcijfer benadrukt via donkere ink + vetgedrukt; cage-kleur
     loopt onder de cel door dus geen apart wit blok. Inputs hebben default
     background:transparent — niets extra nodig. */
  .numeric-page-body[data-puzzle-type="suguru"] .cw-cell.given input:disabled{color:var(--ink) !important;font-weight:900}
  /* Suguru: cage-grootte-label ("1-N") in top-left van elke cage. Volgt
     Tectonic-conventie zodat de speler direct ziet uit welke cijfers de
     cage bestaat. */
  .numeric-page-body[data-puzzle-type="suguru"] .cw-clue-num{
    font-size:.62rem;font-weight:700;color:var(--ink-soft);opacity:.7;
    top:2px;left:3px;letter-spacing:-.02em;
  }

  /* === 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.
     Het stertje zelf wordt via spawnHintSparkle() als position:fixed overlay
     in <body> gerenderd (NIET via ::after) — anders kapt .cw-grid/.fp-wrap/
     .modal-body.puzzle (overflow:hidden) hem af op kleine mobiele cellen. */
  .cw-cell.hint-reveal,.ng-cell.hint-reveal,.fp-cell.hint-reveal,.ck-cell.hint-reveal,.hd-cell.hint-reveal,.fs-cell.hint-reveal,.cr-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,.fs-cell.hint-reveal input{animation:hintLetterFlash 1.4s ease-out both}
  .hint-sparkle-overlay{
    position:absolute;pointer-events:none;z-index:9999;
    font-size:22px;
    transform:translate(-50%,-50%);
    animation:hintSparkleFloat 1.4s ease-out both;
    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,.fs-cell.hint-reveal,.cr-cell.hint-reveal{animation:none}
    .hint-sparkle-overlay{animation:none;opacity:0}
  }

  /* Demo "vastgelopen?"-nudge: hint-knop gloeit + tekstballon erboven. Wordt
     door demoStuckTick aan/uit gezet; puur cosmetisch. */
  .demo-hint-glow{animation:demoHintGlow 1.4s ease-in-out infinite}
  @keyframes demoHintGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(255,140,66,.55)}
    50%    {box-shadow:0 0 0 9px rgba(255,140,66,0)}
  }
  .demo-hint-bubble{
    position:absolute;transform:translate(-50%,-118%);
    background:#2A1E3A;color:#fff;font-size:.8rem;font-weight:700;line-height:1.2;
    padding:7px 11px;border-radius:12px;white-space:nowrap;pointer-events:none;
    z-index:60;box-shadow:0 6px 18px rgba(42,30,58,.35);animation:demoBubbleIn .28s ease both;
  }
  .demo-hint-bubble::after{
    content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);
    border:6px solid transparent;border-top-color:#2A1E3A;
  }
  @keyframes demoBubbleIn{from{opacity:0;transform:translate(-50%,-98%)}to{opacity:1;transform:translate(-50%,-118%)}}
  @media (prefers-reduced-motion:reduce){
    .demo-hint-glow{animation:none;box-shadow:0 0 0 3px rgba(255,140,66,.5)}
    .demo-hint-bubble,.coach-bubble{animation:none}
  }
  /* Knoppen-tour (coach marks) bij de eerste puzzel — zelfde look als de
     demo-nudge-ballon, maar verplaatst zich snel langs de actie-knoppen. */
  .coach-bubble{
    position:absolute;transform:translate(-50%,-118%);
    background:#2A1E3A;color:#fff;font-size:.8rem;font-weight:700;line-height:1.2;
    padding:7px 11px;border-radius:12px;white-space:nowrap;pointer-events:none;
    z-index:60;box-shadow:0 6px 18px rgba(42,30,58,.35);animation:demoBubbleIn .28s ease both;
  }
  .coach-bubble::after{
    content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);
    border:6px solid transparent;border-top-color:#2A1E3A;
  }
  /* 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%;touch-action:none;overscroll-behavior:contain}
  /* touch-action:none ook op het raster (niet alleen de losse vakjes): een
     veeg glijdt over de 1px-tussenruimtes en de 3px-rand, en juist daar zou
     iOS anders de omlaag-veeg als pull-to-refresh oppakken. */
  .ws-grid{display:grid;gap:1px;background:#2A1E3A;padding:3px;border-radius:8px;overflow:hidden;border:2px solid #2A1E3A;touch-action:none;overscroll-behavior:contain}
  /* touch-action:none + user-select:none maken vegen mogelijk: zonder deze
     scrollt de pagina mee met de veeg en selecteert de browser letters. */
  .ws-cell{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;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;scrollbar-width:thin;scrollbar-color:#E55A19 #FFE7D3}
  .ws-words h4{position:sticky;top:0;background:#FFFAF5;padding:.25rem 0 .5rem;z-index:1}
  /* Scrollbar altijd zichtbaar (ook op mobiel/iOS, waar 'ie standaard pas
     verschijnt tijdens scrollen) zodat de klant ziet dat er meer woorden onder
     staan. -webkit-appearance:none dwingt iOS Safari/Chrome de balk te tonen. */
  .ws-words::-webkit-scrollbar{-webkit-appearance:none;width:9px}
  .ws-words::-webkit-scrollbar-track{background:#FFE7D3;border-radius:9px}
  .ws-words::-webkit-scrollbar-thumb{background:#E55A19;border-radius:9px;border:2px solid #FFE7D3}
  /* 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:#FFF0E2;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} }

  /* ===== Vliegend puzzelstukje + cart-pop bij toevoegen aan winkelwagen ===== */
  @keyframes cartPop{0%{transform:scale(1)}30%{transform:scale(1.3)}60%{transform:scale(.92)}100%{transform:scale(1)}}
  .cart-pop{animation:cartPop .45s ease-out}

  /* ===== Landingspage — rustige marquee (auto-scroll van rechts naar links) ===== */
  .marquee{position:relative;overflow:hidden;padding:8px 0 18px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}
  .marquee-track{display:flex;gap:14px;width:max-content;animation:marqueeScroll 60s linear infinite;will-change:transform}
  .marquee-track > .card{flex:0 0 180px;padding:12px}
  @media (min-width:768px){ .marquee-track > .card{flex-basis:200px} }
  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track{animation-play-state:paused}
  @keyframes marqueeScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  @media (prefers-reduced-motion:reduce){
    .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
    .marquee-track{animation:none;width:auto}
  }
  /* Touch-only override (telefoon/tablet zonder muis): geen auto-animatie maar
     native swipe-scroll. Reden: :hover blijft plakken na een tik (animatie stopt
     midden in een tegel = "halve boek") en de mask-fade van 32px hapt op smalle
     viewports een halve tegel weg. Devices met muis/trackpad krijgen ongewijzigd
     de oorspronkelijke marquee — zo blijft desktop exact zoals hij was. */
  @media (hover:none){
    .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
    .marquee-track{animation:none}
    .marquee-track > .card{scroll-snap-align:start}
  }

  /* ===== 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)}

/* ===== Hero-woordzoeker (homepage) ===== */
.hero-ws{
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start;
  justify-content:center; max-width:520px; margin:0 auto;
}
.hw-grid{
  display:grid;
  grid-template-columns:repeat(var(--hw-size,8), minmax(0,1fr));
  gap:3px; background:#fff; padding:8px; border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.hw-cell{
  /* 40px tap-target (was 34px) — mis-taps bij 50+-doelgroep, audit juli 2026. */
  width:40px; height:40px; border:0; border-radius:7px;
  background:#FFF6EC; color:var(--ink); font-weight:700; font-size:1rem;
  cursor:pointer; user-select:none; touch-action:manipulation;
  display:flex; align-items:center; justify-content:center;
}
.hw-cell:hover{ background:#FFE9CF; }
.hw-cell.hw-start{ background:var(--bubblegum); color:#fff; }
.hw-cell.hw-found{ background:#5AD8A6; color:#fff; }
.hw-words{ list-style:none; padding:0; margin:0; text-align:left; min-width:120px; }
.hw-word{ font-weight:700; color:var(--ink-soft); padding:2px 0; }
.hw-word-found{ text-decoration:line-through; color:#5AD8A6; }
@media (max-width:380px){ .hw-cell{ width:38px; height:38px; font-size:.95rem; } }

.hw-overlay{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center;
  justify-content:center; padding:20px; background:rgba(0,0,0,.45);
}
.hw-popup{
  background:#fff; border-radius:24px; padding:28px 24px; max-width:420px;
  width:100%; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.25);
}
@keyframes hwFall{
  to{ transform:translateY(105vh) rotate(540deg); opacity:0; }
}

/* Demo-wissel keuze-raster — 15 puzzeltype-tegels in de overlay. */
.demo-switch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:.6rem;
  padding:.25rem 0;
}
.demo-switch-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  padding:.7rem .4rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
  font:inherit;
}
.demo-switch-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.16);
}
.demo-switch-tile.is-active{
  border-color:var(--mint, #8EEAC8);
  box-shadow:0 0 0 2px var(--mint, #8EEAC8) inset;
}
.demo-switch-tile .dst-emoji{ font-size:1.7rem; line-height:1; }
.demo-switch-tile .dst-emoji img{ width:34px; height:34px; }
.demo-switch-tile .dst-name{ font-size:.82rem; font-weight:600; text-align:center; }
.demo-switch-tile .dst-now{ font-size:.68rem; color:var(--ink-soft, #5A4A6A); }

/* ===== Uitleg-filmpje (onboarding) ===== */
.ob-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; max-width:560px; margin:0 auto; padding:8px 4px 24px; }
.ob-progress{ display:flex; gap:6px; width:100%; max-width:360px; }
.ob-seg{ flex:1; height:5px; border-radius:99px; background:rgba(0,0,0,.12); transition:background .3s; }
.ob-seg.done{ background:var(--bubblegum, #ff5fa2); }
.ob-seg.active{ background:var(--bubblegum, #ff5fa2); opacity:.85; }
.ob-stage{ display:flex; flex-direction:column; align-items:center; gap:14px; min-height:240px; justify-content:center; }
.ob-illus{ width:100%; height:210px; display:flex; align-items:center; justify-content:center; }
.ob-title{ font-size:1.9rem; font-weight:800; }
.ob-body{ font-size:1.05rem; color:var(--ink-soft, #555); line-height:1.5; }
.ob-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.ob-ctrl{ min-width:48px; }
.ob-cta{ font-weight:800; }
.ob-skip{ font-size:.85rem; opacity:.7; }

.ob-scene{ position:relative; display:flex; align-items:center; justify-content:center; }

/* Mini puzzel-tegel (lijkt op een arena-kaart) */
.ob-ptile{ width:86px; border-radius:16px; padding:9px; border:2px solid #fff; box-shadow:0 10px 22px rgba(42,30,58,.13); display:flex; flex-direction:column; gap:7px; opacity:0; animation:obTileIn .5s var(--bounce, ease-out) forwards; animation-delay:calc(var(--i,0)*.12s); }
.ob-ptile-top{ display:flex; align-items:center; gap:4px; min-width:0; }
.ob-ptile-ic{ font-size:.85rem; line-height:1; }
.ob-ptile-name{ font-size:.6rem; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ob-ptile-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.ob-ptile-grid i{ aspect-ratio:1; background:rgba(255,255,255,.75); border:1px solid rgba(42,30,58,.12); border-radius:4px; }

/* Slide 1 — welkom: cluster van tegels die inpoppen */
.ob-welkom{ display:flex; flex-wrap:wrap; gap:10px; max-width:200px; }
/* Slide 2 — arena: rij tegels + pill */
.ob-arena{ flex-direction:column; }
.ob-pill{ display:inline-block; padding:4px 12px; border-radius:999px; background:var(--bubblegum); color:#fff; font-weight:800; font-size:.72rem; margin-bottom:12px; box-shadow:0 4px 12px rgba(255,140,66,.4); }
.ob-row{ display:flex; gap:10px; }

/* Slide 3 — punten & streak */
.ob-punten{ flex-direction:column; gap:12px; }
.ob-chip{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px; font-weight:800; font-size:1rem; background:#fff; box-shadow:0 6px 16px rgba(42,30,58,.12); }
.ob-chip-pt{ color:var(--ink); animation:obPop .5s var(--bounce, ease-out) both; }
.ob-chip-pt .ob-count{ color:var(--bubblegum); }
.ob-chip-streak{ color:#E55A19; background:linear-gradient(135deg,#fff,#FFE6D0); animation:obPulse 1.6s ease-in-out infinite; }
.ob-plus{ position:absolute; top:-2px; right:24%; color:#2BB583; font-weight:900; font-size:1.15rem; animation:obFloatUp 1.9s ease-out infinite; }
.ob-bar{ width:170px; height:9px; border-radius:999px; background:rgba(42,30,58,.1); overflow:hidden; }
.ob-bar>span{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--bubblegum),var(--sunset),var(--sky)); animation:obFill 1.6s var(--bounce, ease-out) forwards .3s; }

/* Slide 4 — hint */
.ob-hint{ flex-direction:column; gap:16px; }
.ob-hgrid{ display:grid; grid-template-columns:repeat(3,42px); grid-auto-rows:42px; gap:6px; }
.ob-hgrid i{ display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:1.15rem; color:var(--ink); background:#fff; border:2px solid #FFE7D3; border-radius:8px; }
.ob-hgrid i.ob-reveal{ color:#fff; background:linear-gradient(135deg,var(--bubblegum),#E55A19); border-color:transparent; transform:scale(0); animation:obReveal .5s var(--bounce, ease-out) forwards 1s; }
.ob-hintbtn{ padding:8px 18px; border-radius:999px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--bubblegum),#E55A19); box-shadow:0 6px 18px rgba(255,140,66,.45); animation:obPulse 1.4s ease-in-out infinite; }

/* Slide 5 — shop */
.ob-shopcard{ width:160px; border-radius:18px; padding:14px; text-align:center; border:2px solid #fff; box-shadow:0 12px 26px rgba(42,30,58,.14); animation:obPop .5s var(--bounce, ease-out) both; }
.ob-gift{ font-size:48px; line-height:1; animation:obBob 2s ease-in-out infinite; }
.ob-shopname{ font-weight:800; margin:8px 0; color:var(--ink); }
.ob-chip-cost{ background:linear-gradient(135deg,var(--bubblegum),#E55A19); color:#fff; font-size:.9rem; }

/* Slide 6 — extra's */
.ob-extras{ gap:10px; align-items:flex-end; }
.ob-pack{ width:88px; display:flex; flex-direction:column; align-items:center; gap:4px; background:#fff; border:2px solid #FFE7D3; border-radius:14px; padding:11px 8px; box-shadow:0 8px 18px rgba(42,30,58,.1); opacity:0; animation:obTileIn .5s var(--bounce, ease-out) forwards; animation-delay:calc(var(--i,0)*.14s); }
.ob-pack-ic{ font-size:28px; line-height:1; }
.ob-pack span{ font-size:.68rem; font-weight:700; color:var(--ink-soft); text-align:center; }
.ob-pack b{ font-size:.74rem; color:var(--bubblegum); }

/* Slide 7 — proef */
.ob-ring{ width:140px; height:140px; border-radius:50%; border:8px solid #FFE7D3; border-top-color:var(--bubblegum); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 26px rgba(255,140,66,.25); animation:obSpinIn .9s var(--bounce, ease-out) both; }
.ob-ring-in{ text-align:center; }
.ob-ring-in b{ display:block; font-family:'Fredoka',sans-serif; font-size:2.7rem; line-height:1; color:var(--bubblegum); }
.ob-ring-in span{ font-size:.72rem; font-weight:800; color:var(--ink-soft); }

/* Slide 8 — gratis meespelen (slotslide gratis-klant) */
.ob-gratis{ flex-direction:column; gap:14px; }
.ob-chip-premium{ color:#E55A19; background:linear-gradient(135deg,#fff,#FFE6D0); font-size:.92rem; animation:obPulse 1.6s ease-in-out infinite; }

/* Sparkles */
.ob-spark{ position:absolute; font-size:18px; pointer-events:none; animation:obTwinkle 1.6s ease-in-out infinite; }
.ob-spark.s1{ top:4px; left:14%; }
.ob-spark.s2{ bottom:6px; right:14%; animation-delay:.6s; }

@keyframes obPop{ 0%{ transform:scale(.4); opacity:0 } 70%{ transform:scale(1.12) } 100%{ transform:scale(1); opacity:1 } }
@keyframes obPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.08) } }
@keyframes obTileIn{ from{ opacity:0; transform:translateY(16px) scale(.9) } to{ opacity:1; transform:translateY(0) scale(1) } }
@keyframes obReveal{ to{ transform:scale(1) } }
@keyframes obFill{ to{ width:75% } }
@keyframes obFloatUp{ 0%{ opacity:0; transform:translateY(8px) } 25%{ opacity:1 } 100%{ opacity:0; transform:translateY(-22px) } }
@keyframes obBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@keyframes obTwinkle{ 0%,100%{ opacity:.2; transform:scale(.7) } 50%{ opacity:1; transform:scale(1.15) } }
@keyframes obSpinIn{ from{ opacity:0; transform:rotate(-120deg) scale(.7) } to{ opacity:1; transform:rotate(0) scale(1) } }

@media (max-width:480px){
  .ob-title{ font-size:1.5rem; }
  .ob-stage{ min-height:200px; }
  .ob-illus{ height:190px; transform:scale(.92); }
}

/* ===== Mobiele tabbalk klant-app (tabbar.js) =====
   Fixed onderin op telefoons; vanaf 768px verborgen (desktop houdt de
   pill-nav in de header). safe-area-inset voor de iPhone-thuisbalk —
   viewport-fit=cover staat al in de meta-viewport van index.html. */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:40}
.tabbar-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid #FFE4CC;padding:6px 8px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.06)}
.tabbar-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;border:0;background:none;border-radius:14px;font-family:'Fredoka',sans-serif;font-weight:700;color:var(--ink-soft);min-height:52px;cursor:pointer}
.tabbar-tab.active{color:var(--bubblegum-deep);background:#FFF4EA}
.tabbar-ico{position:relative;display:inline-flex}
.tabbar-img{width:24px;height:24px;object-fit:contain;font-size:22px;line-height:24px;display:inline-flex;align-items:center;justify-content:center}
.tabbar-lbl{font-size:.72rem}
.tabbar-badge{position:absolute;top:-6px;right:-10px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:linear-gradient(135deg,#E55A19,#FF8C42);color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff}
.tabbar-more{position:absolute;bottom:100%;left:8px;right:8px;margin-bottom:8px;background:#fff;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:8px;display:flex;flex-direction:column;gap:2px}
.tabbar-more-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border:0;background:none;border-radius:14px;font-family:'Fredoka',sans-serif;font-weight:700;color:var(--ink);font-size:1rem;cursor:pointer;text-align:left}
.tabbar-more-item.active{background:#FFF4EA;color:var(--bubblegum-deep)}
.tabbar-more-item .tabbar-img{width:22px;height:22px}
@media (min-width:768px){
  .tabbar{display:none}
}
@media (max-width:767.98px){
  /* extra bodem-ruimte zodat content niet achter de balk verdwijnt
     (wint van Tailwinds .pb-20 door hogere specificiteit) */
  main.heeft-tabbalk{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}
}

/* ===== Radio-mini-speler Premium (radio.js) =====
   Zwevende knop rechtsonder; op mobiel boven de tabbalk. Het paneel klapt
   boven de knop open. Audio-element hangt aan <body> (buiten #app). */
.radio-wrap{position:fixed;right:16px;bottom:24px;z-index:39;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
@media (max-width:767.98px){
  .radio-wrap{bottom:calc(6.5rem + env(safe-area-inset-bottom))}
}
.radio-fab{order:2;width:52px;height:52px;border-radius:50%;border:2px solid #2D2440;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;cursor:pointer}
.radio-fab:hover{transform:scale(1.06)}
.radio-fab.radio-speelt{background:#FFF4EA;animation:radioPuls 2s ease-in-out infinite}
@keyframes radioPuls{
  0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.18)}
  50%{box-shadow:0 6px 22px rgba(255,140,66,.55)}
}
.radio-paneel{order:1;width:min(280px,calc(100vw - 32px));background:#fff;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:14px;font-family:'Fredoka',sans-serif}
.radio-kop{display:flex;align-items:center;gap:8px;font-weight:700;color:#3B1E6B;margin-bottom:8px}
.radio-sluit{margin-left:auto;border:0;background:none;font-size:1rem;color:var(--ink-soft);cursor:pointer;padding:4px}
.radio-uitleg{font-size:.9rem;color:var(--ink-soft)}
.radio-zenders{display:flex;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto}
.radio-zender{text-align:left;border:0;background:none;border-radius:12px;padding:9px 12px;font-family:'Fredoka',sans-serif;font-weight:600;color:var(--ink);cursor:pointer}
.radio-zender:hover{background:#FFF4EA}
.radio-zender.active{background:#FFF4EA;color:var(--bubblegum-deep)}
.radio-controls{display:flex;gap:8px;margin-top:10px}
.radio-vol{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.85rem;color:var(--ink-soft)}
.radio-vol input[type=range]{flex:1;accent-color:#FF8C42}

/* ===== Prijsrad (wheel.js) =====
   Zwevende knop direct boven de radio-fab (.radio-wrap hierboven). Op
   mobiel schuift .radio-wrap omhoog voor de tabbalk (bottom:6.5rem i.p.v.
   24px, een verschil van +5rem) — dezelfde +5rem passen we hier toe zodat
   de rad-fab op elk schermformaat boven de radioknop blijft staan. */
.rad-fab-wrap { position: fixed; right: 1rem; bottom: 8.5rem; z-index: 44; }
@media (max-width:767.98px){
  .rad-fab-wrap { bottom: calc(13.5rem + env(safe-area-inset-bottom)); }
}
.rad-fab {
  position: relative; width: 52px; height: 52px; border-radius: 9999px;
  background: #fff; border: 2px solid #e5e7eb; box-shadow: 0 4px 14px rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.rad-stip {
  position: absolute; top: -2px; right: -2px; width: 14px; height: 14px;
  border-radius: 9999px; background: #ef4444; border: 2px solid #fff;
}
.rad-overlay {
  position: fixed; inset: 0; z-index: 70; display: none;
  align-items: center; justify-content: center; background: rgba(15,23,42,.55);
}
.rad-kaart {
  background: #fff; border-radius: 1rem; padding: 1.25rem;
  width: min(92vw, 24rem); text-align: center; position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.rad-kop { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: .5rem; }
.rad-sluit { margin-left: auto; background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #64748b; }
.rad-wijzer {
  width: 0; height: 0; margin: 0 auto -6px;
  border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 18px solid #0f172a; position: relative; z-index: 2;
}
.rad-svg { width: min(78vw, 19rem); height: auto; margin: 0 auto; display: block; }
.rad-label { font: 700 13px system-ui, sans-serif; fill: #1e293b; }
.rad-draaiknop { margin-top: .75rem; min-width: 10rem; }
.rad-uitleg { margin-top: .6rem; color: #475569; font-size: .92rem; }
.rad-resultaat { margin-top: .75rem; }
.rad-punten { font-size: 1.6rem; font-weight: 800; margin-bottom: .35rem; }

/* Puzzel bewaren (Premium): keuze-overlay boven de puzzelmodal */
.bewaar-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(20,16,40,.55); padding: 1rem; }
.bewaar-overlay[hidden] { display: none; }
.bewaar-kaart { background: var(--paper, #fff); color: var(--ink, #222); border-radius: 1.25rem; padding: 1.5rem; max-width: 26rem; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.bewaar-kop { font-family: var(--font-display, inherit); font-size: 1.4rem; font-weight: 700; margin-bottom: .5rem; }
.bewaar-tekst { color: var(--ink-soft, #555); margin-bottom: 1rem; line-height: 1.45; }
.bewaar-knoppen { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Puzzel bewaren: arena-kaart "Bewaarde puzzels" + tegel-label */
.bewaar-kaart-arena { padding: 1rem 1.25rem; }
.bewaar-kaart-kop { font-family: var(--font-display, inherit); font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.bewaar-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bewaar-rij { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.bewaar-rij-tekst { flex: 1 1 12rem; }
.bewaar-icoon { width: 28px; height: 28px; object-fit: contain; }
.bewaar-tegel-label { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; padding: .15rem .5rem; border-radius: 999px; background: #E6F4EA; color: #1B5E20; }
.bewaar-tegel-slot { background: #F1EFF8; color: #4A3F7A; }

/* ===== Sleepbare zweefknoppen (fab-drag.js) =====
   Radio- en prijsrad-fab zijn versleepbaar; positie wordt per knop
   onthouden. Tijdens het slepen zweeft de knop (schaal + schaduw +
   kanteling via --fab-kantel) en laat hij vervagende schaduwkopieën
   achter (.fab-spoor). */
.radio-fab,.rad-fab{touch-action:none}
/* Iconen in de fabs mogen nooit zelf pointer-doelwit zijn of een native
   image-drag starten (die "trok het icoon uit de knop" en brak de sleep
   én de klik midden op de knop — live-bug 2026-08-26). */
.radio-fab img,.rad-fab img{pointer-events:none;-webkit-user-drag:none;user-select:none}
/* Open radio-paneel altijd bóven de prijsrad-knop (z-index 44) — anders
   valt de paneeltekst achter die knop. */
.radio-wrap.radio-open{z-index:60}
/* Na verslepen naar de bovenste schermhelft klapt het paneel ónder de
   knop open (fab-drag.js zet fab-boven; volgorde in de flex-kolom om). */
.radio-wrap.fab-boven .radio-fab{order:1}
.radio-wrap.fab-boven .radio-paneel{order:2}
/* Zweef-gevoel tijdens het slepen: iets groter, diepere schaduw en een
   lichte kanteling mee met de sleeprichting. Wint van .radio-fab:hover
   doordat deze regel later in het bestand staat. */
.fab-zweef{z-index:80}
.fab-zweef .radio-fab,.fab-zweef .rad-fab{
  transform:scale(1.12) rotate(var(--fab-kantel,0deg));
  transition:transform .08s ease-out;
  box-shadow:0 14px 32px rgba(0,0,0,.32);
  cursor:grabbing;
}
/* Spoor-kopie: gekloonde knop die vervaagt en krimpt (komeetstaart). */
.fab-spoor{
  position:fixed;margin:0;pointer-events:none;z-index:79;
  animation:fabSpoor .45s ease-out forwards;
}
@keyframes fabSpoor{
  from{opacity:.45;transform:scale(1)}
  to{opacity:0;transform:scale(.4)}
}

/* Blog-artikel (.blog-body, SSR /blog/:slug): de body komt als kale HTML uit
   de DB, zonder classes. Zonder deze regels erfden links de tekstkleur zonder
   onderstreping en oogden H2-koppen als gewone alinea's (Tailwind-preflight
   nult ze) — de interne links stonden er dus wel, maar waren onzichtbaar
   (geconstateerd 2026-09-17 bij de woordwiel-lancering, gold voor álle posts). */
.blog-body a{color:var(--bubblegum-deep);text-decoration:underline;text-underline-offset:2px;font-weight:700}
.blog-body a:hover{color:var(--bubblegum-deeper)}
.blog-body h2{font-family:'Fredoka',sans-serif;font-size:1.5rem;line-height:1.25;font-weight:700;color:var(--ink);margin-top:1.75rem}
.blog-body h3{font-family:'Fredoka',sans-serif;font-size:1.2rem;line-height:1.3;font-weight:700;color:var(--ink);margin-top:1.25rem}
.blog-body ul{list-style:disc;padding-left:1.5rem}
.blog-body ol{list-style:decimal;padding-left:1.5rem}
.blog-body li{margin:.35rem 0}