סטודיו משחקים עם ארקייד חי

Build a "Small Kettle Arcade Studio" React component.

CONCEPT: The website of a three-person cozy game studio in Akko. The hero holds a real, playable toy: a little arcade cabinet running their game Dumpling Dash. Warm, round, funny, never childish.

LAYOUT & CONTENT:
- Nav: round tomato 'sk' badge + 'Small Kettle', Games / Devlog / Arcade tour / Shop, pill button 'Wishlist Dumpling Dash'.
- Hero (two columns): a mint pill 'Three people, one kettle, Akko' tilted -6deg, headline 'Games that feel like a warm kitchen.' (92px, 'warm kitchen.' in tomato), a line inviting you to play, and two outline pills showing the controls (mouse, arrow keys). Right: the cabinet: tomato marquee top with 16 bulbs and 'Dumpling Dash', plum body with a hard 16px offset shadow, a 420x320 canvas screen, a tilting joystick and two round buttons.
- A rotated tomato ticker: 'DUMPLING DASH ✿ NIGHT KETTLE ✿ MOSS & MOP ✿ ARCADE TOUR SPRING 2027'.
- Our games: three rounded cards (tomato, plum, green) each with an SVG critter (smiling dumpling, steaming kettle, frog), title, one-liner, platform chip.
- The cabinet tour: sky-blue band, four date rows (MAR 14 Haifa, APR 02 Tel Aviv, APR 23 Be'er Sheva, MAY 08 Jerusalem) with venue and a pin.
- Newsletter: 'Insert coin, get a postcard.' with an email field and an 'Insert coin' button.
- Footer in plum.

INTERACTIONS & MOTION:
- The game (canvas, devicePixelRatio 2, requestAnimationFrame): dumplings fall at speed rising with score; every fifth spawn is a chili. A wooden steamer basket eases toward its target x (lerp 0.18). Mouse over the canvas sets the target; Left/Right arrows move it only while the canvas is focused (tabIndex 0, preventDefault on those two keys only, so the page never scrolls). Catch = +1, chili = -3 and the basket shakes for 400ms. Score is drawn on screen and mirrored in an aria-live line.
- Attract mode: after 2.5s without input the basket chases the lowest dumpling by itself and 'DEMO, MOVE TO PLAY' blinks, so the window is alive from the first frame (start with six items already falling).
- Joystick knob tilts up to 20deg toward the basket's direction on a spring (300/18).
- Marquee bulbs alternate with steps(1) every 0.6s; the ticker loops linearly; critters wobble and the kettle's steam curls rise on staggered timings.
- Cards spring in with small rotations and lift 10px on hover; tour rows slide in with stagger; buttons tilt on hover and squash on tap.

DESIGN SYSTEM — Candy Cabinet:
- Cream #FFF4E0 ground, tomato #FF5A3C, butter #FFD34E, mint #8FD9B6, plum #3B2340 (text and shadows), sky #A8D8FF, blush #FFB3C7.
- Big radii (24-36px), pills for controls, hard plum offset shadows (10-16px), no blur.
- Shrikhand for display, Fredoka for everything else.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, clip-path and SVG attributes only. Ambient loops pause or go static under prefers-reduced-motion via useReducedMotion() and a CSS media query.
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up. All brands are fictional.
- Icons: lucide-react where icons are needed; illustrations are inline SVG, CSS or canvas, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and prices. Nothing on the page may grab focus or scroll the window.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.