:root{--color-pitch: #0b6e3b;--color-pitch-dark: #0a5e32;--color-pitch-light: #128a4a;--color-line: #ffffff;--color-bg: #f4f7f4;--color-surface: #ffffff;--color-text: #16201a;--color-text-muted: #5c6b61;--color-accent: #ffd23f;--color-correct: #1fa463;--color-correct-bg: #e6f7ee;--color-wrong: #d93a3a;--color-wrong-bg: #fdecec;--radius: 16px;--radius-sm: 10px;--shadow: 0 8px 24px rgba(11, 110, 59, .12);--maxw: 560px;--font-display: "Anton", sans-serif;--font-body: "Outfit", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;line-height:1.5}#root{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.app{width:100%;max-width:var(--maxw);margin:0 auto;padding:env(safe-area-inset-top) 16px calc(16px + env(safe-area-inset-bottom));flex:1;display:flex;flex-direction:column}.display{font-family:var(--font-display);font-weight:400;letter-spacing:.5px;line-height:1.05;text-transform:uppercase;margin:0}h1.display{font-size:clamp(2rem,8vw,3rem)}h2.display{font-size:clamp(1.4rem,5.5vw,2rem)}p{margin:0 0 1rem}.muted{color:var(--color-text-muted)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}.brand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:1.1rem;text-transform:uppercase;color:var(--color-pitch);text-decoration:none}.brand .ball{font-size:1.3rem}.tabs{display:flex;gap:8px;background:var(--color-surface);border-radius:999px;padding:4px;box-shadow:var(--shadow)}.tab{border:none;background:transparent;font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--color-text-muted);padding:8px 16px;border-radius:999px;cursor:pointer;text-decoration:none;transition:background .2s ease,color .2s ease}.tab.active{background:var(--color-pitch);color:#fff}.card{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px}.btn{font-family:var(--font-body);font-weight:600;font-size:1rem;border:none;border-radius:var(--radius-sm);padding:14px 20px;cursor:pointer;transition:transform .1s ease,background .2s ease,opacity .2s ease;width:100%}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--color-pitch);color:#fff}.btn-primary:hover{background:var(--color-pitch-light)}.btn-secondary{background:transparent;color:var(--color-pitch);border:2px solid var(--color-pitch)}.btn-accent{background:var(--color-accent);color:#2a2300}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-row{display:flex;gap:12px}.btn-row .btn{width:auto;flex:1}.hero{text-align:center;padding:24px 0 8px}.hero .ball-big{font-size:3.5rem;display:block;margin-bottom:8px}.hero-actions{display:flex;flex-direction:column;gap:12px;margin-top:24px}.step-progress{display:flex;gap:6px;margin:16px 0}.step-dot{flex:1;height:6px;border-radius:999px;background:#d7e3da;transition:background .3s ease}.step-dot.done{background:var(--color-pitch)}.verdict-badge{display:inline-block;font-weight:700;font-size:.85rem;padding:4px 12px;border-radius:999px;margin-bottom:12px}.verdict-badge.buitenspel{background:var(--color-wrong-bg);color:var(--color-wrong)}.verdict-badge.niet-buitenspel{background:var(--color-correct-bg);color:var(--color-correct)}.diagram{width:100%;height:auto;display:block;max-width:100%;margin:12px 0;border-radius:var(--radius-sm);overflow:hidden}.diagram .pitch-bg{fill:var(--color-pitch)}.diagram .pitch-line{stroke:#ffffff80;stroke-width:.6;fill:none}.diagram .offside-line{stroke:var(--color-accent);stroke-width:.8;stroke-dasharray:2 1.5}.diagram .marker-attacker{fill:#ff5252;animation:pulse 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.diagram .marker-defender{fill:#2d6cdf}.diagram .marker-ball{fill:#fff}.diagram .marker-keeper{fill:#f9c80e;stroke:#00000059;stroke-width:.4}.diagram .marker-attacker-second{fill:#ff8a80}.diagram .own-half{fill:#ffffff1a}.diagram .restart-line{stroke:#ffffffb3;stroke-width:.6;stroke-dasharray:1.5 1.5}.diagram .restart-marker{fill:#fff;stroke:var(--color-accent);stroke-width:.6}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}@media (prefers-reduced-motion: reduce){.diagram .marker-attacker{animation:none}}.quiz-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:600;color:var(--color-text-muted)}.choice-row{display:flex;gap:12px;margin-top:16px}.choice-row .btn{flex:1}.feedback{margin-top:16px;padding:16px;border-radius:var(--radius-sm);animation:fade-in .3s ease}.feedback.correct{background:var(--color-correct-bg);border:1px solid var(--color-correct)}.feedback.wrong{background:var(--color-wrong-bg);border:1px solid var(--color-wrong)}.feedback-title{font-weight:700;margin-bottom:6px}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.score-circle{width:140px;height:140px;border-radius:50%;margin:8px auto 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--color-pitch);color:#fff}.score-circle .num{font-family:var(--font-display);font-size:2.6rem;line-height:1}.text-center{text-align:center}.toast{margin-top:12px;font-size:.9rem;color:var(--color-correct);font-weight:600}footer.app-footer{text-align:center;font-size:.8rem;color:var(--color-text-muted);padding:16px 0}