function PeperKarting({ onClose }) {
  const W = 480;
  const H = 640;
  const NUM_SEGS = 300;
  const SEG_LEN = 200;
  const DRAW = 120;
  const CAM_H = 1200;
  const CAM_D = 1 / Math.tan(40 * Math.PI / 180);
  const ROAD_W = 2200;
  const MAX_SPEED = SEG_LEN * 55;

  const [phase, setPhase] = React.useState("intro");
  const [displayScore, setDisplayScore] = React.useState(0);
  const [best, setBest] = React.useState(() => {
    try { return parseInt(localStorage.getItem("peper-karting-best") || "0", 10) || 0; }
    catch { return 0; }
  });
  const [scale, setScale] = React.useState(1);
  const [narrow, setNarrow] = React.useState(typeof window !== "undefined" && window.innerWidth <= 600);

  const wrapRef = React.useRef(null);
  const canvasRef = React.useRef(null);
  const gRef = React.useRef(null);
  const keysRef = React.useRef({});
  const rafRef = React.useRef(0);

  React.useEffect(() => {
    function measure() {
      setNarrow(window.innerWidth <= 600);
      if (!wrapRef.current) return;
      const r = wrapRef.current.getBoundingClientRect();
      if (r.width > 0 && r.height > 0)
        setScale(Math.max(0.3, Math.min(r.width / W, r.height / H)));
    }
    measure();
    let ro;
    if (typeof ResizeObserver !== "undefined" && wrapRef.current) {
      ro = new ResizeObserver(measure);
      ro.observe(wrapRef.current);
    }
    window.addEventListener("resize", measure);
    return () => { if (ro) ro.disconnect(); window.removeEventListener("resize", measure); };
  }, []);

  React.useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, []);

  function buildSegs() {
    const segs = [];
    function add(enter, hold, leave, curve, hill) {
      const n = enter + hold + leave;
      for (let i = 0; i < n; i++) {
        let c = 0, h = 0;
        if (i < enter) { c = curve * i / enter; h = hill * i / enter; }
        else if (i < enter + hold) { c = curve; h = hill; }
        else { c = curve * (1 - (i - enter - hold) / leave); h = hill * (1 - (i - enter - hold) / leave); }
        segs.push({ curve: c, y: h, sprites: [] });
      }
    }
    add(0, 40, 0, 0, 0);
    add(10, 20, 10, 2.5, 0);
    add(8, 15, 8, -3.5, 0);
    add(10, 12, 10, 0, 25);
    add(10, 25, 10, -2.5, 0);
    add(8, 10, 8, 1.5, -18);
    add(10, 20, 10, 4, 0);
    add(8, 12, 8, 0, 35);
    add(10, 20, 10, -4, 0);
    add(8, 10, 8, 2.5, -25);
    while (segs.length < NUM_SEGS) add(6, 10, 6, (segs.length % 3 - 1) * 3, (segs.length % 5 - 2) * 12);
    segs.length = NUM_SEGS;

    const TREES = ["🌲", "🌳", "🌴"];
    const OBS = ["🪨", "🛢️", "🧊", "🌵"];

    for (let i = 0; i < NUM_SEGS; i++) {
      const seg = segs[i];
      if (i % 4 === 0)
        seg.sprites.push({ off: ((i % 2) ? -1 : 1) * (1.3 + (i * 7 % 10) / 20), emoji: TREES[i % 3], sz: 1.3 });
      if (i % 6 === 3)
        seg.sprites.push({ off: ((i % 2) ? 1 : -1) * (1.5 + (i * 3 % 10) / 25), emoji: TREES[(i + 1) % 3], sz: 1.0 });
      if (i > 50 && i % 14 === 0) {
        const o = ((i * 13) % 7 - 3) / 5;
        seg.sprites.push({ off: o, emoji: OBS[i % OBS.length], sz: 0.9, obs: true });
      }
      if (i > 35 && i % 19 === 0)
        seg.sprites.push({ off: ((i * 17) % 5 - 2) / 4, emoji: "🌶️", sz: 0.85, pick: true });
    }

    let worldY = 0;
    for (let i = 0; i < NUM_SEGS; i++) {
      worldY += segs[i].y;
      segs[i].wy = worldY;
      segs[i].wz = i * SEG_LEN;
    }
    return segs;
  }

  function makeGame() {
    return {
      segs: buildSegs(), pos: 0, speed: 0, px: 0, sv: 0,
      flash: 0, shake: 0, dead: false, picks: 0,
      hitSet: new Set(), t: 0,
    };
  }

  function startGame() {
    gRef.current = makeGame();
    setDisplayScore(0);
    setPhase("playing");
  }

  React.useEffect(() => {
    function onKD(e) {
      if (e.key === "Escape") { onClose && onClose(); return; }
      keysRef.current[e.key] = true;
    }
    function onKU(e) { keysRef.current[e.key] = false; }
    window.addEventListener("keydown", onKD);
    window.addEventListener("keyup", onKU);
    return () => { window.removeEventListener("keydown", onKD); window.removeEventListener("keyup", onKU); };
  }, []);

  React.useEffect(() => {
    if (phase !== "playing" && phase !== "dead") {
      cancelAnimationFrame(rafRef.current);
      return;
    }
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let lastT = performance.now();

    function loop(ts) {
      const dt = Math.min(0.035, (ts - lastT) / 1000);
      lastT = ts;
      const g = gRef.current;
      if (!g) { rafRef.current = requestAnimationFrame(loop); return; }
      const segs = g.segs;
      const total = segs.length;
      const trackLen = total * SEG_LEN;

      if (phase === "playing" && !g.dead) {
        g.t += dt;
        const targetSpeed = MAX_SPEED * Math.min(1, 0.35 + g.t * 0.012);
        g.speed += (targetSpeed - g.speed) * dt * 1.2;
        g.speed = Math.min(g.speed, MAX_SPEED);

        let steer = 0;
        const k = keysRef.current;
        if (k["ArrowLeft"] || k["a"] || k["A"]) steer = -1;
        if (k["ArrowRight"] || k["d"] || k["D"]) steer = 1;

        g.sv += (steer * 6 - g.sv) * Math.min(1, dt * 12);
        g.px += g.sv * dt * (g.speed / MAX_SPEED);

        const si = Math.floor(g.pos / SEG_LEN) % total;
        g.px -= segs[si].curve * g.speed * dt * 0.00008;

        if (steer === 0) g.px *= (1 - dt * 0.3);

        if (Math.abs(g.px) > 1.0) {
          g.speed *= (1 - dt * 1.5);
          g.px = Math.max(-1.4, Math.min(1.4, g.px));
        }

        g.pos += g.speed * dt;
        const sc = Math.floor(g.pos / SEG_LEN);
        setDisplayScore(sc + g.picks * 25);

        const curSi = Math.floor(g.pos / SEG_LEN) % total;
        for (let di = 0; di < 4; di++) {
          const ci = (curSi + di) % total;
          const segDist = di * SEG_LEN;
          if (segDist > SEG_LEN * 2) continue;
          for (const sp of segs[ci].sprites) {
            if (!sp.obs && !sp.pick) continue;
            const hk = ci * 1000 + Math.round(sp.off * 100);
            if (g.hitSet.has(hk)) continue;
            if (segDist > SEG_LEN) continue;
            const dx = Math.abs(g.px - sp.off);
            if (dx < 0.22) {
              g.hitSet.add(hk);
              if (sp.pick) {
                g.picks++;
                setDisplayScore(Math.floor(g.pos / SEG_LEN) + g.picks * 25);
              } else {
                g.dead = true;
                g.flash = 1;
                g.shake = 1;
                g.speed = 0;
                const finalScore = Math.floor(g.pos / SEG_LEN) + g.picks * 25;
                setDisplayScore(finalScore);
                setBest(prev => {
                  if (finalScore > prev) {
                    try { localStorage.setItem("peper-karting-best", String(finalScore)); } catch {}
                    return finalScore;
                  }
                  return prev;
                });
                setPhase("dead");
              }
            }
          }
        }
      }

      g.flash = Math.max(0, g.flash - dt * 3);
      g.shake = Math.max(0, g.shake - dt * 2);

      // === RENDER ===
      ctx.clearRect(0, 0, W, H);

      // lucht gradient
      const sky = ctx.createLinearGradient(0, 0, 0, H * 0.42);
      sky.addColorStop(0, "#4A9BE8");
      sky.addColorStop(0.6, "#7EC8F0");
      sky.addColorStop(1, "#C8E8FF");
      ctx.fillStyle = sky;
      ctx.fillRect(0, 0, W, H * 0.45);

      // zon
      ctx.save();
      const sunG = ctx.createRadialGradient(W * 0.78, 70, 5, W * 0.78, 70, 55);
      sunG.addColorStop(0, "#FFEE88");
      sunG.addColorStop(0.4, "#FFD54F");
      sunG.addColorStop(1, "rgba(255,200,50,0)");
      ctx.fillStyle = sunG;
      ctx.beginPath(); ctx.arc(W * 0.78, 70, 55, 0, Math.PI * 2); ctx.fill();
      ctx.fillStyle = "#FFE87C";
      ctx.beginPath(); ctx.arc(W * 0.78, 70, 20, 0, Math.PI * 2); ctx.fill();
      ctx.restore();

      // bergen
      const mh = H * 0.43;
      ctx.fillStyle = "#5A8D3E";
      ctx.beginPath(); ctx.moveTo(0, mh);
      for (let x = 0; x <= W; x += 3) ctx.lineTo(x, mh - 20 - Math.sin(x * 0.018 + 1) * 28 - Math.sin(x * 0.009) * 18);
      ctx.lineTo(W, mh); ctx.closePath(); ctx.fill();
      ctx.fillStyle = "#6DA54E";
      ctx.beginPath(); ctx.moveTo(0, mh);
      for (let x = 0; x <= W; x += 3) ctx.lineTo(x, mh - 8 - Math.sin(x * 0.013 + 3) * 18 - Math.sin(x * 0.007 + 1) * 12);
      ctx.lineTo(W, mh); ctx.closePath(); ctx.fill();

      // basis gras onder horizon
      ctx.fillStyle = "#3FA34D";
      ctx.fillRect(0, mh, W, H - mh);

      const baseSi = Math.floor(g.pos / SEG_LEN) % total;
      const baseY = segs[baseSi].wy || 0;
      let cx = 0, cdx = 0;

      for (let n = 0; n < DRAW; n++) {
        const idx = (baseSi + n) % total;
        const seg = segs[idx];
        seg._x = cx;
        cdx += seg.curve;
        cx += cdx;
        const dz = (n + 1) * SEG_LEN - (g.pos % SEG_LEN);
        if (dz <= 0) { seg._s = 0; continue; }
        seg._s = CAM_D / dz * SEG_LEN;
        seg._px = W / 2 + (seg._x - g.px * ROAD_W / 2) * seg._s;
        seg._py = H / 2 - ((seg.wy || 0) - CAM_H - baseY) * seg._s;
        seg._pw = ROAD_W * seg._s * 0.5;
      }

      function quad(x1, y1, x2, y2, x3, y3, x4, y4, c) {
        ctx.fillStyle = c;
        ctx.beginPath();
        ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.lineTo(x4, y4);
        ctx.closePath(); ctx.fill();
      }

      for (let n = DRAW - 1; n > 0; n--) {
        const idx = (baseSi + n) % total;
        const seg = segs[idx];
        const prev = segs[(baseSi + n - 1) % total];
        if (!seg._s || !prev._s) continue;
        if (seg._py >= prev._py) continue;

        const p = { x: prev._px, y: prev._py, w: prev._pw };
        const q = { x: seg._px, y: seg._py, w: seg._pw };

        const odd = ((idx >> 1) & 1) === 0;
        quad(0, q.y, W, q.y, W, p.y, 0, p.y, odd ? "#48B34F" : "#3FA34D");

        const rw = 0.14;
        quad(p.x - p.w * (1 + rw), p.y, p.x - p.w, p.y, q.x - q.w, q.y, q.x - q.w * (1 + rw), q.y, odd ? "#E63946" : "#FFF");
        quad(p.x + p.w, p.y, p.x + p.w * (1 + rw), p.y, q.x + q.w * (1 + rw), q.y, q.x + q.w, q.y, odd ? "#E63946" : "#FFF");

        quad(p.x - p.w, p.y, p.x + p.w, p.y, q.x + q.w, q.y, q.x - q.w, q.y, odd ? "#707070" : "#686868");

        if (odd) {
          const lw1 = p.w * 0.025, lw2 = q.w * 0.025;
          quad(p.x - lw1, p.y, p.x + lw1, p.y, q.x + lw2, q.y, q.x - lw2, q.y, "#DDD");
          const t1 = p.w * 0.33, t2 = q.w * 0.33;
          quad(p.x - t1 - lw1, p.y, p.x - t1 + lw1, p.y, q.x - t2 + lw2, q.y, q.x - t2 - lw2, q.y, "#CCC8");
          quad(p.x + t1 - lw1, p.y, p.x + t1 + lw1, p.y, q.x + t2 + lw2, q.y, q.x + t2 - lw2, q.y, "#CCC8");
        }

        for (const sp of seg.sprites) {
          if (!seg._s) continue;
          const sx = q.x + q.w * sp.off * 2;
          const sy = q.y;
          const ssz = Math.max(4, 44 * seg._s * (sp.sz || 1));
          if (sy > H - 70 || sy < H * 0.18 || ssz < 4) continue;
          if ((sp.pick || sp.obs) && g.hitSet.has(idx * 1000 + Math.round(sp.off * 100))) continue;

          ctx.font = `${ssz}px serif`;
          ctx.textAlign = "center";
          ctx.textBaseline = "bottom";
          if (ssz > 8) {
            ctx.save();
            ctx.shadowColor = "rgba(0,0,0,0.35)";
            ctx.shadowBlur = 3;
            ctx.shadowOffsetY = 2;
            ctx.fillText(sp.emoji, sx, sy);
            ctx.restore();
          } else {
            ctx.fillText(sp.emoji, sx, sy);
          }
        }
      }

      // kart
      if (!g.dead) {
        const kx = W / 2, ky = H - 58;
        const tilt = -g.sv * 2.5;
        ctx.save();
        ctx.translate(kx, ky);
        ctx.rotate(tilt * Math.PI / 180);

        ctx.fillStyle = "rgba(0,0,0,0.2)";
        ctx.beginPath(); ctx.ellipse(0, 32, 26, 7, 0, 0, Math.PI * 2); ctx.fill();

        ctx.fillStyle = "#111";
        ctx.fillRect(-29, 10, 9, 16);
        ctx.fillRect(20, 10, 9, 16);

        const bg = ctx.createLinearGradient(-22, 0, 22, 0);
        bg.addColorStop(0, "#B52030"); bg.addColorStop(0.5, "#E63946"); bg.addColorStop(1, "#B52030");
        ctx.fillStyle = bg;
        ctx.beginPath(); ctx.roundRect(-22, -24, 44, 54, 9); ctx.fill();
        ctx.strokeStyle = "#1A1A1A"; ctx.lineWidth = 2; ctx.stroke();

        ctx.fillStyle = "#8B1A24";
        ctx.beginPath(); ctx.roundRect(-16, -18, 32, 16, 4); ctx.fill();
        ctx.fillStyle = "rgba(45,156,219,0.65)";
        ctx.beginPath(); ctx.roundRect(-13, -16, 26, 10, 3); ctx.fill();

        ctx.save(); ctx.translate(-26, -4); ctx.rotate(-g.sv * 4 * Math.PI / 180);
        ctx.fillStyle = "#111"; ctx.fillRect(-4, -6, 8, 12); ctx.restore();
        ctx.save(); ctx.translate(26, -4); ctx.rotate(-g.sv * 4 * Math.PI / 180);
        ctx.fillStyle = "#111"; ctx.fillRect(-4, -6, 8, 12); ctx.restore();

        ctx.fillStyle = "#FF6B3A"; ctx.strokeStyle = "#1A1A1A"; ctx.lineWidth = 1.5;
        ctx.beginPath(); ctx.ellipse(0, -6, 10, 13, 0, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
        ctx.fillStyle = "#3FA34D"; ctx.strokeStyle = "#1A1A1A"; ctx.lineWidth = 1;
        ctx.beginPath(); ctx.ellipse(0, -22, 6, 3, -0.2, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
        ctx.fillStyle = "#FFF";
        ctx.beginPath(); ctx.arc(-4, -10, 2.5, 0, Math.PI * 2); ctx.arc(4, -10, 2.5, 0, Math.PI * 2); ctx.fill();
        ctx.fillStyle = "#1A1A1A";
        ctx.beginPath(); ctx.arc(-4, -9, 1.3, 0, Math.PI * 2); ctx.arc(4, -9, 1.3, 0, Math.PI * 2); ctx.fill();
        ctx.strokeStyle = "#1A1A1A"; ctx.lineWidth = 1.3;
        ctx.beginPath(); ctx.arc(0, -3, 2.5, 0.2, Math.PI - 0.2); ctx.stroke();

        ctx.fillStyle = "#8B1A24"; ctx.strokeStyle = "#1A1A1A"; ctx.lineWidth = 1.3;
        ctx.fillRect(-18, 24, 36, 4); ctx.strokeRect(-18, 24, 36, 4);
        ctx.fillStyle = "#FFF"; ctx.font = "bold 13px 'Bangers', sans-serif"; ctx.textAlign = "center";
        ctx.fillText("1", 0, 17);

        ctx.restore();
      }

      // snelheidsmeter
      if (!g.dead) {
        const kmh = Math.round(g.speed / SEG_LEN * 10);
        ctx.fillStyle = "rgba(0,0,0,0.55)";
        ctx.beginPath(); ctx.roundRect(8, H - 38, 105, 28, 6); ctx.fill();
        ctx.fillStyle = "#FFF"; ctx.font = "bold 17px 'Bangers', sans-serif"; ctx.textAlign = "center";
        ctx.fillText(kmh + " km/h", 60, H - 17);
      }

      if (g.flash > 0) {
        ctx.fillStyle = `rgba(255,255,255,${g.flash * 0.5})`;
        ctx.fillRect(0, 0, W, H);
      }

      rafRef.current = requestAnimationFrame(loop);
    }
    rafRef.current = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(rafRef.current);
  }, [phase]);

  function Pill({ bg, color, narrow: n, children }) {
    return (
      <span style={{
        background: bg, color, border: "3px solid #1A1A1A",
        boxShadow: "2px 2px 0 #1A1A1A",
        padding: n ? "4px 8px" : "6px 12px",
        fontFamily: "'Bangers', sans-serif",
        fontSize: n ? 16 : 20, letterSpacing: "0.04em",
      }}>{children}</span>
    );
  }

  function Title({ color, children }) {
    return (
      <div style={{
        fontFamily: "'Bangers', sans-serif", fontSize: 44,
        color, WebkitTextStroke: "1.5px #1A1A1A",
        textShadow: "3px 3px 0 #1A1A1A", letterSpacing: "0.05em",
        textAlign: "center", margin: 0,
      }}>{children}</div>
    );
  }

  function Overlay({ children }) {
    return (
      <div style={{
        position: "absolute", inset: 0,
        background: "rgba(15,20,42,0.88)",
        display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center",
        padding: 20, gap: 12, color: "#FFF8EC", zIndex: 5,
      }}>{children}</div>
    );
  }

  function BigBtn({ onClick, color, children }) {
    return (
      <button onClick={onClick} style={{
        background: color, color: "#FFF",
        border: "4px solid #1A1A1A", boxShadow: "4px 4px 0 #1A1A1A",
        fontFamily: "'Bangers', sans-serif", fontSize: 28,
        padding: "10px 28px", cursor: "pointer", letterSpacing: "0.04em",
        marginTop: 8,
      }}>{children}</button>
    );
  }

  const oText = { fontSize: 18, lineHeight: 1.5, maxWidth: 420, textAlign: "center", color: "#FFF8EC", margin: 0 };

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 200,
      background: "#1A2E1A",
      fontFamily: "'Patrick Hand', cursive", color: "#1A1A1A",
      display: "flex", flexDirection: "column",
      overscrollBehavior: "contain", touchAction: "none",
    }}>
      <div style={{
        flexShrink: 0,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: narrow ? "8px 10px" : "10px 16px", gap: 8,
        background: "rgba(255,245,220,0.96)", borderBottom: "3px solid #1A1A1A",
      }}>
        <div style={{
          fontFamily: "'Bangers', sans-serif", fontSize: narrow ? 22 : 28,
          letterSpacing: "0.04em", color: "#3FA34D",
          WebkitTextStroke: "1.2px #1A1A1A", textShadow: "2px 2px 0 #1A1A1A",
          display: "flex", alignItems: "center", gap: 6, whiteSpace: "nowrap",
        }}>
          <span style={{ fontSize: narrow ? 20 : 24, WebkitTextStroke: 0, textShadow: "none" }}>🏎️</span>
          {narrow ? "KARTING" : "PEPER KARTING"}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: narrow ? 6 : 10 }}>
          <Pill bg="#FFD23F" color="#1A1A1A" narrow={narrow}>⚡ {displayScore}</Pill>
          <Pill bg="#FF8C1A" color="#FFF" narrow={narrow}>🏆 {best}</Pill>
          <button onClick={onClose} aria-label="Sluiten" style={{
            width: 44, height: 44, borderRadius: "50%",
            background: "#1A1A1A", color: "#F0FAE6",
            border: "3px solid #F0FAE6", boxShadow: "2px 2px 0 #1A1A1A",
            fontFamily: "'Bangers', sans-serif", fontSize: 22,
            cursor: "pointer", flexShrink: 0,
          }}>✕</button>
        </div>
      </div>

      <div ref={wrapRef} style={{
        flex: 1, position: "relative",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: 6, overflow: "hidden",
      }}>
        <div style={{ width: W * scale, height: H * scale, position: "relative" }}>
          <canvas ref={canvasRef} width={W} height={H}
            style={{
              display: "block", width: W * scale, height: H * scale,
              border: "4px solid #1A1A1A", boxShadow: "5px 5px 0 #1A1A1A",
              touchAction: "none",
            }} />

          {phase === "playing" && (
            <React.Fragment>
              <div style={{
                position: "absolute", top: 16, left: 0, right: 0,
                textAlign: "center", fontFamily: "'Bangers', sans-serif",
                fontSize: 44 * scale, color: "#FFF",
                WebkitTextStroke: `${2 * scale}px #1A1A1A`,
                textShadow: `${3 * scale}px ${3 * scale}px 0 #1A1A1A`,
                pointerEvents: "none",
              }}>{displayScore} m</div>
              <div style={{
                position: "absolute", bottom: 10, left: 0, right: 0,
                display: "flex", justifyContent: "space-between", padding: "0 10px",
                pointerEvents: "auto",
              }}>
                <button
                  onPointerDown={() => { keysRef.current["ArrowLeft"] = true; }}
                  onPointerUp={() => { keysRef.current["ArrowLeft"] = false; }}
                  onPointerLeave={() => { keysRef.current["ArrowLeft"] = false; }}
                  style={{
                    width: 64 * scale, height: 64 * scale,
                    background: "rgba(255,210,63,0.75)", border: "3px solid #1A1A1A",
                    boxShadow: "3px 3px 0 #1A1A1A",
                    fontFamily: "'Bangers', sans-serif", fontSize: 26 * scale,
                    cursor: "pointer", touchAction: "none", borderRadius: "50%",
                  }}>◀</button>
                <button
                  onPointerDown={() => { keysRef.current["ArrowRight"] = true; }}
                  onPointerUp={() => { keysRef.current["ArrowRight"] = false; }}
                  onPointerLeave={() => { keysRef.current["ArrowRight"] = false; }}
                  style={{
                    width: 64 * scale, height: 64 * scale,
                    background: "rgba(255,210,63,0.75)", border: "3px solid #1A1A1A",
                    boxShadow: "3px 3px 0 #1A1A1A",
                    fontFamily: "'Bangers', sans-serif", fontSize: 26 * scale,
                    cursor: "pointer", touchAction: "none", borderRadius: "50%",
                  }}>▶</button>
              </div>
            </React.Fragment>
          )}

          {phase === "intro" && (
            <Overlay>
              <Title color="#3FA34D">PEPER KARTING</Title>
              <p style={oText}>
                Race met Hete Peper over een kronkelend circuit!<br />
                <strong>Pijltjes of knoppen</strong> om te sturen.<br />
                Ontwijkobstakels, pak pepers 🌶️ voor bonuspunten.<br />
                De snelheid loopt op, hoe ver kom jij?
              </p>
              <BigBtn onClick={startGame} color="#E63946">▶ GAS!</BigBtn>
            </Overlay>
          )}

          {phase === "dead" && (
            <Overlay>
              <Title color="#E63946">CRASH!</Title>
              <p style={oText}>
                Je reed <strong>{displayScore}</strong> meter!
                {displayScore >= best && displayScore > 0 && <><br /><span style={{ color: "#FF8C1A", fontWeight: "bold" }}>🏆 NIEUW RECORD!</span></>}
                {displayScore < best && <><br />Beste: <strong>{best}</strong></>}
              </p>
              <BigBtn onClick={startGame} color="#3FA34D">↻ NOG EENS</BigBtn>
            </Overlay>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PeperKarting });