/* ===== Scheurtje design-systeem ===== */
:root{
 /* kleur – licht */
 --bg:#F6F4EF;--surface:#FFFFFF;--surface-2:#EFECE5;--text:#1B1C1F;--text-2:#57534C;--border:#E2DDD3;
 --primary:#B3122B;--on-primary:#FFFFFF;--primary-soft:#FBE9EB;--accent:#F2B705;--on-accent:#1B1C1F;--accent-soft:#FDF3D3;
 --success:#1B7A45;--success-soft:#E2F3E9;--danger:#B3261E;--info:#1D5FA8;--info-soft:#E3EDF9;
 --hl-1:#1D5FA8;--hl-2:#1B7A45;--hl-3:#7A3FB8;--hl-0:#B3122B;
 /* typografie (systeemfonts, geen download) */
 --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
 --font-display:ui-serif,Georgia,"Times New Roman",serif;
 --fs-xs:.75rem;--fs-sm:.875rem;--fs-md:1rem;--fs-lg:1.125rem;--fs-xl:1.375rem;--fs-2xl:1.75rem;--fs-hero:8.5rem;
 --lh:1.45;
 /* spacing 4-pt */
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
 --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-pill:999px;
 --sh-1:0 1px 2px rgba(27,28,31,.06),0 1px 3px rgba(27,28,31,.08);
 --sh-2:0 4px 12px rgba(27,28,31,.08),0 2px 4px rgba(27,28,31,.05);
 --sh-3:0 12px 32px rgba(27,28,31,.14);
 --tap:48px;--ease:cubic-bezier(.2,.8,.2,1);--dur:.22s;
 color-scheme:light;
}
[data-theme=dark]{
 --bg:#121316;--surface:#1C1E22;--surface-2:#262930;--text:#F1EFEA;--text-2:#B4B0A8;--border:#33363D;
 --primary:#FF7A85;--on-primary:#1B1C1F;--primary-soft:#3A2226;--accent:#F5C542;--on-accent:#1B1C1F;--accent-soft:#3A3220;
 --success:#5CC98B;--success-soft:#1D3328;--danger:#FF8A80;--info:#7FB2F0;--info-soft:#1E2A3A;
 --hl-1:#3D7BC4;--hl-2:#2E8B57;--hl-3:#8D5BC9;--hl-0:#C23A4A;
 --sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 4px 14px rgba(0,0,0,.45);--sh-3:0 12px 32px rgba(0,0,0,.6);
 color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:var(--fs-md)/var(--lh) var(--font);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
body{min-height:100dvh;padding-bottom:calc(76px + env(safe-area-inset-bottom));transition:background var(--dur),color var(--dur)}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--info);outline-offset:2px;border-radius:var(--r-sm)}
.ic{width:22px;height:22px;flex:none}.ic-sm{width:16px;height:16px}.ic-xl{width:48px;height:48px}
.muted{color:var(--text-2)}.small{font-size:var(--fs-sm)}.center{text-align:center}

/* app bar */
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--s3) + env(safe-area-inset-top)) var(--s5) var(--s3);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:var(--s2);font-weight:800;font-size:var(--fs-xl);letter-spacing:-.02em}.brand img{border-radius:8px}

/* layout */
.view{padding:var(--s2) var(--s5) var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.view.enter{animation:enter .28s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(8px)}}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);padding-top:var(--s2)}
.page-head h1{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.sub{color:var(--text-2);font-size:var(--fs-sm);margin-top:2px}
.section-title{font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin:var(--s2) var(--s1) calc(-1*var(--s2));display:flex;gap:var(--s2)}

/* card */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--sh-1)}
.card-flush{padding:0;overflow:hidden}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.card-head h2{font-size:var(--fs-lg);font-weight:700}
.card-foot{display:flex;gap:var(--s3);padding-top:var(--s4)}.card-flush .card-foot{padding:var(--s4)}
.card-foot .btn:first-child{flex:1}
.card-row{display:flex;align-items:center;gap:var(--s3)}
.card-list{padding:0 var(--s4)}

/* buttons */
.btn{appearance:none;border:1px solid transparent;font:600 var(--fs-md)/1 var(--font);min-height:var(--tap);padding:0 var(--s5);border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);text-decoration:none;cursor:pointer;transition:transform .1s,background var(--dur),box-shadow var(--dur)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--sh-1)}
.btn-secondary{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.btn-ghost{background:transparent;color:var(--info)}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--border)}
.btn-block{width:100%}
.btn-icon{width:var(--tap);padding:0;background:var(--surface-2);color:var(--text-2);border-color:var(--border)}
.btn-icon.is-on{background:var(--primary-soft);color:var(--primary);border-color:transparent}.btn-icon.is-on .ic{fill:currentColor;animation:pop .35s var(--ease)}
.btn-icon-sm{width:40px;min-height:40px}
.btn-row{display:flex;gap:var(--s3);justify-content:center}.btn-row .btn{flex:1}
@keyframes pop{50%{transform:scale(1.3)}}

/* badges/chips/tags */
.badge{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fs-xs);font-weight:700;padding:var(--s1) var(--s3);border-radius:var(--r-pill);background:var(--accent-soft);color:var(--text);white-space:nowrap}
.badge-kid-friendly{background:var(--success-soft);color:var(--success)}.badge-mild{background:var(--accent-soft)}.badge-adult{background:var(--primary-soft);color:var(--primary)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 var(--s3);border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-1);font-weight:700;text-decoration:none}
.chip-streak .ic{color:var(--primary);width:18px;height:18px}
.tag{padding:6px var(--s3);border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface-2);font-weight:600;font-size:var(--fs-sm);transition:opacity var(--dur)}
.tag.done{text-decoration:line-through;opacity:.5}

/* list items (onboarding, settings) */
.list{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s6)}
.list-item{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:72px;padding:var(--s3) var(--s4);border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--sh-1);transition:border-color var(--dur),transform .1s}
.list-item:hover{border-color:var(--primary)}.list-item:active{transform:scale(.98)}
.li-ic{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);flex:none}
.li-txt{flex:1;display:flex;flex-direction:column}.li-txt small{color:var(--text-2);font-size:var(--fs-sm)}
.li-chev{color:var(--text-2)}
.set-row{display:flex;align-items:center;gap:var(--s3);min-height:64px;border-bottom:1px solid var(--border);cursor:pointer}.set-row:last-child{border-bottom:0}

/* inputs */
.input,.select{font:inherit;min-height:var(--tap);padding:0 var(--s3);border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-2);color:var(--text)}
.select-sm{min-height:40px;font-size:var(--fs-sm)}
.input{flex:1;min-width:0;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.input::placeholder{text-transform:none;letter-spacing:0;font-weight:400}
.input:focus,.select:focus{border-color:var(--info);outline:none;box-shadow:0 0 0 3px var(--info-soft)}
.input.bad{border-color:var(--danger)}
.field-row{display:flex;gap:var(--s3);margin-top:var(--s4)}
.switch{appearance:none;width:52px;height:32px;border-radius:var(--r-pill);background:var(--border);position:relative;cursor:pointer;transition:background var(--dur);flex:none;margin:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:left var(--dur) var(--ease)}
.switch:checked{background:var(--success)}.switch:checked::after{left:23px}
input:disabled{opacity:.45}

/* onboarding */
.onboard{padding-top:var(--s8);text-align:center}.hero-ic{width:88px;height:88px;border-radius:22px;box-shadow:var(--sh-2);margin-bottom:var(--s5)}
.onboard h1{font-size:var(--fs-2xl);font-weight:800}.onboard .sub{text-transform:none;font-size:var(--fs-md);margin-top:var(--s2)}.onboard .small{margin-top:var(--s5)}

/* scheurblad */
.stack{position:relative;margin-top:var(--s3)}
.sheet{position:relative;z-index:2;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-2);text-align:center;padding:0 var(--s5) var(--s5);touch-action:none;user-select:none;transition:transform .15s}
.sheet::before,.sheet::after{content:"";position:absolute;top:-8px;width:12px;height:20px;border-radius:6px;background:var(--text-2);border:3px solid var(--surface-2)}.sheet::before{left:22%}.sheet::after{right:22%}
.sheet-under{position:absolute;inset:6px 6px -6px;z-index:1;box-shadow:var(--sh-1);padding:0;opacity:.7}.sheet-under::before,.sheet-under::after{display:none}

@keyframes tear{30%{transform:translateY(-16px) rotate(-2deg)}to{transform:translate(90px,-640px) rotate(-22deg);opacity:0}}
.sheet-head{display:flex;justify-content:space-between;margin:0 calc(-1*var(--s5));padding:var(--s5) var(--s5) var(--s3);background:var(--primary);color:var(--on-primary);border-radius:var(--r-lg) var(--r-lg) 0 0;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:var(--fs-md)}
.perf{height:8px;margin:0 calc(-1*var(--s5));background:radial-gradient(circle at 5px 0,var(--surface) 3px,transparent 3.5px) 0 0/12px 8px,var(--primary)}
.daynum{font:700 var(--fs-hero)/1 var(--font-display);letter-spacing:-.04em;margin-top:var(--s5)}
.weekday{font-size:var(--fs-xl);font-weight:700;color:var(--primary);text-transform:capitalize;margin:var(--s1) 0 var(--s3)}
.teaser{font-size:var(--fs-lg);font-style:italic;color:var(--text-2);margin:var(--s4) var(--s2) var(--s5)}
.hint{display:flex;gap:var(--s2);justify-content:center;align-items:center;color:var(--text-2);font-size:var(--fs-sm)}.hint .ic{width:16px;animation:bob 2s infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
.progress{width:64px;height:8px;border-radius:var(--r-pill);background:var(--surface-2);position:relative;overflow:hidden}.progress::after{content:"";position:absolute;inset:0;width:calc(var(--p)*100%);background:var(--success);border-radius:inherit}

/* segmented */
.segmented{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1);padding:var(--s1);background:var(--surface-2);border-radius:var(--r-md);border:1px solid var(--border)}
.segmented button{position:relative;font:600 var(--fs-xs)/1.1 var(--font);min-height:44px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 2px;transition:background var(--dur),color var(--dur)}
.segmented button[aria-selected=true]{background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}
.segmented .ic-sm{color:var(--success);width:14px;height:14px}
.dot{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--primary)}

/* woordzoeker */
.ws{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;margin-top:var(--s3);user-select:none}
.ws span{aspect-ratio:1;display:grid;place-items:center;font-weight:700;font-size:var(--fs-lg);border-radius:var(--r-sm);background:var(--surface-2);transition:background .12s,color .12s}
.ws .sel{background:var(--accent);color:var(--on-accent)}.ws .found{color:#fff}
.h0{background:var(--hl-0)!important}.h1{background:var(--hl-1)!important}.h2{background:var(--hl-2)!important}.h3{background:var(--hl-3)!important}
.wordlist{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);justify-content:center}

/* kruiswoord */
.cw{display:grid;grid-template-columns:repeat(var(--w),minmax(0,44px));gap:3px;justify-content:center;margin:var(--s2) 0 var(--s5)}
.cell{position:relative;aspect-ratio:1;display:block;background:var(--surface);border:2px solid var(--text);border-radius:var(--r-sm)}
.cell:focus-within{border-color:var(--info);box-shadow:0 0 0 3px var(--info-soft)}
.cell input{width:100%;height:100%;border:0;text-align:center;font:700 var(--fs-lg) var(--font);text-transform:uppercase;background:transparent;color:var(--text);padding:0;outline:none}
.cell small{position:absolute;top:1px;left:3px;font-size:9px;font-weight:700;color:var(--text-2)}
.clues{display:grid;gap:var(--s4)}.clues h3{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin-bottom:var(--s2)}
.clues p{display:flex;gap:var(--s2);font-size:var(--fs-md);padding:var(--s1) 0}.clues p b{min-width:20px;color:var(--primary)}

/* rebus */
.rebus{font-size:3rem;font-weight:800;text-align:center;padding:var(--s8) var(--s2);background:var(--surface-2);border-radius:var(--r-md);margin-bottom:var(--s3)}
p.center .ic-sm{vertical-align:-3px;margin-right:4px;color:var(--accent)}

/* stats & favorieten */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:2px;box-shadow:var(--sh-1)}
.stat .ic{color:var(--text-2);margin-bottom:var(--s1)}.stat b{font-size:var(--fs-2xl);font-weight:800;line-height:1}.stat span{font-size:var(--fs-xs);color:var(--text-2)}
.stat-accent{background:var(--primary);border-color:transparent;color:var(--on-primary)}.stat-accent .ic,.stat-accent span{color:inherit;opacity:.92}
.fav{display:flex;gap:var(--s3);align-items:flex-start}.fav>div{flex:1}.fav-q{font-weight:700}.fav-a{color:var(--text-2);margin-top:var(--s1)}
.empty{text-align:center;padding:var(--s8) var(--s5);border:2px dashed var(--border);border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;gap:var(--s2);color:var(--text-2)}
.empty h3{color:var(--text);font-size:var(--fs-lg)}.empty .btn{margin-top:var(--s3)}

/* tabbar */
.tabbar{position:fixed;inset:auto 0 0 0;z-index:30;display:grid;grid-template-columns:repeat(6,1fr);background:var(--surface);border-top:1px solid var(--border);padding:var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom));box-shadow:0 -2px 12px rgba(0,0,0,.04)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;text-decoration:none;color:var(--text-2);font-size:10.5px;font-weight:600;position:relative}
.tabbar a .ic{width:24px;height:24px;padding:2px 10px;box-sizing:content-box;border-radius:var(--r-pill);transition:background var(--dur),color var(--dur)}
.tabbar a.on{color:var(--primary)}.tabbar a.on .ic{background:var(--primary-soft)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translate(-50%,16px);display:flex;align-items:center;gap:var(--s2);background:var(--text);color:var(--bg);padding:var(--s3) var(--s5);border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-sm);opacity:0;transition:opacity var(--dur),transform var(--dur) var(--ease);pointer-events:none;z-index:40;box-shadow:var(--sh-3);white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}.toast.ok .ic{color:var(--success);filter:brightness(1.3);width:18px}


@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== v3 ===== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn-sm{min-height:36px;padding:0 var(--s3);font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn:disabled{opacity:.4;cursor:default}
.badge-draft{background:var(--info-soft);color:var(--info);margin-left:var(--s1)}
.banner{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s4);border-radius:var(--r-md);background:var(--info-soft);color:var(--text);font-size:var(--fs-sm)}
.banner .ic{color:var(--info)}.banner span{flex:1}
a.card{text-decoration:none;color:inherit}
.li-ic-info{background:var(--info-soft);color:var(--info)}
/* papier + scheuren */
.sheet{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 94%,var(--accent)))}
.sheet.tearing{animation:tear .62s cubic-bezier(.5,0,.8,.4) forwards;clip-path:polygon(0 3%,4% 0,8% 2.5%,12% .5%,17% 3%,22% 0,27% 2%,32% .5%,37% 3%,42% 0,47% 2.5%,52% .5%,57% 3%,62% 0,67% 2%,72% .5%,77% 3%,82% 0,87% 2.5%,92% .5%,96% 3%,100% 0,100% 100%,0 100%)}
.sheet.blocked{animation:nope .45s var(--ease)}
@keyframes nope{20%{transform:translateY(-10px) rotate(-1deg)}40%{transform:translateX(-8px)}60%{transform:translateX(8px)}80%{transform:translateX(-4px)}}
/* layout vandaag */
.today-grid{display:flex;flex-direction:column;gap:var(--s4)}.side{display:flex;flex-direction:column;gap:var(--s3)}
.hint .ic{animation:none}
/* archief */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3)}.cal-head h2{font-size:var(--fs-lg)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-wd{font-size:var(--fs-xs);font-weight:700;color:var(--text-2);text-transform:uppercase;padding:var(--s1) 0}
.cal-d{position:relative;aspect-ratio:1;min-height:40px;border:1px solid transparent;border-radius:var(--r-md);background:var(--surface-2);color:var(--text);font:600 var(--fs-md) var(--font);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background var(--dur)}
.cal-d:hover:not(:disabled){border-color:var(--primary)}
.cal-d:disabled{background:transparent;color:var(--text-2);opacity:.45;cursor:not-allowed;background-image:repeating-linear-gradient(135deg,transparent 0 5px,var(--border) 5px 6px)}
.cal-d.is-today{background:var(--primary);color:var(--on-primary)}.cal-d.is-cur:not(.is-today){border:2px solid var(--primary)}
.cal-dots{display:flex;gap:3px;position:absolute;bottom:5px}.cal-dots b,.cal-legend b{width:6px;height:6px;border-radius:50%;display:inline-block}
.d-s{background:var(--success)}.d-f{background:var(--accent)}.is-today .d-s,.is-today .d-f{background:var(--on-primary)}
.cal-legend{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s3);font-size:var(--fs-xs);color:var(--text-2)}.cal-legend span{display:inline-flex;align-items:center;gap:6px}
.list.tight{margin-top:0;gap:var(--s2)}.list-item.compact{min-height:64px}.list-item.compact .li-txt b{font-weight:600;font-size:var(--fs-sm);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.li-date{width:44px;height:44px;border-radius:var(--r-md);background:var(--primary-soft);color:var(--primary);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;flex:none}.li-date b{font-size:var(--fs-lg)}.li-date small{font-size:10px;text-transform:uppercase}
/* cartoon */
.cartoon{position:relative;color:var(--text);padding-top:150px;overflow:hidden;background:linear-gradient(180deg,#D9ECFF,#F7FBFF)}
[data-theme=dark] .cartoon{background:linear-gradient(180deg,#1C2738,#222A33)}
.cartoon.sc-night{background:linear-gradient(180deg,#1C2340,#38406A);color:#F1EFEA}.cartoon.sc-snow{background:linear-gradient(180deg,#E8F1FA,#FFFFFF)}
.cartoon.sc-inside{background:var(--surface-2)}.cartoon.sc-sea{background:linear-gradient(180deg,#CFE8FF,#EAF6FF)}
[data-theme=dark] .cartoon.sc-snow,[data-theme=dark] .cartoon.sc-sea{background:linear-gradient(180deg,#1E2A3A,#26303C)}
.cartoon svg{display:block;width:100%;height:auto}
.c-sun{fill:#F2B705}.c-moon{fill:#F5C542}.c-star{fill:#fff;animation:twinkle 1.6s infinite alternate}.c-cloud ellipse{fill:#fff;opacity:.9}.c-cloud{animation:drift 9s linear infinite}
.c-hill{fill:#9ED4A6}.c-hill-night{fill:#2E4A3A}[data-theme=dark] .c-hill{fill:#2E5A3F}
.c-sea{fill:#7FB2F0}.c-wave{stroke:#fff;stroke-width:3;animation:wave-x 2s linear infinite}.c-sand{fill:#F3DDB0}
.c-flake{fill:#fff;stroke:#B4C6DA;animation:fall 3s linear infinite}.c-snow{fill:#fff;stroke:#DCE6F0}
.c-wall{fill:var(--surface-2)}.c-window{fill:#CFE8FF;stroke:var(--text-2);stroke-width:3}.c-frame{stroke:var(--text-2);stroke-width:3}.c-floor{fill:#C9A37A}.c-frame-pic{fill:var(--accent-soft);stroke:var(--text-2);stroke-width:3}
[data-theme=dark] .c-floor{fill:#5A4632}
@keyframes twinkle{to{opacity:.3}}@keyframes drift{from{transform:translateX(-120px)}to{transform:translateX(340px)}}@keyframes wave-x{to{transform:translateX(-40px)}}@keyframes fall{from{transform:translateY(-20px)}to{transform:translateY(140px)}}
.fig{transform:translateX(var(--x))}
.play .fig.a{animation:walk-a 1.2s var(--ease) both}.play .fig.b{animation:walk-b 1.2s var(--ease) both}
@keyframes walk-a{from{transform:translateX(-60px)}to{transform:translateX(var(--x))}}@keyframes walk-b{from{transform:translateX(380px)}to{transform:translateX(var(--x))}}
.play .legs .l1{transform-origin:0 135px;animation:step .3s 4 alternate}.play .legs .l2{transform-origin:0 135px;animation:step .3s 4 alternate-reverse}
@keyframes step{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.eyes{animation:blink 3.2s infinite;transform-origin:0 67px}@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.m-laugh{opacity:0}.play .m-laugh{animation:show 0s 3.6s forwards}.play .m-neutral{animation:hide 0s 3.6s forwards}
@keyframes show{to{opacity:1}}@keyframes hide{to{opacity:0}}
.play .fig.a .arm2{transform-origin:0 100px;animation:talk .35s 1.3s 5 alternate}
.play .fig.b .arm2{transform-origin:0 100px;animation:wave .45s 3.4s 6 alternate}
.play .fig.a .body,.play .fig.b .body{animation:shake .25s 4s 8 alternate}
@keyframes talk{to{transform:rotate(-35deg)}}@keyframes wave{to{transform:rotate(-80deg)}}@keyframes shake{to{transform:translateY(-4px) rotate(2deg)}}
.prop{opacity:0;transform-box:fill-box;transform-origin:center bottom}.play .prop{animation:prop-in .6s 1.1s var(--ease) forwards,wob 1.6s 1.7s infinite}
@keyframes prop-in{from{opacity:0;transform:scale(.2) translateY(30px)}to{opacity:1;transform:none}}@keyframes wob{50%{transform:rotate(6deg) translateY(-4px)}}
.laugh{opacity:0;fill:currentColor;font-weight:700}.play .laugh{animation:pop-in .4s 4s forwards}
.bubble{position:absolute;left:var(--s4);right:64px;top:var(--s4);background:var(--surface);color:var(--text);border:2px solid var(--text);border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 4px;padding:var(--s3);font-weight:600;opacity:0;transform:scale(.7);transform-origin:10% 100%;box-shadow:var(--sh-1);z-index:2}
.bubble.b2{left:64px;right:var(--s4);top:84px;background:var(--accent);color:var(--on-accent);border-color:var(--on-accent);border-radius:var(--r-lg) var(--r-lg) 4px var(--r-lg);transform-origin:90% 100%}
.play .b1{animation:pop-in .45s 1.4s var(--ease) forwards}.play .b2{animation:pop-in .45s 3.5s var(--ease) forwards}
@keyframes pop-in{to{opacity:1;transform:scale(1)}}
.c-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}.c-progress i{display:block;height:100%;width:0;background:var(--primary)}.play .c-progress i{animation:prog 8s linear forwards}.done .c-progress{opacity:0;transition:opacity .4s}
@keyframes prog{to{width:100%}}
.textjoke summary{cursor:pointer;font-weight:600;color:var(--info);min-height:32px;display:flex;align-items:center}.textjoke p{margin-top:var(--s2)}
/* sudoku */
.head-tools{display:flex;align-items:center;gap:var(--s2)}.timer{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-2);font-size:var(--fs-sm)}
.sudoku{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;border:2px solid var(--text);border-radius:var(--r-sm);overflow:hidden;outline-offset:3px}
.cell-s{position:relative;border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);color:var(--info);font:600 var(--fs-xl) var(--font);padding:0;cursor:pointer;min-width:0}
.cell-s.given{color:var(--text);background:var(--surface-2);font-weight:700}
.cell-s.peer{background:color-mix(in srgb,var(--info-soft) 75%,var(--surface))}.cell-s.same{background:color-mix(in srgb,var(--accent) 35%,var(--surface))}
.cell-s.sel{background:var(--info-soft);box-shadow:inset 0 0 0 2px var(--info)}
.cell-s.bad{color:var(--danger);background:var(--primary-soft)}
.cell-s:nth-child(9n+3),.cell-s:nth-child(9n+6){border-right:2px solid var(--text)}.cell-s:nth-child(9n){border-right:0}
.cell-s:nth-child(n+19):nth-child(-n+27),.cell-s:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--text)}
.notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);font-size:9px;line-height:1;color:var(--text-2);font-weight:600}.notes i{font-style:normal;display:grid;place-items:center}
.sud-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s3)}
.tool{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;justify-content:center;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);color:var(--text-2);font:600 var(--fs-xs) var(--font);cursor:pointer}
.tool.is-on{background:var(--info-soft);color:var(--info);border-color:var(--info)}
.numpad{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin-top:var(--s2)}
.numpad button{position:relative;min-height:52px;border:0;border-radius:var(--r-sm);background:var(--surface-2);color:var(--text);font:700 var(--fs-xl) var(--font);cursor:pointer;padding:0}
.numpad button:active{background:var(--info-soft)}.numpad small{position:absolute;bottom:2px;right:4px;font-size:9px;color:var(--text-2);font-weight:600}
/* kruiswoord extra */
.cell.inword{background:var(--info-soft)}.cell.hinted input{color:var(--info)}
.clues p{cursor:pointer;border-radius:var(--r-sm);padding:var(--s1) var(--s2);margin:0 calc(-1*var(--s2))}.clues p.on{background:var(--info-soft)}
.card-foot.wrap{flex-wrap:wrap}.card-foot.wrap .btn-block{flex-basis:100%}.card-foot.wrap .btn:first-child{flex:1}
/* woordzoeker */
.ws{outline-offset:3px}.ws span.cursor{box-shadow:inset 0 0 0 2px var(--info)}
/* rebus */
.rebus{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s2);font-size:2rem;padding:var(--s6) var(--s2)}
.pic{width:84px;height:84px;background:#fff;border-radius:var(--r-md);padding:6px;box-shadow:var(--sh-1)}
.rb-txt{font-weight:800;letter-spacing:.04em;font-size:1.9rem;color:var(--primary)}.rb-plus{color:var(--text-2);font-weight:700}
.rb-hint{text-align:center;font:700 var(--fs-xl) ui-monospace,monospace;letter-spacing:.1em;min-height:1.6em;color:var(--info)}
/* favorieten */
.fav-emoji{font-size:28px;line-height:1}.fav-list{display:flex;flex-direction:column;gap:var(--s3)}
/* instellingen */
.seg-sm{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:3px;gap:2px}
.seg-sm button{border:0;background:transparent;color:var(--text-2);font:600 var(--fs-xs) var(--font);min-height:36px;padding:0 var(--s2);border-radius:var(--r-sm);cursor:pointer}
.seg-sm button[aria-checked=true]{background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}
.timepick{display:flex;align-items:center;gap:4px}.timepick .select{padding:0 var(--s2);font-variant-numeric:tabular-nums}
.set-row.is-disabled{opacity:.5}.settings-grid{display:flex;flex-direction:column;gap:var(--s4)}.settings-grid>div{display:flex;flex-direction:column;gap:var(--s4)}
/* confetti */
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:50}
/* tablet & landscape */
@media(min-width:768px){
 body{padding:0 0 0 96px}
 .appbar{padding-left:var(--s8);padding-right:var(--s8)}
 .view{max-width:1040px;margin:0 auto;padding:var(--s4) var(--s8) var(--s8)}
 .tabbar{inset:0 auto 0 0;width:96px;grid-template-columns:1fr;grid-auto-rows:min-content;align-content:center;gap:var(--s2);border-top:0;border-right:1px solid var(--border);padding:var(--s4) var(--s2);box-shadow:none}
 .tabbar a{min-height:64px}
 .today-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s8);align-items:start}
 .side{padding-top:var(--s3)}.side .hint{justify-content:flex-start}
 .pz-card{max-width:620px;width:100%;margin:0 auto}.segmented{max-width:620px;width:100%;margin:0 auto}
 .joke-card,.textjoke{max-width:720px;width:100%;margin:0 auto}
 .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
 .stats,.fav-list{max-width:820px}.fav-list{display:grid;grid-template-columns:1fr 1fr}
 .cal{max-width:620px}.list.tight{max-width:620px}
 .toast{bottom:var(--s8)}
}
@media(min-width:768px) and (orientation:landscape) and (max-height:820px){.daynum{font-size:6.5rem}.sheet-head{padding-top:var(--s4)}}

@media(min-width:768px){.cartoon svg{max-height:340px}.cartoon{padding-top:130px}.bubble{font-size:var(--fs-lg)}}
@media(min-width:768px){.sudoku,.numpad,.sud-tools{max-width:min(100%,calc(100vh - 330px));margin-left:auto;margin-right:auto}.sudoku{min-width:300px}.numpad,.sud-tools{min-width:300px}}