:root {
            /* Palette */
            --bg-a: #6C8CFF;
            --bg-b: #9D7BFF;
            --ink: #1F2340;
            --ink-soft: #4B5069;
            --muted: #8A90A8;
            --line: #E7EAF3;
            --surface: #FFFFFF;
            --surface-2: #F4F6FC;
            --green: #2FD17A;
            --green-soft: #DEF8EA;
            --red: #FF5E7A;
            --red-soft: #FFE1E8;
            --amber: #FFB636;
            --amber-soft: #FFF0D6;
            --blue: #6C8CFF;
            --purple: #A37BFF;
            --pink: #FF7EC7;
            --teal: #2FE0C2;

            /* Radii */
            --r-xs: 10px;
            --r-sm: 14px;
            --r-md: 20px;
            --r-lg: 28px;
            --r-xl: 36px;
            --r-pill: 999px;

            /* Spacing */
            --s-1: 6px;
            --s-2: 10px;
            --s-3: 14px;
            --s-4: 20px;
            --s-5: 28px;
            --s-6: 36px;
            --s-7: 48px;

            /* Shadows */
            --shadow-sm: 0 4px 14px rgba(16,22,48,0.08);
            --shadow-md: 0 10px 28px rgba(16,22,48,0.12);
            --shadow-lg: 0 22px 50px rgba(16,22,48,0.18);

            /* Type */
            --font: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --font-dyslexic: 'OpenDyslexic', 'Comic Sans MS', 'Fredoka', sans-serif;

            /* Safe areas */
            --safe-t: env(safe-area-inset-top, 0px);
            --safe-b: env(safe-area-inset-bottom, 0px);
            --safe-l: env(safe-area-inset-left, 0px);
            --safe-r: env(safe-area-inset-right, 0px);
        }

        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        /* Alle interactieve elementen: kill double-tap-to-zoom delay expliciet
           (iOS negeert vaak body-level touch-action voor linkjes). */
        a, button, label, summary, [role="button"], [onclick] {
            touch-action: manipulation;
        }

        /* Focus-rings alleen voor toetsenbord-gebruik, niet bij muis/touch.
           Scheelt de "geselecteerd-blauw kader" flash op iPad na een tap. */
        :focus { outline: none; }
        :focus-visible {
            outline: 2px solid rgba(108,140,255,0.7);
            outline-offset: 2px;
        }

        html, body {
            height: 100%;
            overscroll-behavior: none;
            /* Voorkomt horizontale scroll wanneer iets per ongeluk iets te
               breed wordt bij kleine viewports — alles houdt zich aan de
               viewport-breedte. */
            max-width: 100%;
            overflow-x: hidden;
            /* iOS-only: voorkom dat landscape-oriëntatie de tekst opeens 110%
               groter maakt (Safari "text size adjust"). Desktop/Android doet
               dit sowieso niet. */
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        /* iOS Capacitor-webview + home-indicator: als html geen achtergrond
           heeft zie je de webview-default-kleur doorschemeren onder de body.
           We matchen met de gradient-EINDkleur (paars) want die kant van de
           gradient raakt de bottom, zodat home-indicator-area naadloos doorloopt. */
        html {
            background-color: var(--bg-b);
        }

        /* Capacitor-native body vult de hele viewport. Geen padding-bottom
           toevoegen aan body in native modus — de safe-area-inset-bottom
           wordt al door de content gerespecteerd, en extra padding gaf een
           zichtbare paarse strook. De gradient loopt nu tot viewport-bottom. */
        html.capacitor-native body {
            padding-bottom: var(--safe-b, 0px);
        }

        /* In de native app (Capacitor webview) voelt tekst-selectie bij long-
           press "kapot" — kind houdt per ongeluk een tegel vast en iOS begint
           tekst te markeren of toont een vergrootglas. Alleen inputs/textarea/
           leesstukjes blijven wél selecteerbaar zodat kopiëren werkt waar het
           nuttig is. */
        html.capacitor-native body {
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }
        html.capacitor-native input,
        html.capacitor-native textarea,
        html.capacitor-native [contenteditable],
        html.capacitor-native .text-card {
            user-select: text;
            -webkit-user-select: text;
            -webkit-touch-callout: default;
        }

        body {
            font-family: var(--font);
            font-weight: 500;
            color: var(--ink);
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* Bottom-padding = alleen safe-area-inset-bottom (home-indicator area).
               Extra 24px weggehaald — gaf een zichtbare "blauwe balk" op iPhone
               omdat content stopte vóór de safe-area grens terwijl de gradient
               body-height vulde. Nu eindigt content op safe-area-inset-bottom. */
            padding: calc(var(--safe-t) + 24px) calc(var(--safe-r) + 24px)
                     calc(var(--safe-b) + 8px) calc(var(--safe-l) + 24px);
            background: linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 100%);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            /* background-attachment: fixed weggehaald — buggy op iOS WKWebView
               (gradient rendert niet correct bij scroll). Zonder fixed loopt de
               gradient netjes mee met body-height. */
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            touch-action: manipulation;
            /* iOS: voorkom long-press context-menu op buttons/tiles (kind
               houdt knop iets te lang ingedrukt → menu ploft op). Behouden
               voor <p>/<a> in tekst zodat kopiëren wél werkt. */
            -webkit-touch-callout: none;
            @yield('bg-style')
        }

        /* Reactiveer long-press (tekst selecteren/kopiëren) in inhoud waar
           het nuttig is — bv. de leesstukjes. */
        .text-card, input, textarea {
            -webkit-touch-callout: default;
            -webkit-user-select: text;
            user-select: text;
        }

        /* iOS: momentum-scroll in alle scrollbare containers (activity-feed,
           shop-grid, etc). Defaultgedrag is "stoterig" op iOS zonder deze. */
        .activity-list, .stage-group > div, .gallery, .queue-list, #queueList {
            -webkit-overflow-scrolling: touch;
        }

        button, input, textarea, select {
            font-family: inherit;
            font-weight: 500;
            font-size: 1rem;
            color: inherit;
        }

        button { cursor: pointer; border: none; background: none; }
        a { color: inherit; text-decoration: none; }

        /* Prevent iOS zoom on focus */
        input, textarea, select { font-size: 16px; }

        /* Buttons that shouldn't be selected (game cards, letters, etc) */
        .no-select, .no-select * { user-select: none; -webkit-user-select: none; }

        /* Fixed chrome */
        .chrome-top-left {
            position: fixed;
            top: calc(var(--safe-t) + 16px);
            left: calc(var(--safe-l) + 16px);
            z-index: 100;
        }

        .chrome-top-right {
            position: fixed;
            top: calc(var(--safe-t) + 16px);
            right: calc(var(--safe-r) + 16px);
            z-index: 100;
        }

        /* Back button — glassy, big enough for small fingers */
        .back-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 58px;
            height: 58px;
            border-radius: var(--r-pill);
            background: rgba(255,255,255,0.28);
            color: white;
            font-size: 1.6rem;
            font-weight: 600;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.35);
            transition: transform .18s ease, background .18s ease;
        }
        .back-btn:active { transform: scale(.92); background: rgba(255,255,255,0.42); }

        /* Profiel-avatar: ronde knop met eerste letter. Zelfde maat en
           glass-stijl als .back-btn aan de linkerkant, zodat de chrome
           symmetrisch blijft. */
        .child-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: rgba(255,255,255,0.28);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.35);
            color: white;
            font-weight: 700;
            font-size: 1.4rem;
            letter-spacing: 0;
            text-transform: uppercase;
            transition: transform .18s ease, background .18s ease;
            cursor: pointer;
            padding: 0;
        }
        .child-indicator:active { transform: scale(.92); background: rgba(255,255,255,0.42); }

        /* Pet-indicator: zelfde cirkel, maar toont het huisdier + mood-dot.
           Cirkel is stil, het emoji er binnenin kan dansen/stuiteren. */
        .pet-indicator { overflow: visible; position: relative; }
        .pet-indicator .pi-emoji {
            font-size: 1.9rem; line-height: 1;
            display: inline-block;
            transition: transform .25s cubic-bezier(.2,.8,.2,1);
        }

        /* Accessoires op de mini-pet: klein, absoluut gepositioneerd per slot.
           Volgen niet mee met de bob-animatie (bewust — zou te druk worden). */
        .pet-indicator .pi-acc {
            position: absolute;
            font-size: .85rem; line-height: 1;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
            pointer-events: none;
        }
        .pet-indicator .pi-acc-head { top: -4px;  left: 50%; transform: translateX(-50%); }
        .pet-indicator .pi-acc-face { top: 50%;   left: 50%; transform: translate(-50%, -50%); font-size: .7rem; }
        .pet-indicator .pi-acc-neck { bottom: 2px; left: 50%; transform: translateX(-50%); font-size: .75rem; }
        .pet-indicator .pi-acc-back { top: 50%;  right: -2px; transform: translateY(-50%); font-size: .8rem; }
        .pet-indicator .pi-img {
            width: 100%; height: 100%;
            object-fit: contain;
            display: block;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
        }
        .pet-indicator.mood-happy   .pi-emoji { animation: pi-bob 3.5s ease-in-out infinite; }
        .pet-indicator.mood-hungry  .pi-emoji { animation: pi-bob 1.8s ease-in-out infinite; }
        .pet-indicator.mood-sleepy  .pi-emoji { opacity: .75; }
        .pet-indicator.mood-sad     .pi-emoji { filter: grayscale(.2); }
        .pet-indicator.mood-dirty   .pi-emoji { filter: sepia(.3); }
        @keyframes pi-bob {
            0%, 100% { transform: translateY(0) rotate(-2deg); }
            50%      { transform: translateY(-3px) rotate(2deg); }
        }
        .pet-indicator .pi-mood-dot {
            position: absolute;
            bottom: 4px; right: 4px;
            width: 12px; height: 12px;
            border-radius: 50%;
            border: 2px solid white;
        }
        .pet-indicator.mood-happy   .pi-mood-dot { background: #2FD17A; box-shadow: 0 0 6px #2FD17A88; }
        .pet-indicator.mood-content .pi-mood-dot { background: #A5D84A; }
        .pet-indicator.mood-meh     .pi-mood-dot { background: #FFB636; }
        .pet-indicator.mood-hungry  .pi-mood-dot { background: #FF7E55; animation: pi-pulse 1.2s ease-in-out infinite; }
        .pet-indicator.mood-sleepy  .pi-mood-dot { background: #A37BFF; }
        .pet-indicator.mood-sad,
        .pet-indicator.mood-dirty   { }
        .pet-indicator.mood-sad     .pi-mood-dot { background: #FF5E7A; }
        .pet-indicator.mood-dirty   .pi-mood-dot { background: #D9AF7A; }
        @keyframes pi-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }

        /* Reactie-animaties — extra class toegevoegd door JS, verdwijnt weer */
        .pet-indicator.react-jump .pi-emoji { animation: pi-jump .6s cubic-bezier(.2,.8,.2,1); }
        .pet-indicator.react-sad  .pi-emoji { animation: pi-shake .6s ease; }
        .pet-indicator.react-dance .pi-emoji { animation: pi-dance 1s cubic-bezier(.2,.8,.2,1); }
        @keyframes pi-jump {
            0%   { transform: translateY(0) scale(1); }
            40%  { transform: translateY(-18px) scale(1.18); }
            100% { transform: translateY(0) scale(1); }
        }
        @keyframes pi-shake {
            0%, 100% { transform: translateX(0) rotate(0); }
            20%  { transform: translateX(-4px) rotate(-6deg); }
            40%  { transform: translateX(4px) rotate(6deg); }
            60%  { transform: translateX(-3px) rotate(-3deg); }
            80%  { transform: translateX(3px) rotate(3deg); }
        }
        @keyframes pi-dance {
            0%, 100% { transform: translateY(0) rotate(0) scale(1); }
            25% { transform: translateY(-10px) rotate(-12deg) scale(1.15); }
            50% { transform: translateY(-4px) rotate(12deg) scale(1.1); }
            75% { transform: translateY(-10px) rotate(-8deg) scale(1.15); }
        }

        /* Bubble — tekstballon onder de pet, drijft omhoog + fade in/out */
        .pet-bubble {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            min-width: 150px;
            max-width: 260px;
            padding: 10px 14px;
            background: white;
            color: var(--ink);
            border-radius: var(--r-md);
            box-shadow: 0 12px 30px rgba(16,22,48,0.25);
            font-size: .9rem;
            font-weight: 600;
            opacity: 0;
            transform: translateY(-6px) scale(.92);
            pointer-events: none;
            transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1);
            z-index: 99;
        }
        .pet-bubble::before {
            content: '';
            position: absolute;
            top: -6px; right: 20px;
            width: 14px; height: 14px;
            background: white; transform: rotate(45deg);
            box-shadow: -3px -3px 6px rgba(16,22,48,.04);
        }
        .pet-bubble.show {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        @media (prefers-reduced-motion: reduce) {
            .pet-indicator .pi-emoji { animation: none; }
            .pet-bubble { transition: opacity .1s ease; }
        }

        /* Profile dropdown — geen position hier, anders overschrijft 'ie
           het position:fixed van .chrome-top-right en vliegt de hele drop-down
           naar het midden van de pagina. .profile-pop anchor't via
           position:absolute + right:0 aan de fixed parent. */
        .profile-pop {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            min-width: 220px;
            background: white;
            color: var(--ink);
            border-radius: var(--r-md);
            box-shadow: var(--shadow-lg);
            padding: 8px;
            display: none;
            opacity: 0;
            transform: translateY(-6px);
            transition: opacity .18s ease, transform .18s ease;
        }
        .profile-menu.open .profile-pop {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
        .profile-pop .who {
            padding: 10px 12px 8px;
            border-bottom: 1px solid var(--line);
            margin-bottom: 6px;
        }
        .profile-pop .who-name { font-weight: 700; font-size: .98rem; }
        .profile-pop .who-sub  { color: var(--muted); font-size: .8rem; margin-top: 2px; }
        .profile-pop a, .profile-pop button {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 10px 12px;
            border-radius: var(--r-sm);
            font-size: .95rem;
            font-weight: 600;
            color: var(--ink);
            text-align: left;
            transition: background .15s ease;
        }
        .profile-pop a:hover, .profile-pop button:hover { background: var(--surface-2); }
        .profile-pop .danger { color: var(--red); }
        .profile-pop .danger:hover { background: var(--red-soft); }
        .profile-pop .admin-tag {
            display: inline-block;
            padding: 1px 8px;
            border-radius: var(--r-pill);
            background: linear-gradient(135deg, #6C8CFF, #A37BFF);
            color: white;
            font-size: .68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-left: 6px;
        }
        .profile-pop hr { border: none; border-top: 1px solid var(--line); margin: 6px 0; }
        .profile-pop form { margin: 0; }

        /* Reusable utility classes */
        .hero-title {
            color: white;
            font-size: clamp(2rem, 4.2vw, 3rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            text-align: center;
        }

        .hero-sub {
            color: rgba(255,255,255,0.85);
            font-size: clamp(1rem, 1.8vw, 1.25rem);
            font-weight: 500;
            text-align: center;
        }

        .glass-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: var(--r-pill);
            background: rgba(255,255,255,0.22);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255,255,255,0.28);
            color: white;
            font-weight: 600;
            font-size: 0.95rem;
        }

        .card {
            background: var(--surface);
            border-radius: var(--r-lg);
            box-shadow: var(--shadow-md);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 16px 28px;
            border-radius: var(--r-pill);
            font-weight: 600;
            font-size: 1.05rem;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
            min-height: 54px;
        }
        .btn:active { transform: scale(.96); }

        .btn-primary {
            background: var(--ink);
            color: white;
            box-shadow: var(--shadow-sm);
        }
        .btn-primary:active { background: #2a3055; }

        .btn-light {
            background: white;
            color: var(--ink);
            box-shadow: var(--shadow-sm);
        }

        .btn-ghost {
            background: rgba(255,255,255,0.22);
            color: white;
            border: 1px solid rgba(255,255,255,0.28);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }
        .btn-ghost:active { background: rgba(255,255,255,0.36); }

        .btn-xl { padding: 22px 42px; font-size: 1.3rem; min-height: 68px; border-radius: var(--r-pill); }

        /* Confetti-ish pop animation reused everywhere */
        @keyframes pop-in {
            0%   { transform: scale(.7); opacity: 0; }
            60%  { transform: scale(1.06); opacity: 1; }
            100% { transform: scale(1); }
        }
        @keyframes bounce-up {
            0%,100% { transform: translateY(0); }
            50%    { transform: translateY(-6px); }
        }
        @keyframes shake-x {
            0%,100% { transform: translateX(0); }
            25%     { transform: translateX(-10px); }
            75%     { transform: translateX(10px); }
        }
        @keyframes pulse-glow {
            0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
            50%    { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
        }
        @keyframes pointsfx-in {
            0%   { opacity: 0; transform: translateY(14px) scale(.85); }
            15%  { opacity: 1; transform: translateY(0) scale(1.08); }
            35%  { transform: scale(1); }
            100% { opacity: 0; transform: translateY(-30px) scale(.95); }
        }

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

        /* iPad-specific: hide hover emphasis, lean on :active */
        @media (hover: hover) {
            .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
            .btn-light:hover   { transform: translateY(-2px); box-shadow: var(--shadow-md); }
            .btn-ghost:hover   { background: rgba(255,255,255,0.32); }
            .back-btn:hover    { background: rgba(255,255,255,0.4); }
        }

        /* Version badge (fixed, bottom-right, unobtrusive) */
        .version-badge {
            position: fixed;
            bottom: calc(var(--safe-b) + 10px);
            right: calc(var(--safe-r) + 12px);
            z-index: 90;
            padding: 4px 10px;
            border-radius: var(--r-pill);
            background: rgba(255,255,255,0.18);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.24);
            color: rgba(255,255,255,0.78);
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            pointer-events: none;
            user-select: none;
        }

        /* Offline / queued indicator */
        .sync-badge {
            position: fixed;
            bottom: calc(var(--safe-b) + 10px);
            left: calc(var(--safe-l) + 12px);
            z-index: 90;
            display: none;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: var(--r-pill);
            background: rgba(0,0,0,0.45);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.22);
            color: white;
            font-size: 0.78rem;
            font-weight: 600;
            pointer-events: none;
            user-select: none;
        }
        .sync-badge.show { display: inline-flex; animation: sync-in .3s ease; }
        .sync-badge .dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: #FFB636;
            box-shadow: 0 0 0 0 rgba(255,182,54,0.6);
            animation: sync-pulse 1.2s ease-in-out infinite;
        }
        .sync-badge.offline .dot { background: #FF5E7A; }
        @keyframes sync-pulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(255,182,54,0.55); }
            50%     { box-shadow: 0 0 0 8px rgba(255,182,54,0); }
        }
        @keyframes sync-in {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* --- Install prompt --- */
        .install-pill {
            position: fixed;
            left: 50%;
            bottom: calc(var(--safe-b) + 16px);
            transform: translateX(-50%) translateY(120%);
            z-index: 110;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px 10px 16px;
            border-radius: var(--r-pill);
            background: rgba(20,20,40,0.78);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.28);
            color: white;
            box-shadow: 0 18px 40px rgba(0,0,0,0.35);
            font-weight: 600;
            font-size: 0.95rem;
            opacity: 0;
            transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
            max-width: calc(100% - 32px);
        }
        .install-pill.show { transform: translateX(-50%) translateY(0); opacity: 1; }
        .install-pill .ip-icon {
            display: inline-flex; align-items: center; justify-content: center;
            width: 34px; height: 34px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6C8CFF, #A37BFF);
            flex-shrink: 0;
            font-size: 1.1rem;
        }
        .install-pill .ip-text { line-height: 1.15; }
        .install-pill .ip-text b { display: block; font-weight: 700; font-size: .95rem; }
        .install-pill .ip-text small { color: rgba(255,255,255,.72); font-size: .78rem; font-weight: 500; }
        .install-pill .ip-btn {
            background: white;
            color: #1F2340;
            padding: 9px 18px;
            border-radius: var(--r-pill);
            font-weight: 700;
            font-size: .9rem;
            transition: transform .12s ease, background .2s ease;
        }
        .install-pill .ip-btn:active { transform: scale(.94); }
        .install-pill .ip-close {
            width: 28px; height: 28px;
            border-radius: 50%;
            color: rgba(255,255,255,.7);
            display: inline-flex; align-items: center; justify-content: center;
            transition: background .2s ease, color .2s ease;
        }
        .install-pill .ip-close:hover { background: rgba(255,255,255,.1); color: white; }

        /* --- Install modal (iOS / explain flow) --- */
        .install-modal-backdrop {
            position: fixed; inset: 0;
            background: rgba(5,8,20,0.55);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 220;
            animation: fade-in .25s ease;
        }
        .install-modal-backdrop.open { display: flex; }
        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

        .install-modal {
            width: 100%;
            max-width: 440px;
            border-radius: var(--r-xl);
            background: white;
            color: var(--ink);
            box-shadow: 0 40px 80px rgba(0,0,0,0.3);
            padding: 28px;
            animation: pop-in .32s cubic-bezier(.2,.8,.2,1);
        }
        .install-modal h2 {
            font-size: 1.35rem;
            font-weight: 700;
            margin-bottom: 8px;
            letter-spacing: -0.01em;
        }
        .install-modal .lead { color: var(--muted); font-size: .98rem; margin-bottom: 20px; }
        .install-modal ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
        .install-modal ol li {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 16px;
            border-radius: var(--r-md);
            background: var(--surface-2);
            font-size: .97rem;
            font-weight: 500;
            color: var(--ink);
        }
        .install-modal .stepnum {
            width: 32px; height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6C8CFF, #A37BFF);
            color: white;
            display: inline-flex; align-items: center; justify-content: center;
            font-weight: 800;
            flex-shrink: 0;
        }
        .install-modal .stepicon {
            width: 32px; height: 32px;
            border-radius: 8px;
            background: white;
            border: 1px solid var(--line);
            display: inline-flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .install-modal .stepicon svg { width: 18px; height: 18px; color: var(--ink); }
        .install-modal .im-close {
            margin-top: 22px;
            width: 100%;
            padding: 14px;
            border-radius: var(--r-md);
            background: var(--ink);
            color: white;
            font-weight: 700;
            font-size: 1rem;
            transition: transform .15s ease;
        }
        .install-modal .im-close:active { transform: scale(.98); }
        .install-modal .note {
            margin-top: 14px;
            font-size: .85rem;
            color: var(--muted);
            padding: 10px 12px;
            background: var(--surface-2);
            border-radius: var(--r-sm);
        }

        /* ─────────────────────────────────────────────────────────────
         * Standalone-mode: styling die alleen telt als de app vanaf het
         * beginscherm is geopend (PWA-mode). Hide install-prompts,
         * grotere tap-doelen, strakker voelen dan in browser.
         * ───────────────────────────────────────────────────────────── */
        @media (display-mode: standalone) {
            /* Install-pill + install-modal hoeven nooit meer te verschijnen */
            .install-pill, .install-modal-backdrop { display: none !important; }

            /* Iets grotere tap-doelen in PWA voor kleuter-vingers */
            .tile { min-height: 128px; }
            .back-btn { width: 62px; height: 62px; }
            .child-indicator { width: 62px; height: 62px; }

            /* Verberg version-badge in PWA — voor thuisgebruikers irrelevant */
            .version-badge { display: none; }

            /* Voorkom tekst-selectie tijdens long-press op een iPad (voelt
               als 'er gebeurt iets verkeerds' bij een tap-hold). Inputs
               blijven selecteerbaar dankzij de user-select:text override. */
            body { user-select: none; -webkit-user-select: none; }
            input, textarea, [contenteditable] {
                user-select: text; -webkit-user-select: text;
            }
        }

        /* Respecteer prefers-reduced-motion overal — geen bounce, geen
           pop-in animaties voor mensen die beweging uit hebben staan. */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ─── Tijd-van-de-dag overlays (subtiel) ─────────────────────
           Worden op body gezet door inline-JS in layout. Echt-heel-licht
           kleurtoevoeging zodat 's avonds de app iets warmer voelt.
           Respecteert prefers-reduced-motion via transition-duration. */
        body.time-morning { background: linear-gradient(135deg, #FFB36C 0%, #A37BFF 100%); }
        body.time-day     { /* default gradient, geen override */ }
        body.time-evening { background: linear-gradient(135deg, #FF6C9D 0%, #6C3BFF 100%); }
        body.time-night   { background: linear-gradient(135deg, #1F2340 0%, #6C8CFF 100%); }

        /* ─── AI-feedback na een toets (groep 3+) ─────────────────── */
        .ai-feedback {
            margin: 14px 0;
            padding: 16px 18px;
            background: linear-gradient(135deg, rgba(108,140,255,.08), rgba(163,123,255,.08));
            border: 1.5px solid rgba(108,140,255,.25);
            border-radius: var(--r-md);
            text-align: left;
            color: var(--ink);
            animation: afb-in .45s cubic-bezier(.2,.8,.2,1);
        }
        @keyframes afb-in {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .afb-head {
            font-size: 1.02rem; margin-bottom: 10px;
        }
        .afb-head b { color: var(--ink); font-weight: 800; }
        .afb-loading {
            display: flex; align-items: center; gap: 10px;
            padding: 8px 0;
            color: var(--muted); font-size: .9rem;
        }
        .afb-spinner {
            display: inline-block;
            width: 14px; height: 14px;
            border-radius: 50%;
            border: 2px solid rgba(108,140,255,.25);
            border-top-color: #6C8CFF;
            animation: afb-spin .9s linear infinite;
        }
        @keyframes afb-spin { to { transform: rotate(360deg); } }
        .afb-summary {
            color: var(--ink-soft); font-size: .93rem;
            line-height: 1.45; margin-bottom: 12px;
        }
        .afb-mistakes { display: flex; flex-direction: column; gap: 10px; }
        .afb-mistake {
            padding: 10px 12px;
            background: white;
            border-radius: var(--r-sm);
            border: 1px solid var(--line);
        }
        .afb-mistake .afb-q {
            font-size: .95rem; color: var(--ink); margin-bottom: 4px;
        }
        .afb-mistake .afb-ans {
            font-size: .82rem; margin-bottom: 6px;
        }
        .afb-mistake .afb-ans .wrong { color: var(--red); font-weight: 700; }
        .afb-mistake .afb-ans .right { color: var(--green); font-weight: 700; }
        .afb-mistake .afb-why   { font-size: .88rem; color: var(--ink-soft); line-height: 1.4; margin-bottom: 3px; }
        .afb-mistake .afb-trick { font-size: .88rem; color: var(--ink); font-weight: 600; line-height: 1.4; }
        .afb-tip {
            margin-top: 12px;
            padding: 10px 12px;
            background: rgba(255,182,54,.14);
            border-radius: var(--r-sm);
            color: var(--ink); font-size: .88rem; font-weight: 600;
            line-height: 1.4;
        }

        /* Skeleton-loader voor AI-feedback — voelt minder "leeg" tijdens wacht */
        .afb-skel { background: rgba(255,255,255,.6) !important; }
        .afb-skel-line {
            height: 10px; border-radius: var(--r-pill);
            background: linear-gradient(90deg, #E7EAF3 0%, #F4F6FC 50%, #E7EAF3 100%);
            background-size: 200% 100%;
            margin-bottom: 8px;
            animation: skel-shimmer 1.2s ease-in-out infinite;
        }
        .afb-skel-line:last-child { margin-bottom: 0; }
        .afb-skel-line.w-60 { width: 60%; }
        .afb-skel-line.w-70 { width: 70%; }
        .afb-skel-line.w-80 { width: 80%; }
        @keyframes skel-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .afb-skel-line { animation: none; }
        }

        /* Dyslexie-modus — toggle via /kind/profiel. Voegt OpenDyslexic font toe
           en ruimte tussen letters/regels. Laadt alleen wanneer de class actief
           is zodat andere kinderen er geen extra font-weight van merken. */
        body.dyslexia-mode {
            font-family: var(--font-dyslexic);
            letter-spacing: 0.03em;
            line-height: 1.55;
        }
        body.dyslexia-mode p,
        body.dyslexia-mode .prompt,
        body.dyslexia-mode .text-card,
        body.dyslexia-mode .q-card,
        body.dyslexia-mode button,
        body.dyslexia-mode input,
        body.dyslexia-mode select {
            font-family: var(--font-dyslexic);
            letter-spacing: 0.04em;
        }
        /* OpenDyslexic zelf gehost op /fonts/ — jsdelivr-path bleek unstable
           (404 sinds 2025). Self-hosten werkt offline, geen CDN-afhankelijkheid,
           geen CSP-whitelist nodig, en de font laadt sneller (zelfde origin). */
        @font-face {
            font-family: 'OpenDyslexic';
            src: url('/fonts/OpenDyslexic-Regular.otf') format('opentype');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'OpenDyslexic';
            src: url('/fonts/OpenDyslexic-Bold.otf') format('opentype');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }