:root{--m3-page-bg: linear-gradient(180deg, #2b1a4e, #4a2a7a);--m3-accent: #ffd166;--m3-accent-dark: #b98a1e;--m3-text: #ffffff;--m3-board-bg: rgba(0, 0, 0, .28);--m3-cell-a: rgba(255, 255, 255, .06);--m3-cell-b: rgba(255, 255, 255, .13);--m3-deco: rgba(255, 255, 255, .1);--m3-font: "Fredoka", "Nunito", system-ui, sans-serif;--m3-tile: 56px}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--m3-page-bg);font-family:var(--m3-font);-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}@media (prefers-reduced-motion: reduce){.m3-tile--kleur .m3-tile__body,.m3-tile--bom .m3-tile__body,.m3-tile--lijnH .m3-tile__body:before,.m3-tile--lijnV .m3-tile__body:before,.m3-timebar.is-laag,.m3-home-piece{animation:none!important}}.m3-root{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;color:var(--m3-text);--sat: env(safe-area-inset-top, 0px);--sar: env(safe-area-inset-right, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px)}.m3-root [hidden]{display:none!important}.m3-deco{position:absolute;top:-10%;right:-10%;bottom:-10%;left:-10%;pointer-events:none;background:radial-gradient(circle at 12% 18%,var(--m3-deco) 0 90px,transparent 91px),radial-gradient(circle at 85% 12%,var(--m3-deco) 0 60px,transparent 61px),radial-gradient(circle at 8% 78%,var(--m3-deco) 0 70px,transparent 71px),radial-gradient(circle at 90% 82%,var(--m3-deco) 0 110px,transparent 111px),radial-gradient(circle at 55% 95%,var(--m3-deco) 0 50px,transparent 51px)}.m3-hud{position:absolute;z-index:5;top:calc(clamp(64px,9.5vh,94px) + var(--sat));left:calc(10px + var(--sal));right:calc(10px + var(--sar));display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;pointer-events:none}.m3-chip{display:inline-flex;align-items:center;gap:6px;background:#00000059;border-radius:999px;padding:5px 14px;font-size:clamp(14px,2.6vh,19px);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.4)}.m3-chip .m3-chip__emoji{font-size:1.15em}.m3-hud__goals{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.m3-timebar{flex:1 1 auto;min-width:0;order:-1;display:inline-flex;align-items:center;gap:10px;background:#00000080;border-radius:999px;padding:6px 14px 6px 12px;box-shadow:0 4px 14px #00000059}.m3-timebar__klok{font-size:clamp(17px,3.2vh,26px)}.m3-timebar__klok .m3-img{width:1.3em;height:1.3em;display:block}.m3-chip--score .m3-chip__emoji .m3-img{width:1.2em;height:1.2em}.m3-timebar__track{flex:1;height:clamp(13px,2.5vh,20px);background:#ffffff29;border-radius:999px;box-shadow:inset 0 2px 5px #0006;overflow:hidden}.m3-timebar__fill{height:100%;width:100%;background:linear-gradient(180deg,#a5e878,#5fbf3f);border-radius:999px;box-shadow:inset 0 -4px #0000002e,inset 0 3px #ffffff59;transition:width .15s linear,background .3s}.m3-timebar__sec{min-width:2ch;text-align:right;font-size:clamp(17px,3.2vh,26px);font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(0,0,0,.45)}.m3-timebar.is-laag .m3-timebar__fill{background:linear-gradient(180deg,#ff8a8d,#e5484d)}.m3-timebar.is-laag .m3-timebar__sec{color:#ff9598}.m3-timebar.is-laag{animation:m3-tijd-laag .5s ease-in-out infinite alternate}@keyframes m3-tijd-laag{to{box-shadow:0 0 0 5px #e5484d80,0 4px 14px #00000059}}@media (max-width: 560px){.m3-timebar{flex-basis:100%}}.m3-btn--speel{font-size:clamp(22px,4.4vh,34px);padding:18px 54px}.m3-home-pieces{display:flex;gap:clamp(8px,1.8vh,16px);justify-content:center;flex-wrap:wrap}.m3-home-piece{width:clamp(48px,9.5vh,76px);height:clamp(48px,9.5vh,76px);border-radius:22%;display:flex;align-items:center;justify-content:center;background:var(--tile-kleur, #999);box-shadow:inset 0 -5px #00000038,inset 0 3px #ffffff59,0 4px 10px #0000004d;font-size:clamp(26px,5.4vh,44px);line-height:1;animation:m3-figuur .5s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i, 0) * 70ms)}.m3-home-piece:nth-child(odd){rotate:-5deg}.m3-home-piece:nth-child(2n){rotate:4deg}.m3-home-piece .m3-img{width:74%;height:74%;object-fit:contain}.m3-chip--goal.is-done{background:#2ea043bf}.m3-chip--goal.is-bump{animation:m3-bump .3s ease}@keyframes m3-bump{50%{transform:scale(1.18)}}.m3-hud__right{display:flex;align-items:center;gap:8px}.m3-chip--score{font-size:clamp(20px,3.6vh,30px);font-weight:800;padding:7px 18px;background:#00000080}.m3-board{position:absolute;z-index:2;background:var(--m3-board-bg);border-radius:14px;box-shadow:0 10px 30px #00000059;touch-action:none}.m3-cell{position:absolute;width:var(--m3-tile);height:var(--m3-tile);border-radius:10px}.m3-cell--a{background:var(--m3-cell-a)}.m3-cell--b{background:var(--m3-cell-b)}.m3-tile{position:absolute;left:0;top:0;z-index:3;width:var(--m3-tile);height:var(--m3-tile);padding:calc(var(--m3-tile) * .07);transition:transform .18s ease;will-change:transform;cursor:pointer;touch-action:none}.m3-tile__body{width:100%;height:100%;border-radius:22%;display:flex;align-items:center;justify-content:center;background:var(--tile-kleur, #999);box-shadow:inset 0 calc(var(--m3-tile) * -.07) 0 #00000038,inset 0 calc(var(--m3-tile) * .05) 0 #ffffff59,0 2px 5px #00000040;font-size:calc(var(--m3-tile) * .52);line-height:1;position:relative;overflow:hidden}.m3-tile__emoji{filter:drop-shadow(0 2px 1px rgba(0,0,0,.25))}.m3-tile.is-falling{transition:transform .3s cubic-bezier(.3,1.35,.55,1)}.m3-tile.is-shuffling{transition:transform .5s ease-in-out}.m3-tile.is-selected{z-index:4}.m3-tile.is-selected .m3-tile__body{transform:scale(1.12);box-shadow:0 0 0 3px #fff,0 0 14px 4px #ffffff8c,inset 0 calc(var(--m3-tile) * -.07) 0 #00000038;animation:m3-selected .6s ease-in-out infinite alternate}@keyframes m3-selected{0%{transform:scale(1.08)}to{transform:scale(1.16)}}.m3-tile.is-hint .m3-tile__body{animation:m3-wiebel .5s ease-in-out infinite}@keyframes m3-wiebel{0%,to{transform:rotate(0) scale(1)}25%{transform:rotate(-6deg) scale(1.06)}75%{transform:rotate(6deg) scale(1.06)}}.m3-tile.is-wiggle .m3-tile__body{animation:m3-nee .4s ease}@keyframes m3-nee{0%,to{transform:translate(0)}20%{transform:translate(-14%) rotate(-5deg)}50%{transform:translate(12%) rotate(5deg)}80%{transform:translate(-7%)}}.m3-tile.is-popping{z-index:4;pointer-events:none}.m3-tile.is-popping .m3-tile__body{animation:m3-pop .24s ease forwards}@keyframes m3-pop{30%{transform:scale(1.25);opacity:1}to{transform:scale(.1);opacity:0}}.m3-tile.is-born{z-index:4}.m3-tile.is-born .m3-tile__body{animation:m3-born .45s cubic-bezier(.3,1.6,.5,1)}@keyframes m3-born{0%{transform:scale(.3)}65%{transform:scale(1.3)}to{transform:scale(1)}}.m3-tile--lijnH .m3-tile__body:before,.m3-tile--lijnV .m3-tile__body:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:repeating-linear-gradient(180deg,transparent 0,transparent 22%,rgba(255,255,255,.5) 22%,rgba(255,255,255,.5) 34%);animation:m3-glim 1.1s linear infinite}.m3-tile--lijnV .m3-tile__body:before{background:repeating-linear-gradient(90deg,transparent 0,transparent 22%,rgba(255,255,255,.5) 22%,rgba(255,255,255,.5) 34%)}@keyframes m3-glim{0%,to{opacity:.55}50%{opacity:.95}}.m3-tile__badge{position:absolute;right:4%;bottom:4%;width:38%;height:38%;border-radius:50%;background:#fffffff2;color:#333;display:flex;align-items:center;justify-content:center;font-size:calc(var(--m3-tile) * .22);font-weight:700;box-shadow:0 1px 3px #00000059}.m3-tile--bom .m3-tile__body{animation:m3-bom-puls .9s ease-in-out infinite}@keyframes m3-bom-puls{50%{filter:brightness(1.35)}}.m3-tile--kleur .m3-tile__body{animation:m3-kleur-puls 1.2s ease-in-out infinite}@keyframes m3-kleur-puls{0%,to{box-shadow:0 0 0 2px #ffd75e8c,0 0 10px 3px #ffd75e59,inset 0 calc(var(--m3-tile) * -.07) 0 #00000038}50%{box-shadow:0 0 0 3px #ffd75ee6,0 0 20px 7px #ffd75e8c,inset 0 calc(var(--m3-tile) * -.07) 0 #00000038}}.m3-particle{position:absolute;z-index:6;pointer-events:none;width:calc(var(--m3-tile) * .16);height:calc(var(--m3-tile) * .16);border-radius:50%;background:var(--p-kleur, #fff);animation:m3-particle .5s ease-out forwards}@keyframes m3-particle{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}.m3-beam{position:absolute;z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);border-radius:999px;animation:m3-beam .35s ease-out forwards}@keyframes m3-beam{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}.m3-boom{position:absolute;z-index:5;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,210,80,.55) 55%,transparent 72%);animation:m3-boom .4s ease-out forwards}.m3-boom--kleur{background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,215,94,.7) 40%,rgba(158,108,235,.45) 62%,transparent 75%);animation-duration:.55s}@keyframes m3-boom{0%{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.25)}}.m3-float{position:absolute;z-index:7;pointer-events:none;transform:translate(-50%,-50%);font-weight:700;color:#fff;font-size:calc(var(--m3-tile) * .6);text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 14px rgba(0,0,0,.3);animation:m3-float .9s ease-out forwards;white-space:nowrap}.m3-float--groot{font-size:calc(var(--m3-tile) * .95)}@keyframes m3-float{0%{opacity:1;margin-top:0}70%{opacity:1}to{opacity:0;margin-top:calc(var(--m3-tile) * -1.1)}}.m3-fly{position:fixed;z-index:40;pointer-events:none;font-size:calc(var(--m3-tile) * .45);transition:transform .55s cubic-bezier(.4,-.1,.6,1),opacity .55s;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}.m3-toast{position:absolute;z-index:15;left:50%;top:18%;transform:translate(-50%);background:#0009;color:#fff;font-size:clamp(15px,2.8vh,22px);font-weight:600;padding:10px 22px;border-radius:999px;animation:m3-toast 1.6s ease forwards;white-space:nowrap}@keyframes m3-toast{0%{opacity:0;margin-top:-14px}15%,80%{opacity:1;margin-top:0}to{opacity:0}}.m3-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;background:var(--m3-overlay-bg, var(--m3-page-bg));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.8vh,18px);text-align:center;padding:clamp(10px,2.5vh,28px);padding-top:calc(clamp(10px,2.5vh,28px) + var(--sat));padding-bottom:calc(clamp(10px,2.5vh,28px) + var(--sab));color:var(--m3-text);overflow:hidden auto}.m3-overlay h1{margin:0;line-height:1.05;font-size:clamp(28px,min(8vh,10vw),64px);font-weight:700;letter-spacing:1px;text-shadow:0 4px 0 rgba(0,0,0,.28),0 8px 20px rgba(0,0,0,.3)}.m3-sub{font-size:clamp(13px,2.4vh,19px);font-weight:500;background:#00000040;padding:clamp(5px,1vh,9px) clamp(14px,3vw,26px);border-radius:999px;max-width:min(92vw,560px)}.m3-levels{display:flex;gap:clamp(8px,1.6vw,14px);flex-wrap:wrap;justify-content:center;max-width:min(94vw,620px)}.m3-level-btn{font-family:var(--m3-font);cursor:pointer;width:clamp(58px,9vh,76px);height:clamp(58px,9vh,76px);border:none;border-radius:16px;background:#ffffff24;box-shadow:inset 0 0 0 2px #ffffff40,0 4px 10px #00000040;color:var(--m3-text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .08s}.m3-level-btn:not(:disabled):active{transform:scale(.92)}.m3-level-btn__nr{font-size:clamp(20px,3.4vh,28px);font-weight:700;line-height:1}.m3-level-btn__stars{font-size:clamp(10px,1.6vh,13px);letter-spacing:1px;color:var(--m3-accent)}.m3-level-btn:disabled{opacity:.45;cursor:default}.m3-level-btn.is-endless{width:auto;padding:0 clamp(14px,3vw,22px)}.m3-intro__level{font-size:clamp(15px,2.6vh,20px);font-weight:600;letter-spacing:6px;text-transform:uppercase;opacity:.85}.m3-intro__goals{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.m3-doelkaart{display:flex;flex-direction:column;align-items:center;gap:4px;background:#00000047;border-radius:18px;padding:clamp(10px,2vh,18px) clamp(16px,3vw,26px);min-width:92px;animation:m3-kaart .5s cubic-bezier(.3,1.5,.5,1) backwards}.m3-doelkaart:nth-child(2){animation-delay:.1s}.m3-doelkaart:nth-child(3){animation-delay:.2s}@keyframes m3-kaart{0%{transform:scale(.3);opacity:0}}.m3-doelkaart__emoji{font-size:clamp(30px,6vh,46px);line-height:1.1}.m3-doelkaart__aantal{font-size:clamp(16px,3vh,24px);font-weight:700}.m3-stars{display:flex;gap:clamp(8px,2vw,16px)}.m3-stars span{font-size:clamp(38px,8vh,64px);filter:grayscale(1);opacity:.35;text-shadow:0 4px 10px rgba(0,0,0,.3)}.m3-stars span.is-vol{filter:none;opacity:1;animation:m3-ster .5s cubic-bezier(.3,1.6,.5,1) backwards}.m3-stars span:nth-child(2){animation-delay:.18s}.m3-stars span:nth-child(3){animation-delay:.36s}@keyframes m3-ster{0%{transform:scale(0) rotate(-40deg)}}.m3-score-label{font-size:clamp(13px,2.2vh,18px);letter-spacing:8px;text-transform:uppercase;opacity:.85;font-weight:500}.m3-score{font-size:clamp(38px,9vh,84px);line-height:1;font-weight:700;text-shadow:0 5px 0 rgba(0,0,0,.3),0 10px 22px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}.m3-record{font-size:clamp(15px,2.7vh,22px);font-weight:600;color:var(--m3-accent);animation:m3-record-pop .5s ease}@keyframes m3-record-pop{0%{transform:scale(0)}70%{transform:scale(1.2)}to{transform:scale(1)}}.m3-btn{font-family:var(--m3-font);font-weight:600;font-size:clamp(15px,2.7vh,21px);cursor:pointer;letter-spacing:.5px;border:none;border-radius:16px;padding:clamp(8px,1.6vh,13px) clamp(18px,4vw,40px);color:var(--m3-accent-dark);background:var(--m3-accent);border-bottom:6px solid var(--m3-accent-dark);box-shadow:0 6px 14px #00000047;transition:transform .08s}.m3-btn:active{transform:translateY(4px);border-bottom-width:2px}.m3-btn.secundair{color:#fff;background:#ffffff29;border-bottom-color:#0000004d}.m3-btn-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.m3-themes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.m3-theme-btn{font-family:var(--m3-font);font-weight:600;font-size:clamp(12px,2.2vh,16px);border:2px solid rgba(255,255,255,.4);border-radius:999px;background:#ffffff1f;color:var(--m3-text);padding:5px 16px;cursor:pointer}.m3-theme-btn.actief{background:var(--m3-accent);color:var(--m3-accent-dark);border-color:transparent}.m3-root img{pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.m3-tile__emoji img{width:calc(var(--m3-tile) * .8);height:calc(var(--m3-tile) * .8);object-fit:contain;display:block;filter:drop-shadow(0 2px 1px rgba(0,0,0,.25))}.m3-img{width:1.1em;height:1.1em;object-fit:contain;vertical-align:-.18em}.m3-chip__emoji .m3-img{display:inline-block}.m3-doelkaart__emoji .m3-img{width:1.05em;height:1.05em;display:inline-block}.m3-level-btn__stars .m3-img{width:1.05em;height:1.05em;vertical-align:-.22em}.m3-fly .m3-img{width:1.2em;height:1.2em;display:block}.m3-stars .m3-img{width:1em;height:1em;display:block}.m3-stars.heeft-img span{filter:none;opacity:1}.m3-stars.heeft-img span:not(.is-vol){opacity:.85;animation:none}.m3-figuur{max-height:clamp(90px,20vh,230px);max-width:min(56vw,260px);object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));animation:m3-figuur .5s cubic-bezier(.3,1.5,.5,1) backwards}@keyframes m3-figuur{0%{transform:scale(.5) translateY(20px);opacity:0}}.m3-corners{position:absolute;z-index:30;top:calc(10px + var(--sat));right:calc(12px + var(--sar));display:flex;gap:10px}.m3-corner{width:clamp(46px,7.5vh,76px);height:clamp(46px,7.5vh,76px);border-radius:50%;border:none;cursor:pointer;background:#0000004d;color:#fff;font-size:clamp(20px,3.6vh,26px);display:flex;align-items:center;justify-content:center;transition:transform .08s;padding:0}.m3-corner:active{transform:scale(.9)}.m3-corner--img{background:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}.m3-corner--img .m3-img{width:100%;height:100%;object-fit:contain;pointer-events:none}.m3-corner--muziek.is-uit{opacity:.45;filter:grayscale(1)}
