:root{--bub-page-bg: linear-gradient(180deg, #0b3954 0%, #087e8b 100%);--bub-accent: #ffd166;--bub-accent-dark: #b98a1e;--bub-text: #ffffff;--bub-font: "Fredoka", "Nunito", system-ui, sans-serif;--bub-font-title: var(--bub-font)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bub-page-bg);font-family:var(--bub-font);-webkit-user-select:none;user-select:none;touch-action:none}.bub-root{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}.bub-root [hidden]{display:none!important}.bub-root canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none}.bub-hud{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;color:#fff}.bub-hud[hidden]{display:none}.bub-hud__score{position:absolute;top:10px;left:16px;font-size:clamp(24px,4.5vh,38px);font-weight:600;text-shadow:0 2px 0 rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.3)}.bub-hud__score--clock{font-family:var(--bub-font-title);font-variant-numeric:tabular-nums;font-weight:700;padding:4px 16px 4px 38px;border-radius:999px;background:#00000047;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='13' r='8'/><path d='M12 13V9M9 2h6M18.5 6.5l1.5-1.5'/></svg>");background-repeat:no-repeat;background-position:9px 50%;background-size:22px 22px}.bub-hud__center{position:absolute;top:10px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.bub-hud__title{font-size:clamp(16px,2.8vh,24px);font-weight:600;letter-spacing:1px;text-shadow:0 2px 0 rgba(0,0,0,.35);white-space:nowrap}.bub-hud__pips{display:flex;gap:5px}.bub-hud__pips span{width:9px;height:9px;border-radius:50%;background:#ffffffe6;box-shadow:0 1px 3px #0006}.bub-hud__pips span.leeg{background:#ffffff40}.bub-hud__pips.warn span{background:#ff5d5d;animation:bub-warn .45s ease-in-out infinite alternate}.bub-hud__pips.warn span.leeg{background:#ff5d5d59}@keyframes bub-warn{0%{transform:scale(1)}to{transform:scale(1.35)}}.bub-hud__menu{position:absolute;top:max(12px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));pointer-events:auto;font-family:var(--bub-font);font-size:clamp(13px,2.2vh,17px);font-weight:600;color:var(--bub-accent-dark);background:#ffffffeb;border:none;border-radius:999px;padding:7px 18px;cursor:pointer;box-shadow:0 3px 8px #0000004d;transition:transform .08s}.bub-hud__menu:active{transform:scale(.94)}.bub-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;background:var(--bub-page-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.8vh,20px);text-align:center;padding:clamp(10px,2.5vh,28px);color:var(--bub-text);overflow:hidden auto}.bub-overlay[hidden]{display:none}.bub-overlay h1{margin:0;line-height:1.05;font-family:var(--bub-font-title);font-size:clamp(30px,min(8vh,11vw),76px);font-weight:700;letter-spacing:1px;text-shadow:0 4px 0 rgba(0,0,0,.28),0 8px 20px rgba(0,0,0,.3)}.bub-hero{width:clamp(150px,34vh,300px);max-width:74vw;height:auto;object-fit:contain;margin-bottom:clamp(-6px,-1vh,2px);filter:drop-shadow(0 10px 22px rgba(0,0,0,.4));animation:bub-hero-float 3.6s ease-in-out infinite;pointer-events:none}.bub-hero[hidden]{display:none}@keyframes bub-hero-float{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}.bub-overlay .bub-sub{font-size:clamp(14px,2.6vh,20px);font-weight:500;background:#00000040;padding:clamp(5px,1vh,9px) clamp(16px,3vw,28px);border-radius:999px}.bub-overlay .bub-score-label{font-size:clamp(13px,2.2vh,19px);letter-spacing:8px;text-transform:uppercase;opacity:.85;font-weight:500}.bub-overlay .bub-score{font-family:var(--bub-font-title);font-variant-numeric:tabular-nums;font-size:clamp(46px,12vh,110px);line-height:1;font-weight:700;text-shadow:0 5px 0 rgba(0,0,0,.3),0 10px 22px rgba(0,0,0,.35)}.bub-overlay .bub-record{font-size:clamp(15px,2.7vh,23px);font-weight:600;color:var(--bub-accent);animation:bub-pop .5s ease}@keyframes bub-pop{0%{transform:scale(0)}70%{transform:scale(1.2)}to{transform:scale(1)}}.bub-btn{font-family:var(--bub-font-title);font-weight:600;font-size:clamp(15px,2.7vh,22px);cursor:pointer;letter-spacing:.5px;border:none;border-radius:16px;padding:clamp(8px,1.6vh,14px) clamp(20px,4vw,44px);color:var(--bub-accent-dark);background:var(--bub-accent);border-bottom:6px solid var(--bub-accent-dark);box-shadow:0 6px 14px #00000047;transition:transform .08s}.bub-btn:active{transform:translateY(4px);border-bottom-width:2px}.bub-btn.secundair{color:#fff;background:#ffffff29;border-bottom-color:#0000004d}.bub-btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.bub-levels{display:grid;grid-template-columns:repeat(5,auto);gap:clamp(8px,1.4vh,14px);max-width:92vw;justify-content:center}.bub-level-btn{font-family:var(--bub-font);font-weight:700;font-size:clamp(17px,3vh,26px);width:clamp(44px,min(9vh,15vw),72px);height:clamp(44px,min(9vh,15vw),72px);border:none;border-radius:16px;cursor:pointer;color:var(--bub-accent-dark);background:var(--bub-accent);border-bottom:5px solid var(--bub-accent-dark);box-shadow:0 4px 10px #00000047;position:relative;transition:transform .08s}.bub-level-btn:active{transform:translateY(3px);border-bottom-width:2px}.bub-level-btn.dicht{color:#ffffff8c;background:#ffffff24;border-bottom-color:#00000040;cursor:default}.bub-level-btn .vink{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:#3fbf6f;color:#fff;font-size:14px;line-height:22px;box-shadow:0 2px 5px #00000059}.bub-levels--time{grid-template-columns:repeat(3,auto)}.bub-levels--time .bub-level-btn{width:clamp(78px,min(15vh,26vw),118px);height:clamp(60px,min(11vh,20vw),84px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px}.bub-levels--time .bub-level-btn .nr{font-family:var(--bub-font-title);font-weight:700;font-size:clamp(20px,3.6vh,30px);line-height:1}.bub-levels--time .bub-level-btn .tijd{font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(11px,1.9vh,15px);opacity:.82}.bub-levels--time .bub-level-btn.dicht .tijd{display:none}.bub-themes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.bub-theme-btn{font-family:var(--bub-font);font-weight:600;font-size:clamp(13px,2.2vh,17px);cursor:pointer;border:2px solid rgba(255,255,255,.5);border-radius:999px;padding:6px 18px;color:#fff;background:#ffffff1f;transition:transform .08s}.bub-theme-btn:active{transform:scale(.94)}.bub-theme-btn.actief{background:#ffffffeb;color:var(--bub-accent-dark);border-color:#fff}.bub-corner{position:absolute;bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:30;width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffffe6;box-shadow:0 4px 10px #00000059;transition:transform .08s}.bub-corner:active{transform:scale(.92)}.bub-corner[hidden]{display:none}.bub-corner--mute{right:16px}.bub-corner--fs{right:82px}@font-face{font-family:Nunito;font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/nunito.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito;font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/nunito-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/fredoka-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/fredoka-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}:root{--bub-font: "Nunito", system-ui, sans-serif;--bub-font-title: "Fredoka", "Nunito", system-ui, sans-serif}.bub-overlay h1{letter-spacing:.5px}.bub-sub--uitleg{white-space:pre-line;max-width:min(94vw,620px);line-height:1.35;font-size:clamp(13px,2.2vh,18px)}@media (max-width: 460px){.bub-hud__title{display:none}}