@font-face{
    font-family:'ProvidenceSansPro';
    src:url('ProvidenceSansPro.otf') format('opentype');
    font-weight:normal;font-style:normal;font-display:swap;
  }
  :root{
    --navy:#003399;
    --gold:#FFCC33;
    --green:#479554;
    --pink:#FF99CC;
    --red:#FF3333;
    --white:#FFFFFF;
    --bg:#F2F5FA;
    --card:#FFFFFF;
    --radius:22px;
    --shadow:0 6px 18px rgba(0,51,153,0.10);
  }
  *{box-sizing:border-box;}
  html{
    overflow-x:hidden;
    max-width:100%;
  }
  body{
    margin:0;
    overflow-x:hidden;
    font-family:'Atkinson Hyperlegible',sans-serif;
    background:radial-gradient(ellipse 1100px 720px at 50% -12%, #ffffff 0%, #e9f0fb 32%, var(--bg) 64%);
    color:var(--navy);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }
  .bg-blob{
    position:absolute;top:-160px;right:-200px;width:460px;height:auto;
    opacity:.05;pointer-events:none;z-index:0;
  }
  .bg-blob path{fill:var(--navy);}
  h1,h2,h3,.display{font-family:'Fredoka',sans-serif;font-weight:600;margin:0;}
  p{margin:0 0 .8em 0;}
  button{font-family:inherit;}
  button:focus-visible, .tile:focus-visible,
  a:focus-visible, input:focus-visible, summary:focus-visible{
    outline:3px solid var(--navy);
    outline-offset:3px;
    border-radius:6px;
  }
  body[data-theme="dark"] button:focus-visible,
  body[data-theme="dark"] .tile:focus-visible,
  body[data-theme="dark"] a:focus-visible,
  body[data-theme="dark"] input:focus-visible,
  body[data-theme="dark"] summary:focus-visible{outline-color:#9db8ee;}

  /* ---- Tekstselectie ---- */
  ::selection{background:var(--navy);color:#fff;}
  ::-moz-selection{background:var(--navy);color:#fff;}
  body[data-theme="dark"] ::selection{background:var(--gold);color:#1a2438;}

  /* ---- Scrollbar (subtiel, in huisstijl) ---- */
  html{scrollbar-width:thin;scrollbar-color:rgba(0,51,153,.32) transparent;}
  ::-webkit-scrollbar{width:12px;height:12px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{
    background:rgba(0,51,153,.28);
    border-radius:99px;
    border:3px solid transparent;
    background-clip:content-box;
  }
  ::-webkit-scrollbar-thumb:hover{background:rgba(0,51,153,.45);background-clip:content-box;}
  body[data-theme="dark"]{scrollbar-color:rgba(168,191,232,.32) transparent;}
  body[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(168,191,232,.28);background-clip:content-box;}
  body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(168,191,232,.45);background-clip:content-box;}

  /* Layout shell */
  .top{
    padding:.7rem 1.2rem .3rem;
    text-align:center;
    position:relative;
  }
  .header-left{
    position:absolute;left:.8rem;top:50%;transform:translateY(-50%);
  }
  .header-controls{
    position:absolute;right:.8rem;top:50%;transform:translateY(-50%);
    display:inline-flex;align-items:center;gap:.45rem;
  }

  /* ---- Gedeeld knop-design: glas, o.b.v. de trofee-knop ---- */
  .glass-btn{
    background:rgba(255,249,236,.72);
    backdrop-filter:blur(12px) saturate(160%);
    -webkit-backdrop-filter:blur(12px) saturate(160%);
    border:1.5px solid rgba(255,204,51,.55);
    border-radius:999px;
    color:var(--navy);
    cursor:pointer;line-height:1;
    box-shadow:0 2px 10px rgba(0,51,153,.1);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .2s, border-color .2s, opacity .2s;
    -webkit-tap-highlight-color:transparent;
  }
  .glass-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 7px 20px rgba(0,51,153,.18);}
  .glass-btn:active{transform:translateY(0) scale(.97);}
  body[data-theme="dark"] .glass-btn{background:rgba(30,40,68,.6);border-color:rgba(255,204,51,.32);color:#cdd9f0;}
  body[data-theme="dark"] .glass-btn:hover{box-shadow:0 7px 20px rgba(0,0,0,.35);}

  /* Ronde controleknop (mute, zen) */
  .ctrl-btn{
    width:2rem;height:2rem;padding:0;
    font-size:.95rem;
    display:flex;align-items:center;justify-content:center;
  }
  .mute-toggle.muted{opacity:.45;}

  /* Zoek-pill links bovenaan */
  .search-trigger{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.34rem .85rem .34rem .68rem;
    font-family:'Fredoka',sans-serif;font-weight:600;font-size:.8rem;
  }
  .search-trigger .st-ic{font-size:.9rem;}
  .theme-pill{
    position:relative;
    display:flex;align-items:center;
    width:4.4rem;height:1.9rem;
    border-radius:999px;
    background:rgba(0,51,153,.09);
    border:1.5px solid rgba(0,51,153,.18);
    cursor:pointer;padding:0;
    flex-shrink:0;
    transition:transform .2s ease,background .2s,border-color .2s,box-shadow .15s ease;
  }
  .theme-pill:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(0,51,153,.12);}
  .theme-pill-moon,.theme-pill-sun{
    position:relative;z-index:1;
    flex:1 1 50%;text-align:center;
    font-size:.9rem;line-height:1;
    pointer-events:none;
    transition:opacity .2s;
  }
  .theme-pill-moon{opacity:.38;}
  .theme-pill-sun{opacity:1;}
  .theme-pill-knob{
    position:absolute;
    top:50%;
    width:calc(50% - .3rem);
    height:calc(100% - .3rem);
    border-radius:999px;
    background:#fff;
    box-shadow:0 1px 5px rgba(0,0,0,.18);
    left:calc(50% + .15rem);
    pointer-events:none;
    transform:translateY(-50%);
    transition:left .22s cubic-bezier(.4,0,.2,1);
  }
  .logo{display:inline-flex;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease;}
  .logo:hover{transform:scale(1.04);}
  .logo:active{transform:scale(0.97);}

  /* ---- Beknopte linkbalk, zoals een bladwijzerbalk ---- */
  .quicklinks{
    display:flex;justify-content:center;align-items:center;
    flex-wrap:wrap;gap:.35rem;
    max-width:880px;margin:0 auto;
    padding:.2rem 1rem .4rem;
  }
  .quicklinks a{
    display:inline-flex;align-items:center;gap:.32rem;
    font-family:'Fredoka',sans-serif;font-weight:600;
    font-size:.74rem;color:#5b6b85;
    background:rgba(0,51,153,0.05);
    border:1px solid rgba(0,51,153,0.10);
    border-radius:999px;
    padding:.28rem .65rem;
    text-decoration:none;
    transition:background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
    white-space:nowrap;
  }
  .quicklinks a:hover{background:rgba(0,51,153,0.12);color:var(--navy);transform:translateY(-1px);box-shadow:0 3px 9px rgba(0,51,153,.12);}
  .quicklinks .ql-ic{font-size:.85rem;line-height:1;}
  .brand-logo{height:3rem;width:auto;transition:height .25s ease;}
  .brand-logo path{fill:var(--navy);}
  body:has(#hub.active) .brand-logo{height:4rem;}
  main{
    max-width:880px;
    margin:0 auto;
    padding:0 1.25rem 4rem;
  }

  /* Views */
  .view{display:none;}
  .view.active{display:block;}
  @media (prefers-reduced-motion: no-preference){
    .view.active{animation:fadein .35s ease;}
  }
  @keyframes fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

  /* Hub */
  .top-bar{
    display:flex;align-items:center;justify-content:center;
    gap:.5rem;flex-wrap:wrap;
    margin:.4rem auto .2rem;
    position:relative;z-index:1;
  }
  .greet-pill{
    display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
    background:rgba(0,51,153,.07);
    border:1px solid rgba(0,51,153,.15);
    border-radius:99px;
    padding:.22rem .75rem;
    font-family:'Fredoka',sans-serif;font-weight:700;
    font-size:.82rem;color:var(--navy);
    white-space:nowrap;opacity:.9;
    min-width:8rem;
  }
  .intro{position:relative;z-index:1;text-align:center;padding:.3rem 0 .6rem;}
  .intro p{color:#3d4f6e;max-width:480px;margin:0 auto .6rem;}
  .progress-wrap{display:inline-block;text-align:center;}
  .progress{
    display:inline-block;
    background:var(--card);
    border:2px solid #e7e2d8;
    border-radius:999px;
    padding:.35rem 1rem;
    font-weight:700;
    font-family:'Fredoka',sans-serif;
    font-size:.9rem;
    color:var(--navy);
  }
  .progress-bar{
    height:5px;background:rgba(0,51,153,.1);border-radius:3px;
    margin:.5rem auto 0;width:80%;max-width:200px;
  }
  .progress-fill{
    height:100%;background:var(--green);border-radius:3px;
    width:0%;transition:width .5s cubic-bezier(.34,1.56,.64,1);
  }

  /* ---- Aftelklok naar de zomer ---- */
  .countdown{
    position:relative;z-index:1;
    display:flex;align-items:center;gap:.4rem;
    min-width:fit-content;margin:0;
    background:rgba(255,230,100,.18);
    border:1px solid rgba(255,204,51,.4);
    border-radius:99px;
    padding:.22rem .75rem .22rem .5rem;
    opacity:.88;
  }
  .cd-sun-wrap{flex:0 0 auto;position:relative;}
  .cd-sun{
    background:none;border:none;cursor:pointer;
    font-size:1.1rem;line-height:1;padding:0;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.12));
    transition:filter .2s ease;
    -webkit-tap-highlight-color:transparent;
    will-change:transform,filter;
  }
  .cd-sun:hover{filter:drop-shadow(0 2px 7px rgba(255,180,0,.6)) brightness(1.1);}
  @keyframes sun-idle{
    0%,100%{transform:scale(1) rotate(-5deg);}
    50%{transform:scale(1.1) rotate(7deg);}
  }
  @media (prefers-reduced-motion: no-preference){
    .cd-sun{animation:sun-idle 3.2s ease-in-out infinite;}
  }
  @keyframes sun-spin{
    0%{transform:scale(1) rotate(0deg);}
    40%{transform:scale(1.35) rotate(180deg);}
    100%{transform:scale(1) rotate(360deg);}
  }
  .cd-sun.spin{animation:sun-spin .7s ease;}
  .cd-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.72rem;color:var(--navy);opacity:.75;white-space:nowrap;}
  .cd-units{display:flex;gap:.15rem;align-items:baseline;}
  .cd-unit{display:inline-flex;align-items:baseline;gap:.08rem;}
  .cd-num{font-family:'Fredoka',sans-serif;font-weight:700;font-size:.82rem;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums;display:inline-block;min-width:1.6ch;text-align:right;}
  .cd-label{font-size:.6rem;color:#6b5b2c;line-height:1;}
  .cd-unit:not(:last-child)::after{content:'·';margin-left:.15rem;color:#b09040;font-size:.65rem;}
  .cd-sub{font-size:.68rem;color:#6b5b2c;opacity:.8;white-space:nowrap;}
  .cd-done{font-family:'Fredoka',sans-serif;font-weight:700;font-size:.82rem;color:var(--navy);}
  .cd-bubble{
    position:absolute;
    bottom:calc(100% + .4rem);left:50%;
    transform:translateX(-50%) translateY(6px) scale(.9);
    background:var(--navy);color:#fff;
    font-family:'Fredoka',sans-serif;font-weight:600;font-size:.78rem;
    padding:.35rem .7rem;border-radius:12px;
    opacity:0;
    transition:opacity .2s ease,transform .2s ease;
    pointer-events:none;white-space:nowrap;z-index:2;
  }
  .cd-bubble::after{
    content:'';position:absolute;top:100%;left:50%;margin-left:-5px;
    border:5px solid transparent;border-top-color:var(--navy);
  }
  .cd-bubble.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}

  /* Subtiele huisstijl-vormen op de achtergrond van de hub */
  #hub{position:relative;padding-bottom:4rem;}
  .bg-deco{position:absolute;pointer-events:none;opacity:.13;z-index:0;}
  @keyframes drift1{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(2.4vw,-2vh);}
  }
  @keyframes drift2{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-2vw,2.3vh);}
  }
  @keyframes drift3{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(2vw,2vh);}
  }
  @media (prefers-reduced-motion: no-preference){
    .drift1{animation-name:drift1;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
    .drift2{animation-name:drift2;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
    .drift3{animation-name:drift3;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
  }

  /* ---- Interactieve homepage-extra's ---- */
  .wave-emoji{
    display:inline-block;cursor:pointer;
    transform-origin:70% 80%;
    -webkit-tap-highlight-color:transparent;
    transition:filter .2s ease;
    will-change:transform;
  }
  .wave-emoji:hover{filter:drop-shadow(0 2px 6px rgba(0,51,153,.45));}
  @keyframes wave-hand{
    0%,100%{transform:rotate(0);}
    15%{transform:rotate(16deg);}
    30%{transform:rotate(-12deg);}
    45%{transform:rotate(16deg);}
    60%{transform:rotate(-8deg);}
    75%{transform:rotate(11deg);}
  }
  /* zacht wuiven in rust, om uit te nodigen tot klikken */
  @keyframes wave-idle{
    0%,60%,100%{transform:rotate(0);}
    66%{transform:rotate(15deg);}
    73%{transform:rotate(-9deg);}
    80%{transform:rotate(13deg);}
    87%{transform:rotate(-5deg);}
    94%{transform:rotate(7deg);}
  }
  @media (prefers-reduced-motion: no-preference){
    .wave-emoji{animation:wave-idle 3.8s ease-in-out infinite;}
    .wave-emoji.waving{animation:wave-hand .85s ease;}
  }
  #greet-word{
    display:inline-block;transition:opacity .15s ease, transform .15s ease;
  }
  #greet-word.swap{opacity:0;transform:translateY(-4px);}

  /* tegels vliegen gestaggerd binnen bij het openen van de hub */
  @keyframes tile-in{
    from{opacity:0;transform:translateY(16px) scale(.95);}
    to{opacity:1;transform:none;}
  }
  @media (prefers-reduced-motion: no-preference){
    .tile.tile-enter{opacity:0;animation:tile-in .5s cubic-bezier(.34,1.56,.64,1) forwards;}
  }

  .spark{
    position:fixed;z-index:9997;pointer-events:none;
    transform:translate(-50%,-50%);
    will-change:transform,opacity;font-size:1rem;line-height:1;
    animation:spark-fly .75s ease-out forwards;
  }
  @keyframes spark-fly{
    0%  {transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:1;}
    100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(var(--rot));opacity:0;}
  }

  /* ---- Confetti ---- */
  @keyframes confetti-fall{
    0%  {transform:translateY(-20px) rotate(0deg); opacity:1;}
    85% {opacity:1;}
    100%{transform:translateY(105vh) rotate(720deg); opacity:0;}
  }
  .confetti-piece{
    position:fixed;
    top:-20px;
    z-index:9999;
    pointer-events:none;
    will-change:transform,opacity;
    animation:confetti-fall linear forwards;
  }
  .confetti-star{
    clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    border-radius:0 !important;
  }

  /* ---- Thema-wissel animatie ---- */
  .theme-main{
    position:fixed;left:50%;top:50%;
    transform:translate(-50%,-50%) scale(0);
    font-size:5rem;z-index:10000;pointer-events:none;
    will-change:transform,opacity;
    animation:theme-pop .85s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  @keyframes theme-pop{
    0%  {transform:translate(-50%,-50%) scale(0);opacity:0;}
    45% {transform:translate(-50%,-50%) scale(1.35);opacity:1;}
    100%{transform:translate(-50%,-50%) scale(.7);opacity:0;}
  }
  .theme-piece{position:fixed;pointer-events:none;z-index:9998;will-change:transform,opacity;}
  .theme-piece--star{
    clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    top:-30px;
    animation:theme-fall linear forwards;
  }
  .theme-piece--sun{
    border-radius:50%;
    bottom:-30px;
    animation:theme-rise linear forwards;
  }
  @keyframes theme-fall{
    0%  {transform:translateY(0) rotate(0deg);opacity:1;}
    80% {opacity:.9;}
    100%{transform:translateY(110vh) rotate(540deg);opacity:0;}
  }
  @keyframes theme-rise{
    0%  {transform:translateY(0) rotate(0deg);opacity:1;}
    80% {opacity:.9;}
    100%{transform:translateY(-110vh) rotate(-360deg);opacity:0;}
  }

  .tiles{
    position:relative;z-index:1;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.9rem;
    margin-top:.8rem;
  }

  /* Scheiding voor de 'extra' tegels (geen badge, tellen niet mee) */
  .tiles-sep{
    flex:0 0 100%;width:100%;
    display:flex;align-items:center;gap:.7rem;
    margin:.7rem .3rem 0;
  }
  .tiles-sep::before,.tiles-sep::after{
    content:'';flex:1;height:2px;border-radius:2px;
    background:rgba(0,51,153,.12);
  }
  .tiles-sep span{
    font-family:'Fredoka',sans-serif;font-weight:600;font-size:.7rem;
    letter-spacing:.12em;text-transform:uppercase;color:rgba(0,51,153,.42);
    white-space:nowrap;
  }
  body[data-theme="dark"] .tiles-sep::before,
  body[data-theme="dark"] .tiles-sep::after{background:rgba(168,191,232,.16);}
  body[data-theme="dark"] .tiles-sep span{color:rgba(168,191,232,.5);}

  /* Divider tussen tiles en Kijken & volgen */
  .hub-divider{
    display:flex;align-items:center;gap:.9rem;
    margin:2rem 0 .2rem;
    color:var(--navy);opacity:.22;
  }
  .hub-divider::before,.hub-divider::after{
    content:'';flex:1;height:1.5px;
    background:linear-gradient(to right,transparent,var(--navy) 30%,var(--navy) 70%,transparent);
  }
  .hub-divider::before{background:linear-gradient(to right,transparent,var(--navy));}
  .hub-divider::after {background:linear-gradient(to left, transparent,var(--navy));}
  .hub-divider-icon{font-size:1.1rem;opacity:.7;line-height:1;}
  body[data-theme="dark"] .hub-divider{opacity:.18;}

  /* Video + Instagram op de hub */
  .hub-extra{
    position:relative;z-index:1;
    margin-top:.4rem;
    text-align:center;
  }
  .hub-media{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:1rem;
  }
  .video-wrap{
    position:relative;padding-bottom:56.25%;height:0;
    overflow:hidden;border-radius:16px;
    box-shadow:var(--shadow);
    flex:1 1 280px;max-width:400px;
  }
  .video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .insta-embed{
    flex:1 1 280px;max-width:400px;
    position:relative;padding-bottom:56.25%;height:0;
    border-radius:16px;overflow:hidden;
    box-shadow:var(--shadow);
    background:#fff;
  }
  .insta-embed iframe,.insta-embed blockquote{
    position:absolute;inset:0;width:100%!important;height:100%!important;
    border:0;margin:0!important;min-height:unset!important;
  }
  .insta-overlay{
    position:absolute;inset:0;z-index:10;
  }
  .review-btn{
    display:inline-flex;align-items:center;gap:.5rem;
    background:var(--gold);color:var(--navy);
    font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;
    padding:.65rem 1.3rem;border-radius:999px;text-decoration:none;
    box-shadow:var(--shadow);margin-top:1.1rem;
    transition:transform .15s ease,box-shadow .15s ease;
  }
  .review-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.13);}
  .tile{
    flex:1 1 185px;
    max-width:210px;
    border:none;
    border-radius:var(--radius);
    padding:1.2rem .9rem;
    text-align:center;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.35rem;
    position:relative;
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
    transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
    min-height:135px;
  }
  .tile:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(30,51,84,0.18), inset 0 1px 0 rgba(255,255,255,.22);}
  .tile:hover .tile-icon{transform:translateY(-2px) scale(1.12) rotate(-4deg);}
  .tile:active{transform:translateY(-1px) scale(.98);}
  .tile-icon{font-size:2.4rem;line-height:1;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
  .tile-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;}
  .tile-desc{font-size:.85rem;opacity:.9;}
  .tile-check{
    position:absolute;top:.65rem;right:.75rem;
    width:1.15rem;height:1.15rem;border-radius:50%;
    border:1.5px solid rgba(255,255,255,.5);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transform:scale(.5);
    transition:opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
  }
  .tile-check::after{
    content:'✓';
    font-size:.65rem;font-weight:700;color:rgba(255,255,255,.9);
    font-family:system-ui,sans-serif;line-height:1;
  }
  .tile.visited .tile-check{
    opacity:1;transform:scale(1);
    background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.8);
  }
  .tile-gold .tile-check,.tile-white .tile-check{border-color:rgba(0,51,153,.3);}
  .tile-gold .tile-check::after,.tile-white .tile-check::after{color:rgba(0,51,153,.7);}
  .tile-gold.visited .tile-check,.tile-white.visited .tile-check{background:rgba(0,51,153,.1);border-color:rgba(0,51,153,.5);}

  .tile-navy{background:var(--navy);color:#fff;}
  .tile-gold{background:var(--gold);color:var(--navy);}
  .tile-pink{background:var(--pink);color:var(--navy);}
  .tile-green{background:var(--green);color:var(--navy);}
  .tile-red{background:var(--red);color:#fff;}
  .tile-white{background:var(--white);color:var(--navy);border:2px solid var(--navy);}

  /* Back button */
  .back{
    background:rgba(0,51,153,.06);border:none;cursor:pointer;
    color:var(--navy);font-weight:700;font-family:'Fredoka',sans-serif;
    font-size:.9rem;padding:.45rem .95rem .45rem .7rem;
    display:inline-flex;align-items:center;gap:.3rem;
    border-radius:999px;margin-bottom:1.4rem;
    transition:background .15s, transform .15s;
  }
  .back:hover{background:rgba(0,51,153,.13);transform:translateX(-2px);}

  /* ---- Page band system (vibe pages) ---- */
  .page-band{
    position:relative;
    margin:0 0 1.6rem;
    padding:1.7rem 0 1.9rem;
    overflow:visible;
  }
  .page-band::before{
    content:'';
    position:absolute;
    top:0;bottom:0;left:50%;width:100vw;
    transform:translateX(-50%);
    background-color:var(--band-col,var(--navy));
    background-image:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 45%, rgba(0,0,0,.07));
    border-radius:0 0 24px 24px;
    box-shadow:0 12px 30px rgba(0,51,153,.12);
    z-index:-1;
  }
  /* decoratieve vormen blijven binnen de band (verticaal) zodat ze er niet onder uitsteken */
  .page-band .deco{position:absolute;color:#fff;opacity:.18;pointer-events:none;}
  .deco-star{width:58px;height:58px;}
  .deco-blob{width:150px;height:90px;}
  .deco--tr{top:6px;right:-10px;}
  .deco--bl{bottom:4px;left:-18px;}
  .deco--br{bottom:6px;right:6px;}
  .deco--tl{top:8px;left:-22px;}

  .page-navy{--band-col:var(--navy);color:#fff;}
  .page-green{--band-col:var(--green);color:var(--navy);}
  .page-pink{--band-col:var(--pink);color:var(--navy);}
  .page-gold{--band-col:var(--gold);color:var(--navy);}
  .page-red{--band-col:var(--red);color:#fff;}

  .band-title{
    position:relative;z-index:1;
    font-family:'Fredoka',sans-serif;font-weight:700;
    font-size:clamp(2.1rem,8.5vw,3.6rem);
    line-height:1.04;
    max-width:18ch;
    margin:0 0 .6rem;
  }
  .band-title::after{
    content:'';display:block;
    width:2.8rem;height:3px;
    background:currentColor;opacity:.28;
    border-radius:2px;margin:.5rem 0 .4rem;
  }

  .band-intro{position:relative;z-index:1;font-size:1.02rem;max-width:32rem;margin:0 0 1.8rem;opacity:.92;}

  .handwritten{
    font-family:'ProvidenceSansPro',sans-serif;font-weight:normal;
    font-size:1.55rem;color:var(--navy);
    margin:0 0 .5rem 0;
  }

  /* Module shared */
  .mod-body{margin-top:.2rem;padding-bottom:5rem;}

  /* Skill / principle cards */
  .skill-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:.8rem;
  }
  .skill-card{
    background:var(--card);border-radius:16px;padding:1rem;
    box-shadow:var(--shadow);
    display:flex;flex-direction:column;gap:.35rem;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .skill-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,51,153,.12);}
  .skill-card .ic{font-size:1.8rem;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
  .skill-card:hover .ic{transform:scale(1.15) rotate(-5deg);}
  .skill-card h3{font-size:1rem;}
  .skill-card p{font-size:.9rem;color:#3d4f6e;margin:0;}

  /* Wat als quiz */
  .quiz-card{
    background:var(--card);border-radius:var(--radius);
    padding:1.2rem;box-shadow:var(--shadow);
  }
  .quiz-scenario{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1rem;}
  .quiz-scenario .ic{font-size:2.2rem;}
  .quiz-scenario p{font-weight:700;font-family:'Fredoka',sans-serif;font-size:1.05rem;margin:0;}
  .options{display:flex;flex-direction:column;gap:.6rem;}
  .option-btn{
    text-align:left;border:2px solid #e7e2d8;border-radius:14px;
    padding:.7rem .9rem;background:#fff;cursor:pointer;
    font-size:.95rem;transition:border-color .15s, background .15s;
  }
  .option-btn:hover:not(:disabled){border-color:var(--navy);}
  .option-btn:disabled{cursor:default;}
  .option-btn.selected:not(.is-correct){border-color:var(--gold);background:#FFF8E8;}
  .option-btn.is-correct{border-color:var(--green);background:#EAFBF1;}
  .feedback{
    margin-top:1rem;padding:.9rem 1rem;border-radius:14px;
    background:#EEF3FC;border-left:5px solid var(--navy);
    font-size:.92rem;display:none;
  }
  .feedback.show{display:block;}
  .feedback.correct{border-left-color:var(--green);background:#EEFBF3;}
  .quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.2rem;}
  .dots{display:flex;gap:.4rem;}
  .dot{width:9px;height:9px;border-radius:50%;background:#e7e2d8;}
  .dot.active{background:var(--pink);}
  .next-btn{
    background:var(--navy);color:#fff;border:none;border-radius:999px;
    padding:.6rem 1.3rem;font-family:'Fredoka',sans-serif;font-weight:600;
    cursor:pointer;font-size:.95rem;display:none;
  }
  .next-btn.show{display:inline-block;}
  .quiz-done{text-align:center;padding:1.5rem 0;}
  .quiz-done .ic{font-size:2.6rem;}

  /* Een geslaagd spel (STADIUM) */
  .stadium-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
  .stadium-item{
    display:flex;gap:.9rem;align-items:flex-start;
    background:var(--card);border-radius:16px;padding:.95rem 1.05rem;
    box-shadow:var(--shadow);border-left:6px solid var(--sl,var(--navy));
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .stadium-item:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,51,153,.12);}
  .stadium-letter{
    flex:0 0 auto;width:46px;height:46px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.8rem;line-height:1;
    background:var(--sl,var(--navy));color:var(--slt,#fff);
  }
  .stadium-body{min-width:0;}
  .stadium-body h3{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;margin:0 0 .15rem;color:var(--navy);}
  .stadium-body p{font-size:.9rem;color:#3d4f6e;margin:0;}

  /* Rule cards */
  .rule-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:.8rem;margin-bottom:1.2rem;
  }
  .rule-card{
    background:var(--card);border-radius:16px;padding:1rem;
    box-shadow:var(--shadow);text-align:center;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .rule-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,51,153,.12);}
  .rule-card .ic{font-size:1.9rem;display:block;margin-bottom:.4rem;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
  .rule-card:hover .ic{transform:scale(1.15) rotate(-5deg);}
  .rule-card p{font-size:.9rem;margin:0;}

  /* Notes / info / API boxes */
  .note{
    background:#FFF8E8;border-radius:14px;padding:.9rem 1rem;
    font-size:.9rem;border-left:5px solid var(--gold);margin-bottom:1.2rem;
  }
  .info-box{
    background:var(--card);border:2px solid var(--navy);border-radius:var(--radius);
    padding:1.1rem 1.2rem;margin:0 0 1.2rem 0;box-shadow:var(--shadow);
    transition:box-shadow .15s ease;
  }
  .info-box:hover{box-shadow:0 10px 24px rgba(0,51,153,.14);}
  .info-box h3{font-size:1.05rem;margin-bottom:.5rem;}
  .info-box p{font-size:.92rem;margin:0;}
  .api-box{
    background:#FFF8E8;border:2px solid var(--gold);border-radius:var(--radius);
    padding:1.1rem 1.2rem;margin:1.2rem 0;
    transition:box-shadow .15s ease;
  }
  .api-box:hover{box-shadow:0 8px 20px rgba(200,160,0,.16);}
  .api-box h3{font-size:1.05rem;margin-bottom:.5rem;}
  .api-box p{font-size:.92rem;margin:0 0 .8rem 0;}
  .api-box p:last-child{margin-bottom:0;}

  .api-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin-top:.6rem;}
  .api-person{
    background:#fff;border-radius:16px;padding:.9rem;
    box-shadow:var(--shadow);display:flex;gap:.8rem;align-items:center;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .api-person:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,51,153,.12);}
  .avatar{
    width:72px;height:72px;border-radius:50%;flex-shrink:0;
    object-fit:cover;object-position:center top;
    border:3px solid var(--navy);
    background:var(--navy);color:#fff;
  }
  .avatar-loes{border-color:var(--red);}
  .api-person .info h3{font-size:1rem;margin-bottom:.15rem;}
  .api-person .info p{font-size:.85rem;margin:0;color:#3d4f6e;}
  .api-person .info a{color:var(--navy);text-decoration:none;font-weight:700;}
  .api-person .info a:hover{text-decoration:underline;}

  /* Hulp nodig contact cards */
  .contact-card{
    background:var(--card);border-radius:16px;padding:1rem;
    box-shadow:var(--shadow);display:flex;gap:.8rem;align-items:flex-start;
    margin-bottom:.8rem;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .contact-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,51,153,.12);}
  .contact-card .ic{font-size:1.8rem;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
  .contact-card:hover .ic{transform:scale(1.15) rotate(-5deg);}
  .contact-card h3{font-size:1rem;margin-bottom:.2rem;}
  .contact-card p{font-size:.9rem;margin:0;color:#3d4f6e;}
  .contact-card a{color:var(--navy);}

  /* Huisreglement: hoofdstuk-navigatie (geen scroll nodig, alles past altijd) */
  .hr-numbers{
    display:flex;flex-wrap:wrap;gap:.6rem;
    margin:0 0 1.6rem;
  }
  .hr-num{
    width:44px;height:44px;flex:0 0 auto;border-radius:50%;
    border:2px solid var(--navy);background:#fff;color:var(--navy);
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.1rem;
    cursor:pointer;transition:background .15s, color .15s, transform .12s;
  }
  .hr-num:hover:not(.active){transform:scale(1.1);}
  .hr-num.active{background:var(--navy);color:#fff;}
  .hr-page{display:none;}
  .hr-page.active{display:block;}
  .hr-chapnum{
    position:absolute;top:-.35em;right:1.25rem;z-index:0;
    font-family:'Fredoka',sans-serif;font-weight:700;
    font-size:clamp(5rem,22vw,9rem);
    opacity:.13;line-height:1;
    pointer-events:none;
  }
  .hr-pagenav{
    display:flex;justify-content:space-between;gap:.8rem;
    margin-top:1.8rem;
  }
  .hr-pagenav button{
    background:var(--navy);color:#fff;border:none;border-radius:999px;
    padding:.65rem 1.4rem;font-family:'Fredoka',sans-serif;font-weight:600;
    font-size:.92rem;cursor:pointer;
    transition:background .15s, transform .12s ease, box-shadow .15s ease;
  }
  .hr-pagenav button:not(:disabled):hover{background:#00257a;transform:translateY(-2px);box-shadow:0 7px 18px rgba(0,51,153,.22);}
  .hr-pagenav button:disabled{opacity:.3;cursor:default;}
  .hr-pagenav button.hr-next{margin-left:auto;}
  @media (prefers-reduced-motion: no-preference){
    .hr-page.active{animation:fadein .3s ease;}
  }

  /* ---- Gekkoo-game ---- */
  .game-wrap{position:relative;width:100%;max-width:360px;margin:0 auto;}
  #game-canvas, #vang-canvas, #tik-canvas{
    display:block;width:100%;height:auto;
    border-radius:18px;box-shadow:var(--shadow);
    touch-action:none;cursor:pointer;
    overflow:hidden;
  }
  #game-canvas{background:#dff1f7;}
  #vang-canvas{background:#bfe8fb;}
  #tik-canvas{background:#cdeccd;}
  .game-overlay{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;
    background:rgba(8,24,56,.16);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    border-radius:18px;
  }
  .game-overlay[hidden]{display:none;}
  .go-card{
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(16px) saturate(170%);
    -webkit-backdrop-filter:blur(16px) saturate(170%);
    border:1px solid rgba(255,255,255,.6);
    border-radius:18px;padding:1.4rem 1.2rem;
    text-align:center;box-shadow:0 10px 30px rgba(0,40,90,.28);max-width:300px;
  }
  body[data-theme="dark"] .go-card{
    background:rgba(20,30,55,.78);border-color:rgba(168,191,232,.18);
  }
  .go-emoji{font-size:2.6rem;line-height:1;margin-bottom:.3rem;}
  .go-card h3{font-size:1.3rem;margin-bottom:.4rem;}
  .go-card p{font-size:.9rem;color:#3d4f6e;margin:0 0 .8rem;}
  .go-card .go-score{font-size:1.05rem;color:var(--navy);}
  .go-card strong{font-family:'Fredoka',sans-serif;}
  .game-btn{
    background:var(--navy);color:#fff;border:none;border-radius:999px;
    padding:.6rem 1.4rem;font-family:'Fredoka',sans-serif;font-weight:600;
    font-size:.95rem;cursor:pointer;
    transition:background .15s, transform .12s ease, box-shadow .15s ease;
  }
  .game-btn:hover{background:#00257a;transform:translateY(-2px);box-shadow:0 7px 18px rgba(0,51,153,.22);}
  .game-btn:active{transform:scale(.96);}
  .name-entry{margin:0 0 .9rem;}
  .ne-title{font-weight:700;color:var(--navy)!important;font-family:'Fredoka',sans-serif;margin-bottom:.5rem!important;}
  .ne-row{display:flex;gap:.5rem;}
  .name-entry input{
    flex:1;min-width:0;border:2px solid #e7e2d8;border-radius:999px;
    padding:.5rem .9rem;font-family:inherit;font-size:.9rem;
  }
  .name-entry input:focus-visible{outline:3px solid var(--navy);outline-offset:1px;border-color:var(--navy);}
  .leaderboard{margin-top:1.6rem;}
  .lb-list{list-style:none;counter-reset:lb;margin:.6rem 0 0;padding:0;}
  .lb-list li{
    counter-increment:lb;display:flex;align-items:center;gap:.7rem;
    background:var(--card);border-radius:12px;padding:.6rem .9rem;
    box-shadow:var(--shadow);margin-bottom:.5rem;font-size:.95rem;
    transition:transform .12s ease;
  }
  .lb-list li:not(.empty):hover{transform:translateX(3px);}
  .lb-list li::before{
    content:counter(lb);width:26px;height:26px;flex:0 0 26px;border-radius:50%;
    background:var(--navy);color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;
    display:flex;align-items:center;justify-content:center;font-size:.85rem;
  }
  .lb-list li:first-child::before{background:var(--gold);color:var(--navy);}
  .lb-list li.empty{justify-content:center;color:#9aa4b8;background:#f0f2f7;box-shadow:none;}
  .lb-list li.empty::before{display:none;}
  .lb-name{flex:1;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lb-score{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--green);}
  .lb-list li.you{outline:2px solid var(--gold);}
  .lb-note{font-size:.82rem;color:#9aa4b8;margin-top:.6rem;}

  /* ---- Inschrijven: stappen + placeholder ---- */
  .steps{list-style:none;counter-reset:step;margin:.4rem 0 0;padding:0;}
  .steps li{
    counter-increment:step;position:relative;
    background:var(--card);border-radius:14px;padding:.9rem 1rem .9rem 3.4rem;
    box-shadow:var(--shadow);margin-bottom:.7rem;
    transition:transform .15s ease;
  }
  .steps li:hover{transform:translateX(4px);}
  .steps li::before{
    content:counter(step);
    position:absolute;left:.8rem;top:.8rem;
    width:30px;height:30px;border-radius:50%;
    background:var(--navy);color:#fff;
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;
    display:flex;align-items:center;justify-content:center;
  }
  .steps li > strong{display:block;font-family:'Fredoka',sans-serif;color:var(--navy);font-size:.95rem;margin-bottom:.15rem;}
  .steps .step-text{font-size:.92rem;color:#3d4f6e;}

  /* ---- Regio-ondersteuners (afgeschermd onderdeel) ---- */
  .tile-regio{
    background:linear-gradient(150deg,#06246e,#003399);
    color:#fff;
    border:2px dashed rgba(255,255,255,.45);
  }
  .tile-lock{
    position:absolute;top:.7rem;right:.8rem;
    font-size:1.05rem;line-height:1;opacity:.95;
  }
  .tile-regio .tile-desc{opacity:.85;}

  .lock-card{
    max-width:430px;margin:.4rem auto 0;
    background:var(--card);border:2px solid var(--navy);
    border-radius:var(--radius);box-shadow:var(--shadow);
    padding:1.7rem 1.4rem;text-align:center;
  }
  .lock-emoji{font-size:2.8rem;line-height:1;margin-bottom:.4rem;}
  .lock-card h3{font-size:1.25rem;margin-bottom:.4rem;}
  .lock-card p{font-size:.92rem;color:#3d4f6e;margin:0 0 1rem;}
  .lock-row{display:flex;gap:.5rem;justify-content:center;max-width:300px;margin:0 auto;}
  .lock-row input{
    flex:1;min-width:0;text-align:center;letter-spacing:.3em;
    border:2px solid #e7e2d8;border-radius:999px;
    padding:.6rem .9rem;font-family:'Fredoka',sans-serif;font-weight:600;
    font-size:1.05rem;color:var(--navy);
  }
  .lock-row input:focus-visible{outline:3px solid var(--navy);outline-offset:1px;border-color:var(--navy);}
  .lock-btn{
    background:var(--navy);color:#fff;border:none;border-radius:999px;
    padding:.6rem 1.2rem;font-family:'Fredoka',sans-serif;font-weight:600;
    font-size:.95rem;cursor:pointer;white-space:nowrap;
    transition:background .15s, transform .1s;
  }
  .lock-btn:hover{background:#00257a;}
  .lock-btn:active{transform:scale(.96);}
  .lock-feedback{min-height:1.2em;margin-top:.8rem;font-size:.9rem;font-weight:700;font-family:'Fredoka',sans-serif;}
  .lock-feedback.err{color:var(--red);}
  .lock-feedback.ok{color:var(--green);}
  @keyframes lock-shake{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-7px);}
    40%{transform:translateX(6px);}
    60%{transform:translateX(-4px);}
    80%{transform:translateX(3px);}
  }
  @media (prefers-reduced-motion: no-preference){
    .lock-card.shake{animation:lock-shake .4s ease;}
  }

  .file-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
    gap:.8rem;margin-top:1rem;
  }
  .file-card{
    display:flex;align-items:flex-start;gap:.75rem;
    background:var(--card);border-radius:16px;padding:1rem;
    box-shadow:var(--shadow);text-decoration:none;color:var(--navy);
    border:2px solid transparent;
    transition:transform .15s ease, border-color .15s ease;
  }
  a.file-card{cursor:pointer;}
  a.file-card:hover{transform:translateY(-2px);border-color:var(--navy);}
  .file-card .fic{font-size:1.9rem;line-height:1;flex:0 0 auto;}
  .file-card .finfo{min-width:0;}
  .file-card h4{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;margin:0 0 .15rem;}
  .file-card p{font-size:.85rem;color:#3d4f6e;margin:0;}
  .file-card .ftag{
    display:inline-block;margin-top:.4rem;font-size:.72rem;font-weight:700;
    font-family:'Fredoka',sans-serif;border-radius:999px;padding:.14rem .6rem;
  }
  .ftag-open{background:#EAFBF1;color:var(--green);}
  .relock{
    background:none;border:none;color:#9aa4b8;cursor:pointer;
    font-family:'Fredoka',sans-serif;font-weight:600;font-size:.82rem;
    margin-top:1.3rem;text-decoration:underline;
  }
  .relock:hover{color:var(--navy);}

  footer{
    text-align:center;color:#9aa4b8;font-size:.8rem;
    padding:1.5rem 0 2.5rem;
    margin-top:1rem;
    border-top:1px solid rgba(0,51,153,.07);
  }

  /* ---- Game tabs ---- */
  .game-tabs{
    display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem;
  }
  .game-tab{
    flex:1;min-width:0;
    background:rgba(255,255,255,.6);border:2px solid rgba(71,149,84,.25);
    border-radius:999px;color:var(--navy);
    font-family:'Fredoka',sans-serif;font-weight:600;font-size:.9rem;
    padding:.5rem .6rem;cursor:pointer;white-space:nowrap;
    transition:background .15s, border-color .15s, color .15s;
  }
  .game-tab:hover{background:rgba(71,149,84,.15);}
  .game-tab.active{background:var(--green);color:#fff;border-color:var(--green);}
  .game-panel[hidden]{display:none!important;}

  /* ---- Locaties & activiteiten (meer-pagina) ---- */
  .meer-links{display:flex;flex-direction:column;gap:.75rem;margin-top:.6rem;}
  .meer-card{
    display:flex;align-items:center;gap:1rem;
    background:var(--card);border-radius:16px;padding:1rem 1.1rem;
    box-shadow:var(--shadow);text-decoration:none;color:var(--navy);
    border:2px solid transparent;
    transition:transform .15s ease, border-color .15s ease;
  }
  .meer-card:hover{transform:translateY(-2px);border-color:var(--navy);}
  .meer-card--gold{background:linear-gradient(135deg,#FFF3CC,#FFE499);border-color:var(--gold);}
  .meer-card--gold:hover{border-color:#e6b800;}
  .meer-ic{font-size:2rem;flex:0 0 auto;line-height:1;}
  .meer-card div{flex:1;display:flex;flex-direction:column;gap:.15rem;}
  .meer-card strong{font-family:'Fredoka',sans-serif;font-size:1.05rem;}
  .meer-card span{font-size:.85rem;color:#3d4f6e;}
  .meer-card--gold span{color:#6b5b2c;}
  .meer-arrow{font-size:1.3rem;font-weight:700;flex:0 0 auto;opacity:.5;transition:opacity .15s,transform .15s;}
  .meer-card:hover .meer-arrow{opacity:1;transform:translateX(3px);}

  /* ---- Trofee-banner bij voltooiing ---- */
  #trophy-banner{
    position:fixed;inset:0;z-index:10000;
    display:none;align-items:center;justify-content:center;
    background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  #trophy-banner.active{display:flex;}
  .trophy-card{
    background:linear-gradient(160deg,#fff9e6,#fff3cc,#ffe066);
    border:3px solid var(--gold);border-radius:28px;
    padding:2.4rem 2rem;text-align:center;
    box-shadow:0 12px 48px rgba(0,51,153,.25), 0 0 0 6px rgba(255,204,51,.3);
    max-width:340px;width:90vw;position:relative;overflow:hidden;
  }
  @media (prefers-reduced-motion: no-preference){
    .trophy-card{animation:trophy-pop .6s cubic-bezier(.34,1.56,.64,1) forwards;}
  }
  @keyframes trophy-pop{
    from{opacity:0;transform:scale(.5) rotate(-6deg);}
    to{opacity:1;transform:scale(1) rotate(0deg);}
  }
  .trophy-emoji{
    font-size:5rem;line-height:1;display:block;margin-bottom:.5rem;
    filter:drop-shadow(0 4px 16px rgba(255,180,0,.7)) drop-shadow(0 0 32px rgba(255,204,51,.5));
  }
  @media (prefers-reduced-motion: no-preference){
    .trophy-emoji{animation:trophy-shine 2s ease-in-out infinite;}
  }
  @keyframes trophy-shine{
    0%,100%{filter:drop-shadow(0 4px 16px rgba(255,180,0,.7)) drop-shadow(0 0 32px rgba(255,204,51,.5));}
    50%{filter:drop-shadow(0 4px 24px rgba(255,180,0,1)) drop-shadow(0 0 56px rgba(255,220,0,.9)) brightness(1.1);}
  }
  .trophy-stars{font-size:1.6rem;letter-spacing:.3rem;margin-bottom:.6rem;display:block;}
  .trophy-card h2{font-size:1.6rem;color:var(--navy);margin-bottom:.4rem;}
  .trophy-card p{font-size:.95rem;color:#3d4f6e;margin:0 0 1.2rem;}
  .trophy-close{
    background:var(--navy);color:#fff;border:none;border-radius:999px;
    padding:.65rem 1.6rem;font-family:'Fredoka',sans-serif;font-weight:600;
    font-size:1rem;cursor:pointer;
  }
  .trophy-close:hover{background:#00257a;}

  /* ---- Review pagina ---- */
  /* Masonry via CSS-kolommen: kaarten sluiten dicht op elkaar aan */
  .quote-grid{column-width:240px;column-gap:1rem;margin-top:.8rem;}
  .quote-card{
    --accent:var(--gold);
    break-inside:avoid;-webkit-column-break-inside:avoid;
    margin:0 0 1rem;
    background:var(--card);border-radius:16px;padding:1.1rem 1.2rem 1rem;
    box-shadow:var(--shadow);border-left:4px solid var(--accent);position:relative;
    transition:transform .15s ease,box-shadow .15s ease;
  }
  /* Alterneer door de Gekkoo-kleuren (per grid herstart de telling) */
  .quote-card:nth-child(5n+1){--accent:var(--navy);}
  .quote-card:nth-child(5n+2){--accent:var(--gold);}
  .quote-card:nth-child(5n+3){--accent:var(--green);}
  .quote-card:nth-child(5n+4){--accent:var(--pink);}
  .quote-card:nth-child(5n+5){--accent:var(--red);}
  .quote-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.1);}
  .quote-card::before{
    content:'\201C';position:absolute;top:.1rem;left:.7rem;
    font-size:3.5rem;font-family:'Fredoka',sans-serif;
    color:var(--accent);opacity:.4;line-height:1;pointer-events:none;
  }
  .quote-text{font-size:.92rem;color:#3d4f6e;font-style:italic;margin:0 0 .55rem;padding-top:.7rem;}
  .quote-author{font-size:.82rem;font-weight:700;font-family:'Fredoka',sans-serif;color:var(--navy);}
  .photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-top:.8rem;}
  .photo-placeholder{
    background:var(--card);border:2px dashed rgba(0,51,153,.18);
    border-radius:16px;height:130px;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    gap:.3rem;font-size:.88rem;color:#9aa4b8;
    font-family:'Fredoka',sans-serif;
  }

  /* ---- Badge shelf (gedeeld) ---- */
  .badge-slot{
    display:flex;flex-direction:column;align-items:center;gap:.1rem;
    cursor:default;
    filter:grayscale(1);opacity:.22;
    transition:filter .35s ease,opacity .35s ease,transform .2s cubic-bezier(.34,1.56,.64,1);
  }
  .badge-slot.earned{filter:none;opacity:1;}
  .badge-slot.earned:hover{transform:translateY(-4px) scale(1.12);}
  .badge-slot.earned .badge-ic{animation:badge-pop .5s cubic-bezier(.34,1.56,.64,1);}
  .badge-ic{font-size:1.3rem;line-height:1;display:block;}
  .badge-slot small{font-size:.44rem;font-family:'Fredoka',sans-serif;color:var(--navy);text-align:center;line-height:1.1;opacity:.8;}
  @keyframes badge-pop{
    0%  {transform:scale(0) rotate(-15deg);}
    60% {transform:scale(1.35) rotate(8deg);}
    100%{transform:scale(1) rotate(0);}
  }
  body[data-theme="dark"] .badge-slot small{color:#a8bfe8;}

  /* Verticale badge-pill, rechts gedockt, uitklapbaar via de trofee */
  .mini-badge-shelf{
    position:fixed;top:50%;right:0;
    z-index:80;
    display:flex;flex-direction:column;align-items:center;gap:.5rem;
    padding:.75rem .55rem;
    max-height:84vh;overflow-y:auto;overflow-x:hidden;
    scrollbar-width:none;
    background:rgba(255,255,255,.6);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid rgba(255,255,255,.55);border-right:none;
    border-radius:20px 0 0 20px;
    box-shadow:-6px 0 24px rgba(0,51,153,.12);
    opacity:0;pointer-events:none;
    transform:translate(100%,-50%);
    transition:transform .42s cubic-bezier(.4,0,.2,1),opacity .3s ease;
  }
  .mini-badge-shelf::-webkit-scrollbar{width:0;height:0;}
  .mini-badge-shelf.shelf-open{opacity:1;pointer-events:auto;transform:translate(0,-50%);}
  .mini-badge-shelf .badge-slot small{display:none;}
  .mini-badge-shelf .badge-ic{font-size:1.5rem;}
  .mini-badge-shelf .badge-slot.earned:hover{transform:translateX(-4px) scale(1.16);}
  body[data-theme="dark"] .mini-badge-shelf{
    background:rgba(13,22,42,.52);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border-color:rgba(168,191,232,.16);border-right:none;
    box-shadow:-6px 0 24px rgba(0,0,0,.32);
  }

  /* Trophy-knop (verschijnt als alle badges behaald zijn) — basis komt van .glass-btn */
  .trophy-btn{
    position:fixed;bottom:1rem;right:1rem;
    z-index:81;
    font-size:1.3rem;
    padding:.45rem .65rem;
    opacity:0;pointer-events:none;
    transform:scale(.7) translateY(8px);
    transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .2s;
  }
  .trophy-btn.visible{
    opacity:1;pointer-events:auto;
    transform:scale(1) translateY(0);
  }
  .trophy-btn.visible:hover{
    transform:scale(1.08) translateY(-2px);
    box-shadow:0 7px 20px rgba(0,51,153,.22);
  }

  /* Back-to-top (zelfde stijl als trofee) */
  .back-to-top{
    position:fixed;right:1rem;bottom:4.4rem;
    z-index:81;
    width:2.6rem;height:2.6rem;padding:0;
    font-size:1.2rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transform:scale(.7) translateY(8px);
    transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .2s;
  }
  .back-to-top.visible{opacity:1;pointer-events:auto;transform:scale(1) translateY(0);}
  .back-to-top.visible:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 7px 20px rgba(0,51,153,.22);}
  .trophy-btn.shelf-open{
    background:var(--navy);
    border-color:var(--navy);
    color:#fff;
    box-shadow:0 2px 14px rgba(0,51,153,.35);
  }
  body[data-theme="dark"] .trophy-btn{background:#1e2d50;border-color:rgba(255,204,51,.3);}
  body[data-theme="dark"] .trophy-btn.shelf-open{background:#2a4a9a;border-color:#4060c0;}
  body[data-theme="dark"] .mini-badge-shelf .badge-slot small{color:#a8bfe8;}

  /* Flying badge earn animation */
  .badge-fly{
    position:fixed;left:0;top:0;
    pointer-events:none;z-index:9999;
    display:flex;flex-direction:column;align-items:center;gap:.4rem;
  }
  .badge-fly-ic{
    font-size:4.2rem;line-height:1;
    filter:drop-shadow(0 6px 24px rgba(0,51,153,.35));
  }
  .badge-fly-lbl{
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:.95rem;
    color:var(--navy);background:#fff;
    padding:.25rem .85rem;border-radius:999px;
    box-shadow:0 3px 12px rgba(0,0,0,.15);
    white-space:nowrap;
  }
  body[data-theme="dark"] .badge-fly-lbl{background:#1e2d50;color:#e0e8ff;}

  body[data-theme="dark"] .badge-slot small{color:#a8bfe8;}
  body[data-theme="dark"] .badge-toggle{border-color:rgba(168,191,232,.2);color:#a8bfe8;}


  /* ---- FAQ ---- */
  .faq-section{margin:.4rem 0 1.2rem;}
  .faq-section > .handwritten{text-align:center;margin-bottom:.7rem;}
  .faq-cat{font-family:'Fredoka',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);opacity:.55;margin:1.1rem 0 .4rem .1rem;}
  body[data-theme="dark"] .faq-cat{color:#a8bfe8;}
  .faq-list{display:flex;flex-direction:column;gap:.45rem;}
  .faq-item{
    background:var(--card);border-radius:12px;
    box-shadow:0 2px 8px rgba(0,51,153,.06);
    overflow:hidden;
  }
  .faq-q{
    display:flex;justify-content:space-between;align-items:center;
    padding:.75rem 1rem;cursor:pointer;
    font-family:'Fredoka',sans-serif;font-weight:600;font-size:.92rem;
    color:var(--navy);list-style:none;
    user-select:none;
    transition:background .15s ease;
  }
  .faq-q:hover{background:rgba(0,51,153,.05);}
  body[data-theme="dark"] .faq-q:hover{background:rgba(168,191,232,.08);}
  .faq-q::-webkit-details-marker{display:none;}
  .faq-q::after{
    content:'＋';font-size:1rem;font-weight:400;
    flex-shrink:0;margin-left:.5rem;
    transition:transform .25s ease;color:#9aafcc;
  }
  details[open] .faq-q::after{transform:rotate(45deg);}
  .faq-a{
    padding:0 1rem .85rem;
    font-size:.87rem;color:#3d4f6e;line-height:1.55;
    border-top:1px solid rgba(0,51,153,.07);
    padding-top:.65rem;
  }
  .faq-item:hover{box-shadow:0 4px 14px rgba(0,51,153,.1);}
  body[data-theme="dark"] .faq-q{color:#cdd9f0;}
  body[data-theme="dark"] .faq-q::after{color:#5c7090;}
  body[data-theme="dark"] .faq-a{color:#9aafcc;border-top-color:rgba(168,191,232,.12);}
  body[data-theme="dark"] .faq-item{box-shadow:0 2px 8px rgba(0,0,0,.18);}

  /* ---- Easter egg ---- */
  .easter-overlay{
    position:fixed;inset:0;z-index:11000;pointer-events:none;
    background:conic-gradient(
      #FFCC33 0deg 36deg,#003399 36deg 72deg,#479554 72deg 108deg,
      #FF99CC 108deg 144deg,#FF3333 144deg 180deg,#FFCC33 180deg 216deg,
      #003399 216deg 252deg,#479554 252deg 288deg,#FF99CC 288deg 324deg,
      #FF3333 324deg 360deg
    );
    opacity:0;
    animation:easter-flash .9s ease forwards;
  }
  @keyframes easter-flash{
    0%  {opacity:0;}
    15% {opacity:.28;}
    50% {opacity:.18;}
    100%{opacity:0;}
  }
  .easter-toast{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);
    background:var(--navy);color:#fff;
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.3rem;
    padding:1rem 2rem;border-radius:20px;text-align:center;
    z-index:11001;pointer-events:none;
    box-shadow:0 8px 32px rgba(0,0,0,.35);
    animation:easter-pop .6s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  @keyframes easter-pop{
    0%  {transform:translate(-50%,-50%) scale(0);}
    70% {transform:translate(-50%,-50%) scale(1.08);}
    100%{transform:translate(-50%,-50%) scale(1);}
  }

  /* ---- Kopieer-toast ---- */
  .copy-toast{
    position:fixed;bottom:5.5rem;left:50%;transform:translateX(-50%);
    background:rgba(0,51,153,.82);
    backdrop-filter:blur(10px) saturate(160%);
    -webkit-backdrop-filter:blur(10px) saturate(160%);
    color:#fff;
    font-family:'Fredoka',sans-serif;font-size:.9rem;font-weight:600;
    padding:.42rem 1.1rem;border-radius:999px;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease,transform .2s ease;
    z-index:3000;white-space:nowrap;
    box-shadow:0 4px 14px rgba(0,0,0,.22);
    transform:translateX(-50%) translateY(6px);
  }
  .copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  body[data-theme="dark"] .copy-toast{background:#2a4a9a;}

  /* ---- Thema-wissel overlay ---- */
  .theme-overlay{
    position:fixed;inset:0;z-index:9997;pointer-events:none;
    opacity:0;
  }

  /* ---- Dark mode ---- */
  body[data-theme="dark"]{
    --card:#1a2438;
    --shadow:0 2px 18px rgba(0,0,0,.45);
    background:radial-gradient(ellipse 1100px 720px at 50% -12%,#2b3f6e 0%,#16223f 38%,#0d1626 68%);
    color:#cdd9f0;
  }
  body[data-theme="dark"] .bg-blob path{fill:rgba(255,255,255,.025);}
  body[data-theme="dark"] .brand-logo path{fill:#cdd9f0;}
  body[data-theme="dark"] .quicklinks a{color:#a8bfe8;}
  body[data-theme="dark"] .quicklinks a:hover{background:rgba(168,191,232,.12);color:#cdd9f0;}
  body[data-theme="dark"] .theme-pill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);}
  body[data-theme="dark"] .theme-pill:hover{background:rgba(255,255,255,.16);box-shadow:0 2px 8px rgba(0,0,0,.3);}
  body[data-theme="dark"] .theme-pill-moon{opacity:1;}
  body[data-theme="dark"] .theme-pill-sun{opacity:.35;}
  body[data-theme="dark"] .theme-pill-knob{left:.15rem;background:rgba(255,255,255,.92);}
  /* Op donkere kaarten is navy te donker: lichter blauw voor die ene kleur */
  body[data-theme="dark"] .quote-card:nth-child(5n+1){--accent:#7da0e8;}
  body[data-theme="dark"] .quote-text{color:#9aafcc;}
  body[data-theme="dark"] .quote-author{color:#cdd9f0;}
  body[data-theme="dark"] .photo-placeholder{border-color:rgba(168,191,232,.2);color:#5c7090;}
  body[data-theme="dark"] .countdown{background:rgba(255,220,80,.06);border-color:rgba(255,204,51,.2);}
  body[data-theme="dark"] .cd-title,body[data-theme="dark"] .cd-num{color:#f0da70;}
  body[data-theme="dark"] .cd-label,body[data-theme="dark"] .cd-sub{color:#b08c30;}
  body[data-theme="dark"] .cd-bubble{background:#1a2d60;}
  body[data-theme="dark"] .cd-bubble::after{border-top-color:#1a2d60;}
  body[data-theme="dark"] .progress-bar{background:rgba(255,255,255,.1);}
  body[data-theme="dark"] .progress{color:#a8bfe8;}
  body[data-theme="dark"] h1,body[data-theme="dark"] h2,body[data-theme="dark"] h3{color:#cdd9f0;}
  body[data-theme="dark"] .greet-pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:#cdd9f0;}
  body[data-theme="dark"] .back{background:rgba(255,255,255,.07);color:#cdd9f0;}
  body[data-theme="dark"] .back:hover{background:rgba(255,255,255,.12);}
  body[data-theme="dark"] .band-title{color:#fff;}
  body[data-theme="dark"] .skill-card h3,body[data-theme="dark"] .contact-card h3,
  body[data-theme="dark"] .api-person .info h3,body[data-theme="dark"] .rule-card h3{color:#cdd9f0;}
  body[data-theme="dark"] .skill-card p,body[data-theme="dark"] .contact-card p,
  body[data-theme="dark"] .api-person .info p,body[data-theme="dark"] .stadium-body p,
  body[data-theme="dark"] .rule-card p{color:#9aafcc;}
  body[data-theme="dark"] .contact-card a{color:#a8bfe8;}
  body[data-theme="dark"] .info-box{border-color:rgba(168,191,232,.2);}
  body[data-theme="dark"] .info-box p,body[data-theme="dark"] .info-box h3{color:#cdd9f0;}
  body[data-theme="dark"] .api-box{background:#1a2010;border-color:rgba(100,160,80,.3);}
  body[data-theme="dark"] .note{background:#2a1e06;border-color:#8a6a18;color:#cdd9f0;}
  body[data-theme="dark"] .option-btn{background:#1a2438;color:#cdd9f0;border-color:rgba(168,191,232,.2);}
  body[data-theme="dark"] .option-btn:hover:not(:disabled){border-color:#a8bfe8;}
  body[data-theme="dark"] .option-btn.selected:not(.is-correct){border-color:#9a7520;background:#2c220a;}
  body[data-theme="dark"] .option-btn.is-correct{border-color:#479554;background:#0d2416;}
  body[data-theme="dark"] .feedback{background:#111c2e;border-color:rgba(168,191,232,.2);color:#cdd9f0;}
  body[data-theme="dark"] .feedback.correct{background:#0a1e10;border-color:#479554;}
  body[data-theme="dark"] .next-btn{background:#2a4a9a;}
  body[data-theme="dark"] .next-btn:hover{background:#3355b0;}
  body[data-theme="dark"] .quiz-done{color:#cdd9f0;}
  body[data-theme="dark"] .handwritten{color:#cdd9f0;}
  body[data-theme="dark"] .hr-num{background:#1a2438;color:#cdd9f0;border-color:rgba(168,191,232,.25);}
  body[data-theme="dark"] .hr-num.active{background:#2a4a9a;color:#fff;border-color:#2a4a9a;}
  body[data-theme="dark"] .hr-num:hover:not(.active){background:#222f48;}
  body[data-theme="dark"] .hr-pagenav button{background:#2a4a9a;}
  body[data-theme="dark"] .hr-pagenav button:hover{background:#3355b0;}
  body[data-theme="dark"] .lb-list li{background:#1a2438;color:#cdd9f0;}
  body[data-theme="dark"] .lb-name{color:#cdd9f0;}
  body[data-theme="dark"] .lb-score{color:#5db870;}
  body[data-theme="dark"] .lb-list li.empty{background:#12192a;color:#5c7090;}
  body[data-theme="dark"] .lb-list li.you{outline-color:#8a6a18;}
  body[data-theme="dark"] .game-tab{background:#1a2438;color:#a8bfe8;border-color:rgba(168,191,232,.15);}
  body[data-theme="dark"] .game-tab.active{background:#2a4a9a;color:#fff;border-color:#2a4a9a;}
  body[data-theme="dark"] .name-entry input{background:#1a2438;color:#cdd9f0;border-color:rgba(168,191,232,.25);}
  body[data-theme="dark"] .steps li > strong{color:#cdd9f0;}
  body[data-theme="dark"] .steps li{color:#cdd9f0;}
  body[data-theme="dark"] .review-btn{color:#1a2438;}
  body[data-theme="dark"] .go-card{color:#cdd9f0;}
  body[data-theme="dark"] .go-card p{color:#9aafcc;}
  body[data-theme="dark"] .game-btn{background:#2a4a9a;}
  body[data-theme="dark"] .go-card .go-score{color:#cdd9f0;}
  body[data-theme="dark"] footer{border-top-color:rgba(255,255,255,.07);color:#6a80a0;}
  body[data-theme="dark"] footer a{color:#a8bfe8;}
  body[data-theme="dark"] .dot{background:rgba(168,191,232,.3);}
  body[data-theme="dark"] .dot.active{background:var(--pink);}
  body[data-theme="dark"] .avatar-circle{border-color:#2a4a9a;background:#1a2438;}
  body[data-theme="dark"] .avatar-loes{border-color:#cc2828;}
  body[data-theme="dark"] .bg-deco{opacity:.04;}
  body[data-theme="dark"] .lock-icon{color:#a8bfe8;}
  body[data-theme="dark"] .api-person .info a{color:#a8bfe8;}
  body[data-theme="dark"] .trophy-card{background:#1a2438;color:#cdd9f0;}
  body[data-theme="dark"] .trophy-card h2,body[data-theme="dark"] .trophy-card p{color:#cdd9f0;}
  body[data-theme="dark"] .trophy-close{background:#2a4a9a;}

  /* ---- Mobiel: compacter, 2-koloms tegels ---- */
  @media (max-width: 540px){
    main{padding:0 .9rem 4rem;}
    .top{padding:.6rem .6rem .25rem;}
    .header-left{left:.6rem;}
    .header-controls{right:.6rem;gap:.3rem;}
    .header-controls .ctrl-btn{width:1.85rem;height:1.85rem;font-size:.85rem;}
    .header-controls .theme-pill{width:3.7rem;height:1.7rem;}
    body:has(#hub.active) .brand-logo{height:2.9rem;}

    .tiles{gap:.6rem;margin-top:.6rem;}
    .tile{
      flex:1 1 140px;
      max-width:none;
      min-height:120px;
      padding:1rem .65rem;
      gap:.25rem;
    }
    .tile-icon{font-size:2.1rem;}
    .tile-title{font-size:.96rem;}
    .tile-desc{font-size:.78rem;}
    .tile-regio{flex-basis:100%;}

    .skill-grid{grid-template-columns:1fr;}
    .band-intro{font-size:.96rem;}
    .mod-body{padding-bottom:4rem;}
  }

  /* ---- Heel smalle schermen: voorkom overlap logo/knoppen ---- */
  @media (max-width: 360px){
    .top{padding:.6rem .45rem .25rem;}
    body:has(#hub.active) .brand-logo{height:2.4rem;}
    .brand-logo{height:2.2rem;}
    .header-controls{gap:.25rem;}
    .header-controls .theme-pill{width:3.2rem;height:1.6rem;}
    .header-controls .ctrl-btn{width:1.7rem;height:1.7rem;font-size:.8rem;}
    .quicklinks a{font-size:.7rem;padding:.26rem .55rem;}
  }

  /* ---- Zoek-overlay ---- */
  .search-overlay{
    position:fixed;inset:0;z-index:200;
    display:flex;justify-content:center;align-items:flex-start;
    padding:8vh 1rem 1rem;
    background:rgba(8,18,42,.4);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;transition:opacity .25s ease;
  }
  .search-overlay.open{opacity:1;}
  .search-overlay[hidden]{display:none;}
  .search-panel{
    width:100%;max-width:560px;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(22px) saturate(170%);
    -webkit-backdrop-filter:blur(22px) saturate(170%);
    border:1px solid rgba(255,255,255,.6);
    border-radius:22px;
    box-shadow:0 24px 60px rgba(0,40,90,.32);
    overflow:hidden;
    transform:translateY(-12px) scale(.98);
    transition:transform .28s cubic-bezier(.34,1.56,.64,1);
  }
  .search-overlay.open .search-panel{transform:translateY(0) scale(1);}
  body[data-theme="dark"] .search-panel{background:rgba(20,30,55,.85);border-color:rgba(168,191,232,.18);}
  .search-box{
    display:flex;align-items:center;gap:.5rem;
    padding:.7rem .9rem;
    border-bottom:1px solid rgba(0,51,153,.1);
  }
  body[data-theme="dark"] .search-box{border-bottom-color:rgba(168,191,232,.14);}
  .search-ic{font-size:1.1rem;opacity:.7;}
  #search-input{
    flex:1;border:none;background:none;outline:none;
    font-family:'Atkinson Hyperlegible',sans-serif;font-size:1rem;
    color:var(--navy);
  }
  body[data-theme="dark"] #search-input{color:#e6ecf8;}
  #search-input::placeholder{color:#8a98b5;}
  .search-close{
    border:none;background:rgba(0,51,153,.08);cursor:pointer;
    width:1.7rem;height:1.7rem;border-radius:50%;
    color:var(--navy);font-size:.85rem;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s;
  }
  .search-close:hover{background:rgba(0,51,153,.16);}
  body[data-theme="dark"] .search-close{background:rgba(255,255,255,.1);color:#cdd9f0;}
  .search-results{
    list-style:none;margin:0;padding:.4rem;
    max-height:min(52vh,420px);overflow-y:auto;
  }
  .search-results li{
    padding:.6rem .75rem;border-radius:12px;cursor:pointer;
    display:flex;gap:.6rem;align-items:flex-start;
    transition:background .12s;
  }
  .search-results li:hover,.search-results li.active{background:rgba(0,51,153,.08);}
  body[data-theme="dark"] .search-results li:hover,body[data-theme="dark"] .search-results li.active{background:rgba(168,191,232,.12);}
  .sr-ic{font-size:1.3rem;line-height:1.2;flex:0 0 auto;}
  .sr-text{min-width:0;}
  .sr-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;color:var(--navy);}
  body[data-theme="dark"] .sr-title{color:#e6ecf8;}
  .sr-cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);opacity:.5;}
  .sr-snip{font-size:.82rem;color:#3d4f6e;margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  body[data-theme="dark"] .sr-snip{color:#9aafcc;}
  .sr-mark{background:rgba(255,204,51,.45);border-radius:3px;padding:0 1px;}
  body[data-theme="dark"] .sr-mark{background:rgba(255,204,51,.3);}
  .search-hint,.search-empty{padding:.8rem 1rem 1rem;font-size:.85rem;color:#5b6b85;text-align:center;}
  body[data-theme="dark"] .search-hint,body[data-theme="dark"] .search-empty{color:#8a98b5;}
  @media (max-width:480px){
    .search-trigger .st-label{display:none;}
    .search-trigger{padding:.36rem .5rem;}
  }

  /* ---- Contextuele tooltip ---- */
  .has-tip{
    text-decoration:underline dotted rgba(0,51,153,.5);
    text-underline-offset:3px;cursor:help;
  }
  body[data-theme="dark"] .has-tip{text-decoration-color:rgba(168,191,232,.6);}
  #tooltip{
    position:fixed;z-index:4000;pointer-events:none;
    max-width:240px;
    background:rgba(20,30,55,.9);
    backdrop-filter:blur(10px) saturate(160%);
    -webkit-backdrop-filter:blur(10px) saturate(160%);
    color:#eaf0fb;
    font-family:'Atkinson Hyperlegible',sans-serif;font-size:.8rem;line-height:1.4;
    padding:.5rem .7rem;border-radius:10px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    opacity:0;transform:translateY(4px);
    transition:opacity .18s ease, transform .18s ease;
  }
  #tooltip.show{opacity:1;transform:translateY(0);}
  #tooltip::after{
    content:'';position:absolute;top:100%;left:var(--arrow,50%);
    transform:translateX(-50%);
    border:6px solid transparent;border-top-color:rgba(20,30,55,.9);
  }
  #tooltip.below::after{
    top:auto;bottom:100%;
    border-top-color:transparent;border-bottom-color:rgba(20,30,55,.9);
  }

  /* ---- Zen-modus (afleidingsvrij) ---- */
  .zen-exit{
    position:fixed;top:1rem;right:1rem;z-index:210;
    padding:.4rem .8rem;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.82rem;
    opacity:0;pointer-events:none;transform:translateY(-8px);
  }
  body.zen .zen-exit{opacity:1;pointer-events:auto;transform:translateY(0);}
  body.zen .top,
  body.zen .quicklinks,
  body.zen footer,
  body.zen .mini-badge-shelf,
  body.zen #trophy-btn,
  body.zen #back-to-top,
  body.zen .hub-divider,
  body.zen .bg-deco,
  body.zen .bg-blob{
    opacity:0;pointer-events:none;
    transition:opacity .5s ease;
  }
  body:not(.zen) .top,
  body:not(.zen) .quicklinks,
  body:not(.zen) footer{transition:opacity .5s ease;}
  body.zen main{
    max-width:680px;
    transition:max-width .5s ease;
  }
  @media (prefers-reduced-motion: reduce){
    .search-overlay,.search-panel,#tooltip,.zen-exit,
    body.zen .top,body.zen .quicklinks,body.zen footer,body.zen main{transition:none;}
  }

  /* ====== ZON-ANIMATIE (zonnetje-klik) ====== */
  #sun-rise{
    position:fixed;bottom:0;left:50%;
    transform:translateX(-50%) translateY(100%);
    width:260px;height:260px;border-radius:50%;
    background:radial-gradient(circle,#FFF9C4 0%,#FFDD44 50%,rgba(255,179,0,0) 100%);
    box-shadow:0 0 70px 50px rgba(255,220,50,.45),0 0 140px 90px rgba(255,204,51,.18);
    pointer-events:none;opacity:0;z-index:0;
  }
  #sun-rise.rising{animation:sun-rise-anim 5s ease-in-out forwards;}
  @keyframes sun-rise-anim{
    0%  {opacity:0;transform:translateX(-50%) translateY(100%);}
    18% {opacity:1;}
    42% {opacity:1;transform:translateX(-50%) translateY(-48vh);}
    58% {opacity:1;transform:translateX(-50%) translateY(-48vh);}
    82% {opacity:1;}
    100%{opacity:0;transform:translateX(-50%) translateY(100%);}
  }
  @media(prefers-reduced-motion:reduce){#sun-rise.rising{animation:none;}}

  /* ====== GLASS-KAART (herbruikbare utility) ====== */
  .glass-card{
    background:rgba(255,255,255,.65);
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    border:1.5px solid rgba(255,255,255,.85);
    border-radius:18px;
    box-shadow:0 4px 28px rgba(0,51,153,.09),inset 0 1px 0 rgba(255,255,255,.9);
    padding:1.1rem 1.3rem;
  }
  body[data-theme="dark"] .glass-card{
    background:rgba(20,34,66,.72);border-color:rgba(168,191,232,.18);
    box-shadow:0 4px 28px rgba(0,0,0,.32),inset 0 1px 0 rgba(168,191,232,.12);
  }

  /* ====== SITE-GECKO ====== */
  #site-gecko{
    position:fixed;z-index:200;pointer-events:auto;cursor:pointer;
    font-size:2.2rem;line-height:1;
    user-select:none;will-change:left,top,transform;
    filter:drop-shadow(1px 3px 5px rgba(0,0,0,.28));
    transition:filter .15s;
  }
  #site-gecko:hover{filter:drop-shadow(0 0 16px rgba(71,149,84,.9));}
  #gecko-bubble{
    position:fixed;z-index:201;pointer-events:none;
    background:rgba(20,30,55,.93);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);
    color:#eaf0fb;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.82rem;
    padding:.35rem .95rem;border-radius:999px;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 4px 18px rgba(0,0,0,.3);white-space:nowrap;
    opacity:0;transform:translateY(4px) scale(.9);
    transition:opacity .2s ease,transform .2s ease;
  }
  #gecko-bubble.show{opacity:1;transform:translateY(0) scale(1);}
  @media(prefers-reduced-motion:reduce){#site-gecko,#gecko-bubble{display:none;}}

  /* ====== FIXES ====== */
  /* Landscape mobile: witte randen weg */
  html,body{min-height:100dvh;}
  body{background-color:var(--bg);}
  body[data-theme="dark"]{background-color:#0d1629;}
  /* Tooltip: centreer tekst */
  #tooltip{text-align:center;}
  /* Trophy + back-to-top: uniforme stack rechtsonder */
  .trophy-btn{
    position:fixed;bottom:1rem;right:1rem;z-index:81;
    width:2.6rem;height:2.6rem;padding:0;font-size:1.25rem;
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transform:scale(.7) translateY(8px);
    transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1),background .2s,box-shadow .2s;
  }
  .trophy-btn.visible{opacity:1;pointer-events:auto;transform:scale(1) translateY(0);}
  .trophy-btn.visible:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 7px 20px rgba(0,51,153,.22);}
  .back-to-top{
    position:fixed;right:1rem;bottom:4.3rem;z-index:81;
    width:2.6rem;height:2.6rem;padding:0;
    font-size:1.2rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transform:scale(.7) translateY(8px);
    transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1),background .2s,box-shadow .2s;
  }
  .back-to-top.visible{opacity:1;pointer-events:auto;transform:scale(1) translateY(0);}
  .back-to-top.visible:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 7px 20px rgba(0,51,153,.22);}

  /* ====== MEER GLASS-EFFECTEN ====== */
  .note{
    background:rgba(255,248,225,.82);
    backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
    border-left:4px solid var(--gold);border-top:1px solid rgba(255,204,51,.3);
    border-right:1px solid rgba(255,204,51,.15);border-bottom:1px solid rgba(255,204,51,.15);
    border-radius:14px;padding:.9rem 1.1rem;font-size:.9rem;
    box-shadow:0 2px 16px rgba(180,140,0,.08),inset 0 1px 0 rgba(255,255,255,.7);
  }
  body[data-theme="dark"] .note{
    background:rgba(55,45,5,.5);border-left-color:#BFA020;border-color:rgba(191,160,32,.2);
    box-shadow:0 2px 14px rgba(0,0,0,.2);
  }
  .info-box{
    backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
    box-shadow:0 4px 24px rgba(0,51,153,.1),inset 0 1px 0 rgba(255,255,255,.7);
  }
  .api-box{
    backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
    box-shadow:0 4px 20px rgba(180,140,0,.08),inset 0 1px 0 rgba(255,255,255,.6);
  }
  .faq-item{
    backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
    box-shadow:0 2px 12px rgba(0,51,153,.07),inset 0 1px 0 rgba(255,255,255,.65);
  }
  .trophy-card{
    backdrop-filter:blur(28px) saturate(220%);-webkit-backdrop-filter:blur(28px) saturate(220%);
  }
  .skill-card,.rule-card{
    backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
    box-shadow:0 4px 16px rgba(0,51,153,.08),inset 0 1px 0 rgba(255,255,255,.6);
  }
  .band-card{
    backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  }

  /* ====== KLAAR VOOR DE START ====== */
  .kv-numbers{
    display:flex;gap:.4rem;padding:.55rem 1rem;
    background:rgba(242,245,250,.92);
    backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
    border-bottom:1px solid rgba(0,51,153,.08);
    position:sticky;top:60px;z-index:50;
  }
  body[data-theme="dark"] .kv-numbers{background:rgba(15,24,50,.95);border-color:rgba(168,191,232,.1);}
  .kv-num{
    width:2.4rem;height:2.4rem;border-radius:50%;
    border:2px solid rgba(0,51,153,.22);background:transparent;color:var(--navy);
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;
    cursor:pointer;transition:all .2s;
    display:flex;align-items:center;justify-content:center;
  }
  .kv-num.active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 2px 10px rgba(0,51,153,.25);}
  .kv-num:hover:not(.active){background:rgba(0,51,153,.08);}
  body[data-theme="dark"] .kv-num{color:#a8bfe8;border-color:rgba(168,191,232,.2);}
  body[data-theme="dark"] .kv-num.active{background:#2a4a9a;color:#fff;border-color:#4060c0;}
  .kv-page{display:none;}
  .kv-page.active{display:block;}

  /* Animatie shared */
  @keyframes kv-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .kv-page.active .mod-body{animation:kv-in .3s ease;}

  /* ---- Deel 1: Check-in emoties ---- */
  .emotion-grid{
    display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin:1.2rem 0;
  }
  @media(max-width:500px){.emotion-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));}}
  .emotion-btn{
    display:flex;flex-direction:column;align-items:center;gap:.2rem;
    padding:.7rem .2rem;border-radius:14px;
    border:2px solid rgba(0,51,153,.1);
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
    cursor:pointer;color:var(--navy);font-size:1.8rem;
    box-shadow:0 2px 10px rgba(0,51,153,.06),inset 0 1px 0 rgba(255,255,255,.8);
    transition:all .22s cubic-bezier(.34,1.56,.64,1);
  }
  .emotion-btn span{font-size:.68rem;font-weight:700;font-family:'Fredoka',sans-serif;display:block;color:var(--navy);}
  .emotion-btn:hover{transform:translateY(-3px) scale(1.07);box-shadow:0 8px 22px rgba(0,51,153,.14);}
  .emotion-btn.active{
    border-color:var(--navy);background:rgba(0,51,153,.11);
    transform:scale(1.1);box-shadow:0 6px 22px rgba(0,51,153,.22),inset 0 1px 0 rgba(255,255,255,.5);
  }
  body[data-theme="dark"] .emotion-btn{background:rgba(26,42,80,.7);border-color:rgba(168,191,232,.15);}
  body[data-theme="dark"] .emotion-btn span{color:#a8bfe8;}
  body[data-theme="dark"] .emotion-btn.active{background:rgba(42,74,154,.4);border-color:#4060c0;}
  .emotion-tip{display:flex;align-items:flex-start;gap:1rem;margin:1rem 0;}
  .emotion-tip-icon{font-size:2.6rem;line-height:1;flex-shrink:0;}
  .emotion-tip-text{font-size:.95rem;line-height:1.65;color:var(--navy);}
  body[data-theme="dark"] .emotion-tip-text{color:#c0d0ee;}

  /* ---- Deel 2: STADIUM spel ---- */
  .stad-game{display:flex;flex-direction:column;gap:.9rem;margin-top:.8rem;}
  .stad-pool{
    display:flex;flex-wrap:wrap;gap:.4rem;padding:.7rem;border-radius:14px;
    background:rgba(0,51,153,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1.5px dashed rgba(0,51,153,.18);min-height:3rem;
  }
  body[data-theme="dark"] .stad-pool{background:rgba(168,191,232,.04);border-color:rgba(168,191,232,.14);}
  .stad-chip{
    padding:.32rem .78rem;border-radius:999px;
    background:rgba(255,255,255,.78);backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);
    border:1.5px solid rgba(0,51,153,.14);color:var(--navy);font-size:.78rem;
    cursor:pointer;transition:all .17s;
    box-shadow:0 1px 6px rgba(0,51,153,.07),inset 0 1px 0 rgba(255,255,255,.8);
    text-align:left;line-height:1.3;
  }
  .stad-chip:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,51,153,.12);}
  .stad-chip.selected{background:var(--navy);color:#fff;border-color:var(--navy);transform:scale(1.03);}
  .stad-chip.placed{opacity:.22;pointer-events:none;cursor:default;}
  .stad-chip.dragging{opacity:.38;transform:scale(.93);box-shadow:none;}
  body[data-theme="dark"] .stad-chip{background:rgba(26,42,80,.8);border-color:rgba(168,191,232,.18);color:#a8bfe8;}
  body[data-theme="dark"] .stad-chip.selected{background:#2a4a9a;color:#fff;}
  .stad-rows{display:flex;flex-direction:column;gap:.5rem;}
  .stad-row{
    border-radius:14px;border:1.5px solid rgba(0,51,153,.1);
    background:rgba(255,255,255,.72);backdrop-filter:blur(12px) saturate(150%);
    -webkit-backdrop-filter:blur(12px) saturate(150%);
    box-shadow:0 2px 10px rgba(0,51,153,.05),inset 0 1px 0 rgba(255,255,255,.8);
    overflow:hidden;transition:border-color .35s,box-shadow .35s,background .35s;
  }
  body[data-theme="dark"] .stad-row{background:rgba(20,34,66,.7);border-color:rgba(168,191,232,.1);}
  .stad-row.complete{
    border-color:var(--gold);
    background:linear-gradient(135deg,rgba(255,248,200,.58),rgba(255,255,255,.75));
    animation:gold-glow 2.5s ease-in-out 3;
  }
  body[data-theme="dark"] .stad-row.complete{background:linear-gradient(135deg,rgba(80,60,0,.38),rgba(26,42,80,.7));}
  @keyframes gold-glow{
    0%,100%{box-shadow:0 0 0 2px rgba(255,204,51,.5),0 4px 18px rgba(255,204,51,.2);}
    50%{box-shadow:0 0 0 3px var(--gold),0 6px 32px rgba(255,204,51,.4);}
  }
  .stad-row-inner{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;}
  .stad-letter-badge{
    width:2.1rem;height:2.1rem;border-radius:50%;
    color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.1rem;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.18);
  }
  .stad-slots{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0;}
  .stad-slot{
    padding:.28rem .65rem;border-radius:8px;
    border:1.5px dashed rgba(0,51,153,.2);color:rgba(0,51,153,.38);
    font-size:.78rem;cursor:pointer;transition:all .17s;
    background:transparent;text-align:left;width:100%;
    font-family:'Atkinson Hyperlegible',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .stad-slot:hover,.stad-slot.drag-over{background:rgba(0,51,153,.08);border-style:solid;border-color:rgba(0,51,153,.4);}
  .stad-slot.filled{border-style:solid;border-color:rgba(71,149,84,.4);color:var(--navy);background:rgba(71,149,84,.07);}
  .stad-slot.stad-wrong{border-style:solid;border-color:var(--red);color:var(--red);background:rgba(220,50,50,.08);animation:kv-shake .4s ease;}
  .stad-slot-title.filled{font-weight:700;font-size:.82rem;}
  body[data-theme="dark"] .stad-slot{border-color:rgba(168,191,232,.18);color:rgba(168,191,232,.38);}
  body[data-theme="dark"] .stad-slot.filled{color:#a8bfe8;background:rgba(71,149,84,.12);border-color:rgba(71,149,84,.3);}
  body[data-theme="dark"] .stad-slot.stad-wrong{border-color:#e05050;color:#e05050;background:rgba(220,50,50,.1);}
  .stad-reveal{
    padding:.55rem .75rem .65rem;border-top:1px solid rgba(0,51,153,.08);
    font-size:.87rem;line-height:1.55;color:var(--navy);
    animation:kv-in .35s ease;
  }
  body[data-theme="dark"] .stad-reveal{color:#c0d0ee;border-top-color:rgba(168,191,232,.08);}
  .stad-shake{animation:kv-shake .4s ease;}
  @keyframes kv-shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

  /* ---- Deel 3: Activiteitenkaart ---- */
  .act-pool{
    display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem;padding:.65rem;
    border-radius:14px;background:rgba(0,51,153,.04);
    border:1.5px dashed rgba(0,51,153,.14);
  }
  body[data-theme="dark"] .act-pool{background:rgba(168,191,232,.04);border-color:rgba(168,191,232,.12);}
  .act-chip{
    padding:.3rem .72rem;border-radius:999px;
    background:rgba(255,255,255,.76);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1.5px solid rgba(0,51,153,.13);color:var(--navy);font-size:.78rem;
    cursor:pointer;transition:all .17s;
    box-shadow:0 1px 6px rgba(0,51,153,.07),inset 0 1px 0 rgba(255,255,255,.8);
  }
  .act-chip:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,51,153,.12);}
  .act-chip.selected{background:var(--navy);color:#fff;border-color:var(--navy);}
  .act-chip.placed{opacity:.22;pointer-events:none;text-decoration:line-through;}
  body[data-theme="dark"] .act-chip{background:rgba(26,42,80,.8);border-color:rgba(168,191,232,.18);color:#a8bfe8;}
  body[data-theme="dark"] .act-chip.selected{background:#2a4a9a;color:#fff;}
  .act-map-container{display:flex;gap:.5rem;align-items:stretch;}
  .act-y-labels{
    display:flex;flex-direction:column;justify-content:space-between;
    writing-mode:vertical-rl;text-orientation:mixed;
    font-size:.62rem;font-weight:700;font-family:'Fredoka',sans-serif;
    color:rgba(0,51,153,.42);padding:.1rem 0;
    flex-shrink:0;
  }
  .act-y-labels span:first-child{transform:rotate(180deg);}
  .act-map{
    flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.45rem;
    border-radius:16px;padding:.5rem;
    background:rgba(255,255,255,.55);backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    border:1.5px solid rgba(0,51,153,.1);
    box-shadow:0 4px 20px rgba(0,51,153,.07);
    min-height:200px;
  }
  body[data-theme="dark"] .act-map{background:rgba(20,34,66,.6);border-color:rgba(168,191,232,.1);}
  .act-x-labels{
    display:flex;justify-content:space-between;
    font-size:.62rem;font-weight:700;font-family:'Fredoka',sans-serif;
    color:rgba(0,51,153,.42);margin:.3rem 0 0 2.2rem;
  }
  body[data-theme="dark"] .act-y-labels,.act-x-labels{color:rgba(168,191,232,.45);}
  .act-zone{
    border-radius:10px;border:2px dashed rgba(0,51,153,.18);
    padding:.4rem;min-height:72px;
    display:flex;flex-direction:column;gap:.28rem;
    cursor:pointer;transition:all .2s;
    background:rgba(255,255,255,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  /* Per-kwadrant kleuren */
  .act-zone[data-zone="long-low"]  {background:rgba(0,51,153,.07); border-color:rgba(0,51,153,.25);}
  .act-zone[data-zone="long-high"] {background:rgba(71,149,84,.08); border-color:rgba(71,149,84,.3);}
  .act-zone[data-zone="short-low"] {background:rgba(255,180,0,.08); border-color:rgba(200,145,0,.28);}
  .act-zone[data-zone="short-high"]{background:rgba(220,50,50,.07); border-color:rgba(220,50,50,.25);}
  .act-zone:hover,.act-zone.drag-over{border-style:solid;filter:brightness(1.05);box-shadow:0 4px 18px rgba(0,0,0,.1);}
  .act-zone[data-zone="long-low"]:hover,.act-zone[data-zone="long-low"].drag-over  {border-color:rgba(0,51,153,.55);}
  .act-zone[data-zone="long-high"]:hover,.act-zone[data-zone="long-high"].drag-over{border-color:rgba(71,149,84,.6);}
  .act-zone[data-zone="short-low"]:hover,.act-zone[data-zone="short-low"].drag-over{border-color:rgba(200,145,0,.6);}
  .act-zone[data-zone="short-high"]:hover,.act-zone[data-zone="short-high"].drag-over{border-color:rgba(220,50,50,.55);}
  body[data-theme="dark"] .act-zone{background:rgba(168,191,232,.05);border-color:rgba(168,191,232,.14);}
  .act-zone-label{
    font-size:.62rem;font-weight:700;font-family:'Fredoka',sans-serif;
    color:rgba(0,51,153,.45);text-transform:uppercase;letter-spacing:.04em;
  }
  .act-zone[data-zone="long-high"] .act-zone-label{color:rgba(71,149,84,.7);}
  .act-zone[data-zone="short-low"] .act-zone-label{color:rgba(160,115,0,.7);}
  .act-zone[data-zone="short-high"] .act-zone-label{color:rgba(200,40,40,.7);}
  body[data-theme="dark"] .act-zone-label{color:rgba(168,191,232,.38);}
  .act-zone-items{display:flex;flex-wrap:wrap;gap:.25rem;}
  .act-placed{
    padding:.18rem .55rem;border-radius:999px;
    color:#fff;font-size:.7rem;font-weight:600;
    animation:kv-in .3s ease;
  }
  .act-placed[data-zone="long-low"] {background:var(--navy);box-shadow:0 2px 6px rgba(0,51,153,.35);}
  .act-placed[data-zone="long-high"]{background:var(--green);box-shadow:0 2px 6px rgba(71,149,84,.35);}
  .act-placed[data-zone="short-low"]{background:#C89000;box-shadow:0 2px 6px rgba(200,145,0,.35);}
  .act-placed[data-zone="short-high"]{background:var(--red);box-shadow:0 2px 6px rgba(220,50,50,.35);}
  .act-placed.wrong{background:var(--red);animation:kv-in .2s ease,kv-shake .4s ease .15s;}
  .act-zone.shake{animation:kv-shake .4s ease;}

  /* ---- Deel 4: De 4 W's ---- */
  .wees-intro{font-size:.9rem;line-height:1.62;margin-bottom:1.1rem;color:rgba(0,51,153,.72);}
  body[data-theme="dark"] .wees-intro{color:#a8bfe8;}
  .wees-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-bottom:1.1rem;}
  @media(max-width:600px){.wees-cols{grid-template-columns:repeat(2,1fr);}}
  .wees-col{display:flex;flex-direction:column;}
  .wees-col-title{
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;
    color:var(--navy);text-align:center;padding:.3rem;
    background:rgba(0,51,153,.1);border-radius:10px 10px 0 0;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);letter-spacing:.05em;
  }
  body[data-theme="dark"] .wees-col-title{background:rgba(168,191,232,.1);color:#c0d0ee;}
  .wees-col-items{
    display:flex;flex-direction:column;gap:.25rem;
    max-height:210px;overflow-y:auto;padding:.35rem;
    border-radius:0 0 12px 12px;
    border:1.5px solid rgba(0,51,153,.1);border-top:none;
    background:rgba(255,255,255,.52);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
    scrollbar-width:thin;scrollbar-color:rgba(0,51,153,.2) transparent;
  }
  body[data-theme="dark"] .wees-col-items{background:rgba(20,34,66,.52);border-color:rgba(168,191,232,.1);}
  .wees-chip{
    padding:.28rem .5rem;border-radius:8px;
    background:transparent;border:1px solid transparent;
    color:var(--navy);font-size:.77rem;cursor:pointer;text-align:left;transition:all .14s;
  }
  .wees-chip:hover{background:rgba(0,51,153,.06);border-color:rgba(0,51,153,.12);}
  .wees-chip.active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 2px 8px rgba(0,51,153,.2);}
  body[data-theme="dark"] .wees-chip{color:#a8bfe8;}
  body[data-theme="dark"] .wees-chip:hover{background:rgba(168,191,232,.08);}
  body[data-theme="dark"] .wees-chip.active{background:#2a4a9a;color:#fff;}
  .wees-btn-wrap{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;margin-bottom:.9rem;}
  .wees-story{margin:.4rem 0 1rem;}
  .wees-story-label{
    font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
    color:rgba(0,51,153,.45);margin-bottom:.45rem;font-family:'Fredoka',sans-serif;
  }
  body[data-theme="dark"] .wees-story-label{color:rgba(168,191,232,.45);}
  .wees-story-main{
    font-family:'Fredoka',sans-serif;font-size:1.12rem;font-weight:600;
    line-height:1.5;color:var(--navy);margin-bottom:.6rem;
  }
  body[data-theme="dark"] .wees-story-main{color:#c0d0ee;}
  .wees-story-hint{font-size:.87rem;color:rgba(0,51,153,.62);}
  body[data-theme="dark"] .wees-story-hint{color:#a8bfe8;}

  /* ---- Print: huisreglement afdrukken ---- */
  @media print {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
      box-shadow: none !important;
    }

    body { background: white !important; color: #111; }

    /* Verberg alle navigatie en decoratie */
    .top, .quicklinks, .back, .countdown, .intro,
    .tiles, .hub-extra, .hr-numbers, .hr-pagenav,
    .bg-blob, .bg-deco, .deco, footer,
    #trophy-banner, .confetti-piece, .spark { display: none !important; }

    /* Toon alleen de actieve module */
    .view { display: none !important; }
    .view.active { display: block !important; }

    /* Huisreglement: toon alle hoofdstukken */
    .hr-page { display: block !important; }
    .hr-page + .hr-page { break-before: page; page-break-before: always; }

    /* Grote achtergrondcijfers weghalen */
    .hr-chapnum { display: none !important; }

    /* Paginabalk vereenvoudigen: kleurige rand i.p.v. achtergrond */
    .page-band {
      background: none !important;
      border-bottom: 2.5pt solid #003399 !important;
      padding: .4rem 0 .8rem !important;
      margin-bottom: 1rem !important;
      color: #003399 !important;
    }
    .page-band::before { display: none !important; }
    .page-green  { border-bottom-color: #479554 !important; color: #479554 !important; }
    .page-pink   { border-bottom-color: #b5006a !important; color: #b5006a !important; }
    .page-gold   { border-bottom-color: #9a7200 !important; color: #9a7200 !important; }
    .page-red    { border-bottom-color: #cc0000 !important; color: #cc0000 !important; }

    /* Breedte: gebruik volledige printbreedte */
    main { max-width: 100% !important; padding: 0 !important; }

    /* Kaartrasters in 2 kolommen */
    .skill-grid, .rule-grid, .api-people {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Kaarten: simpele rand i.p.v. schaduw */
    .skill-card, .rule-card, .contact-card, .stadium-item,
    .info-box, .api-box, .note, .quiz-card {
      border: 1pt solid #ddd !important;
      break-inside: avoid;
    }

    /* Quiz: verberg "volgende"-knop */
    .next-btn { display: none !important; }

    /* Typografie iets groter voor print */
    body { font-size: 10.5pt; line-height: 1.55; }
    .band-title { font-size: 22pt !important; }
  }