:root{--so-font: "Nunito", system-ui, sans-serif;--so-titelfont: "Fredoka", "Nunito", system-ui, sans-serif;--so-accent: #ffd23f;--so-accent-dark: #6b3a05;--so-rood: #c8201a;--so-rood-dark: #7a0f0a;--so-tekst: #fff6e5;--so-ballon: #fffaf0;--so-ballon-tekst: #3a1a08;--so-paneel: rgba(255, 246, 225, .92);--so-sys: clamp(46px, 7.5vmin, 68px);--so-item: clamp(88px, 21vmin, 180px);--sat: env(safe-area-inset-top, 0px);--sab: env(safe-area-inset-bottom, 0px)}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#5a0c0a}.so-root{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;font-family:var(--so-font);color:var(--so-tekst);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}.so-root [hidden]{display:none!important}.so-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:#5a0c0a center / cover no-repeat}.so-bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#3c10088c,#3c1008b3)}.so-sys{position:absolute;top:calc(8px + var(--sat));right:8px;display:flex;gap:6px;z-index:60}.so-sys__btn{width:var(--so-sys);height:var(--so-sys);border-radius:50%;border:3px solid #8a5a00;cursor:pointer;padding:0;background:linear-gradient(180deg,#ffe27a,#f4b92c);color:#5a3400;box-shadow:0 4px #9a6400,0 6px 10px #00000059;display:grid;place-items:center;transition:transform .08s}.so-sys__btn svg{width:58%;height:58%}.so-sys__btn:active{transform:translateY(3px);box-shadow:0 1px #9a6400,0 3px 6px #0000004d}.so-hud{position:absolute;top:calc(12px + var(--sat));left:14px;right:calc(4 * var(--so-sys) + 40px);z-index:20;display:flex;flex-direction:column;gap:5px}.so-hud__reeks{font-weight:800;font-size:clamp(15px,2.6vmin,22px);text-shadow:0 2px 0 rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.so-dots{display:flex;gap:5px}.so-dot{width:11px;height:11px;border-radius:50%;background:#ffffff4d;box-shadow:inset 0 0 0 1.5px #00000040}.so-dot.klaar{background:var(--so-accent)}.so-dot.nu{background:#fff;transform:scale(1.2)}.so-speel{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;padding:calc(var(--so-sys) + 14px + var(--sat)) 12px calc(10px + var(--sab));gap:8px;z-index:10}.so-top{display:flex;align-items:flex-end;gap:8px;flex:0 0 auto}.so-piet{height:clamp(84px,17vmin,170px);width:auto;flex:0 0 auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));transform-origin:50% 100%}.so-piet.dans{animation:so-dans .4s ease-in-out 3}@keyframes so-dans{0%,to{transform:rotate(0) translateY(0)}25%{transform:rotate(-7deg) translateY(-8px)}75%{transform:rotate(7deg) translateY(-8px)}}.so-ballon{position:relative;flex:1;background:var(--so-ballon);color:var(--so-ballon-tekst);border-radius:20px;padding:clamp(10px,2vmin,18px) clamp(14px,2.6vmin,24px);font-weight:800;font-size:clamp(17px,3vmin,27px);line-height:1.25;box-shadow:0 6px 16px #0000004d;margin-bottom:clamp(12px,3vmin,30px);text-wrap:balance}.so-ballon.tip{background:#fff1c2}.so-ballon.pop{animation:so-ballonpop .35s cubic-bezier(.2,1.4,.4,1)}@keyframes so-ballonpop{0%{transform:scale(.92)}to{transform:scale(1)}}.so-ballon:before{content:"";position:absolute;left:-12px;bottom:16px;border:10px solid transparent;border-right-color:var(--so-ballon);border-left:0}.so-ballon.tip:before{border-right-color:#fff1c2}.so-veld{position:relative;flex:1;min-height:110px;border-radius:22px;background:var(--so-paneel);box-shadow:inset 0 0 0 4px #ffffffb3,0 8px 22px #00000040;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:6px;padding:8px}.so-items{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;gap:clamp(8px,2vmin,22px);flex:1;min-height:0}.so-items--rij{gap:clamp(4px,1.4vmin,14px)}.so-items--rij .so-item{width:calc(var(--so-item) * .85);height:calc(var(--so-item) * .85)}.so-items--rij .so-item.klein{width:calc(var(--so-item) * .6);height:calc(var(--so-item) * .6)}.so-item{width:var(--so-item);height:var(--so-item);display:grid;place-items:center;cursor:grab;touch-action:none;position:relative;z-index:1;animation:so-pop .35s cubic-bezier(.2,1.6,.4,1) backwards;will-change:transform}.so-item.klein{width:calc(var(--so-item) * .62);height:calc(var(--so-item) * .62)}.so-item>svg,.so-item>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));pointer-events:none}.so-item>img.so-sprite{width:88%;height:88%}.so-item.sleep{z-index:50;cursor:grabbing;animation:none}.so-item.sleep>svg,.so-item.sleep>img{filter:drop-shadow(0 14px 14px rgba(0,0,0,.4))}.so-item.terug{transition:transform .4s cubic-bezier(.2,1.2,.4,1)}.so-item.wiebel>svg,.so-item.wiebel>img{animation:so-wiebel .45s ease}@keyframes so-wiebel{0%,to{transform:rotate(0)}20%{transform:rotate(-12deg)}45%{transform:rotate(10deg)}70%{transform:rotate(-6deg)}}@keyframes so-pop{0%{transform:scale(0)}to{transform:scale(1)}}.so-patroon{display:flex;justify-content:center;align-items:center;gap:clamp(4px,1.2vmin,12px);flex:0 0 auto;padding:6px 4px;border-radius:16px;background:#5a1e0a1f}.so-patroon__cel,.so-doel--slot{width:calc(var(--so-item) * .72);height:calc(var(--so-item) * .72);display:grid;place-items:center}.so-patroon__cel>svg,.so-patroon__cel>img,.so-slot>svg,.so-slot>img{width:100%;height:100%;object-fit:contain}.so-slot{width:100%;height:100%;border-radius:16px;border:4px dashed #b46a1e;background:#ffffff8c;display:grid;place-items:center;transition:transform .15s,background .15s}.so-slot .so-label__svg{width:70%;height:70%}.so-slot.gevuld{border-style:solid;border-color:#3fae4a;background:#aaf0b499}.so-doel--slot.hover .so-slot{transform:scale(1.1);background:#ffe696e6}.so-veld.met-patroon .so-items{flex:1}.so-doelen{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,3vmin,40px);flex:0 0 auto;padding:4px 0 0}.so-doel{position:relative;width:clamp(104px,24vmin,220px);display:grid;place-items:center;transition:transform .15s}.so-doel__img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));pointer-events:none}.so-doel.hover{transform:scale(1.08)}.so-doel.bounce{animation:so-bounce .45s cubic-bezier(.3,1.5,.5,1)}@keyframes so-bounce{0%{transform:scale(1)}35%{transform:scale(1.12,.9)}70%{transform:scale(.96,1.06)}to{transform:scale(1)}}.so-doel.nee{animation:so-schud .35s}@keyframes so-schud{0%,to{transform:translate(0)}25%{transform:translate(-7px)}75%{transform:translate(7px)}}.so-label{position:absolute;left:50%;bottom:10%;transform:translate(-50%);width:50%;aspect-ratio:1;border-radius:18%;background:#fff6e5;border:3px solid #3a1a08;box-shadow:0 4px 8px #0000004d;display:grid;place-items:center;pointer-events:none}.so-label__svg{width:86%;height:86%}.so-label__cat{position:relative;width:100%;height:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;padding:8%;box-sizing:border-box}.so-label__cat img{width:42%;height:42%;object-fit:contain}.so-label__mond{position:absolute;top:4%;left:50%;transform:translate(-50%);width:34%;height:34%}.so-label__cat:has(.so-label__mond) img{margin-top:30%;width:38%;height:38%}.so-sterretje{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;z-index:55;pointer-events:none;animation:so-sterretje .75s ease-out forwards}.so-sterretje svg{width:100%;height:100%}@keyframes so-sterretje{0%{transform:translate(0) scale(.4);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(120deg);opacity:0}}.so-toast{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:25;pointer-events:none;font-family:var(--so-titelfont);font-weight:700;font-size:clamp(30px,7vmin,64px);color:#fff;letter-spacing:.5px;-webkit-text-stroke:clamp(3px,.7vmin,6px) #2a0a05;paint-order:stroke fill;text-shadow:0 4px 0 rgba(0,0,0,.35);animation:so-toast 1.3s ease forwards;text-align:center;max-width:90vw}.so-toast.goed{color:#7dff8a}@keyframes so-toast{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-80%)}}.so-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.8vmin,18px);padding:calc(12px + var(--sat)) 16px calc(16px + var(--sab));overflow:hidden;background:radial-gradient(120% 90% at 50% -10%,#b8301f,#7d140e 55%,#4a0a07 120%)}.so-hero{height:clamp(150px,36vmin,360px);width:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4));animation:so-zweef 3s ease-in-out infinite}@keyframes so-zweef{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.so-titel{margin:0;font-family:var(--so-titelfont);font-weight:700;font-size:clamp(42px,10vmin,100px);color:var(--so-accent);-webkit-text-stroke:clamp(4px,1vmin,9px) var(--so-accent-dark);paint-order:stroke fill;text-shadow:0 5px 0 #3a0906,0 10px 20px rgba(0,0,0,.4);line-height:1;transform:rotate(-2deg);text-align:center}.so-kop{margin:0;font-family:var(--so-titelfont);font-weight:700;font-size:clamp(26px,5.5vmin,48px);color:var(--so-accent);-webkit-text-stroke:clamp(2px,.6vmin,5px) var(--so-accent-dark);paint-order:stroke fill;text-shadow:0 3px 0 #3a0906}.so-knop{font-family:var(--so-titelfont);font-weight:700;cursor:pointer;border:none;border-radius:20px;background:var(--so-rood);color:#fff;font-size:clamp(20px,3.6vmin,32px);padding:clamp(10px,2vmin,16px) clamp(20px,4.5vmin,40px);border-bottom:6px solid var(--so-rood-dark);box-shadow:0 6px 14px #0000004d;transition:transform .08s,filter .15s}.so-knop:active{transform:translateY(3px);border-bottom-width:3px}.so-knop--spelen,.so-knop--volgende{background:linear-gradient(180deg,#ffe27a,#f4b92c);color:var(--so-accent-dark);border-bottom-color:#a8780e}.so-knop--spelen{font-size:clamp(28px,6vmin,50px);padding:clamp(10px,2vmin,16px) clamp(34px,8vmin,70px)}.so-knop--licht{background:#ffffff38;border-bottom-color:#0000004d;font-size:clamp(16px,2.8vmin,22px)}.so-knoprij{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.so-reeksen{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(6px,1.4vmin,14px);max-width:1000px}.so-reeks{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:clamp(100px,17.5vmin,170px);padding:6px 4px;border-radius:18px;border:3px solid rgba(255,255,255,.4);background:#fff6e124;color:var(--so-tekst);font-family:var(--so-font);cursor:pointer;transition:transform .08s,background .15s}.so-reeks:active{transform:scale(.96)}.so-reeks:hover{background:#fff6e13d}.so-reeks__nr{position:absolute;top:-8px;left:-8px;width:28px;height:28px;border-radius:50%;background:var(--so-accent);color:var(--so-accent-dark);font-weight:800;font-size:15px;display:grid;place-items:center;border:2px solid var(--so-accent-dark)}.so-reeks__plaatje{width:76%;aspect-ratio:1;border-radius:14px;background:#5a1e0a59;display:grid;place-items:center}.so-reeks__plaatje svg{width:90%;height:90%}.so-reeks__naam{font-weight:500;font-size:clamp(11px,1.9vmin,15px);line-height:1.1;text-align:center;min-height:2.2em;display:flex;align-items:center}.so-reeks__sterren{display:flex;gap:1px}.so-reeks__sterren .so-ster{width:clamp(16px,3vmin,24px);height:clamp(16px,3vmin,24px)}.so-eind__sterren{display:flex;gap:6px}.so-eind__sterren .so-ster{width:clamp(44px,9vmin,84px);height:clamp(44px,9vmin,84px);animation:so-pop .5s backwards}.so-eind__sterren .so-ster:nth-child(2){animation-delay:.15s}.so-eind__sterren .so-ster:nth-child(3){animation-delay:.3s}.so-sint{height:clamp(130px,30vmin,300px);width:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}.so-eind__titel{margin:0;font-family:var(--so-titelfont);font-weight:700;font-size:clamp(30px,7vmin,64px);color:var(--so-accent);-webkit-text-stroke:clamp(3px,.8vmin,7px) var(--so-accent-dark);paint-order:stroke fill;text-shadow:0 4px 0 #3a0906;text-align:center}.so-eind__sub{font-weight:500;font-size:clamp(14px,2.6vmin,20px);opacity:.95;text-align:center}@media (orientation: landscape) and (min-width: 700px){.so-speel{padding-left:24px;padding-right:24px}.so-piet{height:clamp(100px,22vmin,220px)}}@media (max-width: 480px){.so-hud__reeks{font-size:13px}.so-doel{width:clamp(96px,28vw,118px)}.so-reeks{width:104px}}@media (max-height: 640px){.so-piet{height:clamp(70px,15vmin,120px)}.so-ballon{font-size:clamp(15px,2.8vmin,22px);margin-bottom:8px}.so-doel{width:clamp(90px,20vmin,150px)}}