:root{--qp-page-bg: linear-gradient(165deg, #b35411, #e8821e);--qp-accent: #ffd166;--qp-accent-dark: #9a6a12;--qp-text: #ffffff;--qp-good: #3fae4c;--qp-bad: #e03d3d;--qp-font: "Fredoka", "Baloo 2", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#241205;font-family:var(--qp-font);-webkit-user-select:none;user-select:none;touch-action:none}.qp-root{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;--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);font-family:var(--qp-font);color:var(--qp-text)}.qp-root [hidden]{display:none!important}.qp-root canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none}.qp-hud{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none}.qp-sys{position:absolute;top:calc(10px + var(--sat));right:calc(10px + var(--sar));display:flex;gap:8px}.qp-icon-btn{pointer-events:auto;width:clamp(42px,7.5vmin,56px);height:clamp(42px,7.5vmin,56px);border-radius:12px;border:none;border-bottom:4px solid rgba(0,0,0,.35);cursor:pointer;font-size:clamp(19px,3.4vmin,26px);background:#1e1004c7;color:#fff;display:flex;align-items:center;justify-content:center}.qp-icon-btn:active{transform:scale(.92)}.qp-icon-btn.qp-icon-img{background:none;border-bottom:none;padding:0}.qp-icon-btn.qp-icon-img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}.qp-icon-btn.qp-muziek.is-uit svg,.qp-icon-btn.qp-muziek.is-uit img{opacity:.35;filter:grayscale(.7)}.qp-room-label{position:absolute;top:calc(10px + var(--sat));left:50%;transform:translate(-50%);background:#1e1004c7;border-radius:999px;padding:7px 18px;font-size:clamp(14px,2.6vmin,19px);font-weight:700;white-space:nowrap}@media (max-width: 600px){.qp-room-label{left:calc(10px + var(--sal));transform:none}}.qp-time{position:absolute;right:calc(12px + var(--sar));bottom:calc(12px + var(--sab));background:#fffdf5;color:#241205;border:3px solid #241205;border-bottom-width:6px;border-bottom-color:#ef6079;border-radius:10px;padding:6px 14px;font-size:clamp(19px,3.6vmin,30px);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.04em}.qp-time.warn{color:var(--qp-bad);animation:qp-tick .5s steps(2) infinite}@keyframes qp-tick{50%{opacity:.5}}.qp-hint-balloon{position:absolute;left:50%;bottom:calc(18px + var(--sab));transform:translate(-50%);max-width:min(560px,86vw);background:#fff7e6;color:#4a2c08;border:3px solid #241205;border-radius:14px;padding:10px 18px;font-size:clamp(14px,2.6vmin,19px);font-weight:700;text-align:center;box-shadow:0 4px #0000004d}.qp-touch{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;pointer-events:none}.qp-move-wrap{position:absolute;left:calc(12px + var(--sal));bottom:calc(12px + var(--sab));display:flex;gap:12px}.qp-move-zone{pointer-events:auto}.qp-move-btn,.qp-jump-btn{width:clamp(64px,11vmin,84px);height:clamp(64px,11vmin,84px);border-radius:18px;background:#1e10049e;border:3px solid rgba(255,255,255,.5);color:#fff;font-size:clamp(24px,4.4vmin,34px);display:flex;align-items:center;justify-content:center}.qp-jump-zone{position:absolute;right:calc(14px + var(--sar));bottom:calc(66px + var(--sab));pointer-events:auto}.qp-jump-btn{width:clamp(84px,15vmin,110px);height:clamp(84px,15vmin,110px);border-radius:50%;background:var(--qp-accent);border:4px solid rgba(30,16,4,.85);color:#241205}.qp-move-zone:active .qp-move-btn,.qp-jump-zone:active .qp-jump-btn{transform:scale(.92)}.qp-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;background:var(--qp-page-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;overflow-y:auto}.qp-hero{width:clamp(110px,22vmin,190px);max-height:32vh;object-fit:contain;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25))}.qp-pixel{image-rendering:pixelated}.qp-hero.bob{animation:qp-bob 2.4s ease-in-out infinite}@keyframes qp-bob{50%{transform:translateY(-8px)}}.qp-emoji{font-size:clamp(56px,12vmin,96px)}.qp-title{font-size:clamp(30px,7vmin,56px);font-weight:800;letter-spacing:.02em;text-shadow:0 4px 0 rgba(0,0,0,.28)}.qp-title.klein{font-size:clamp(24px,5vmin,40px)}.qp-sub{max-width:560px;font-size:clamp(14px,2.8vmin,19px);font-weight:600;opacity:.94}.qp-best{font-size:clamp(13px,2.5vmin,17px);font-weight:700;opacity:.9}.qp-note{font-size:clamp(12px,2.2vmin,15px);opacity:.8}.qp-btn{pointer-events:auto;min-width:220px;border:none;border-radius:16px;padding:15px 30px;font-family:var(--qp-font);font-size:clamp(18px,3.6vmin,26px);font-weight:800;cursor:pointer;color:#241205;background:var(--qp-accent);border-bottom:6px solid var(--qp-accent-dark)}.qp-btn:active{transform:translateY(3px);border-bottom-width:3px}.qp-btn.secondary{background:#ffffffeb;border-bottom-color:#0000004d}.qp-btn.ghost{background:#1e100466;color:#fff;border-bottom-color:#00000073;min-width:0;font-size:clamp(14px,2.6vmin,18px);padding:10px 22px}.qp-keuze{display:flex;flex-direction:column;gap:8px;align-items:center}.qp-keuze-label{font-size:clamp(14px,2.6vmin,18px);font-weight:700}.qp-keuze-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:480px}.qp-chip{pointer-events:auto;min-width:52px;padding:9px 14px;border:3px solid rgba(30,16,4,.55);border-radius:12px;background:#ffffffe6;color:#241205;font-family:var(--qp-font);font-size:clamp(15px,3vmin,21px);font-weight:800;cursor:pointer}.qp-chip.actief{background:var(--qp-accent);border-color:#241205;box-shadow:0 3px #0000004d}.qp-grid{display:grid;grid-template-columns:repeat(6,minmax(52px,76px));gap:10px;justify-content:center}.qp-grid-btn{aspect-ratio:1;border:3px solid rgba(30,16,4,.6);border-radius:12px;background:#ffffffeb;color:#241205;font-family:var(--qp-font);font-size:clamp(17px,3.4vmin,24px);font-weight:800;cursor:pointer}.qp-grid-btn:not(.dicht):active{transform:scale(.93)}.qp-grid-btn.dicht{opacity:.55;cursor:default}.qp-grid.veel{grid-template-columns:repeat(10,minmax(0,54px));gap:8px;width:min(94vw,640px)}.qp-grid.veel .qp-grid-btn{border-width:2px;border-radius:10px;font-size:clamp(12px,2.4vmin,19px)}.qp-stats{display:flex;gap:14px}.qp-stat{background:#1e100459;border-radius:14px;padding:12px 22px;display:flex;flex-direction:column;gap:2px}.qp-stat b{font-size:clamp(22px,4.6vmin,34px)}.qp-stat span{font-size:clamp(12px,2.2vmin,15px);opacity:.9}.qp-record{font-size:clamp(16px,3vmin,22px);font-weight:800;color:var(--qp-accent);text-shadow:0 2px 0 rgba(0,0,0,.35);animation:qp-bob 1.6s ease-in-out infinite}