# Phone level map > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The world map of a casual puzzle game called Saltlight: one tall, vertically scrolling world that climbs from a deep kelp reef, through the shallows and a sandbar, up gull cliffs to a lighthouse at the top. Fourteen level nodes sit on a winding road. Cleared levels are cream discs with one to three stars fanned above them, the current level is a larger coral disc with a pulsing ring and a little crab token named Pip standing on it, and locked levels are a solid pale grey-green with a lock icon and their number (no opacity tricks, so they still pass contrast). On load the camera eases up from the reef to the current level. Tapping the current level opens a level card sheet; clearing it stamps the stars, draws the next stretch of road, hops Pip along it and moves the camera. The detail worth copying is the order of that reward: stars, then road, then hop, then the new node pops, each a separate beat. The visual language is custom game UI: thick ink outlines (4px `#0B3440`), a 4–7px solid "under-lip" shadow for pressable discs, rounded Baloo 2 everywhere. The sheet follows iOS 26-ish conventions (28px top radius, grabber, iOS sheet curve). ## Reference behaviour 1. Initial state: levels 1–6 cleared with stars `3, 2, 3, 3, 1, 3`; level 7 current; 8–14 locked. The world starts scrolled to the very bottom (the reef) and on the first frame eases up over 1,400ms (quartic ease-out) until level 7 sits at 56% of the viewport height. 2. HUD, fixed: lives chip top-left (heart, "4", "+1 in 12:40" counting down once a second; at 0:00 it wraps to 30:00) and a coin chip top-right (shell coin, "2,480"). Both are solid `#0B2E38` plates, so text never sits directly on the map. 3. The current node pulses: a 3px cream ring scales 1 → 1.45 and fades over 1,800ms, forever. Pip bobs 4px every 2,400ms. 4. Tap a locked node: it wiggles ±5px for 320ms and a toast "Clear level 7 to unlock" rises at the bottom for 1,800ms. 5. Tap the current node: a scrim fades in (300ms) and the level card sheet slides up (420ms, `cubic-bezier(.32,.72,0,1)`). It shows zone eyebrow "SANDBAR", "Level 7" at 44px, a goal row ("Free 18 hermit crabs / in 24 moves · tide rises every 6"), three score tiers (1, 2, 3 stars: 9,000 / 14,000 / 19,500), "Your best: Not cleared yet", a coral Play button (60px) and a secondary outlined "Complete level" button (48px). Focus moves to Complete level. 6. Tap a cleared node: the same sheet with "Replay" as the primary label, the best score (level 6: "19,710"), tiers already earned filled with a gold tint, and no Complete control. 7. Close with the X, the scrim, Play, or Escape. Focus returns to the node that opened it. 8. Complete level: the sheet closes; at +320ms the node turns cream, its stars stamp in (scale 2.4 → 1, −20° → 0°, 140ms stagger), the coin count rises by 20 per star and a toast reads "Level 7 cleared · +60 coins"; at +760ms the next road segment draws itself (stroke-dashoffset, 700ms); at +900ms Pip hops along that segment in three small arcs (660ms); at +1,560ms the next node pops in as current (scale .6 → 1, overshoot) and the camera eases to it over 900ms. 9. Clearing level 14 skips the road and lights the lighthouse lamp (opacity .55 → 1 over 800ms). 10. Input is ignored while a clear sequence is running. ## Structure ``` 390 × 844 viewport · world scrolls vertically, 2,500px tall ┌──────────────────────────────────┐ │ 54px clear (status bar) │ │ [♥ 4 +1 in 12:40] [◎ 2,480] │ HUD plates at top:58, 44px tall, 16px gutters │ │ │ (lock 9) │ locked 56px disc │ ╱ │ road: 22px ink + 10px cream (lit) or dotted (locked) │ (lock 8) │ │ ╱ │ │ 🦀 │ Pip token 46×40, 78px above node centre │ (●7●) pulsing ring │ current 66px coral disc │ │ │ │ [● SANDBAR · 7–10] │ zone plate, pill, 12px caps │ ★★★ │ stars fan, 78px wide, 30px above disc │ ( 6 ) │ cleared 56px cream disc │ ~~~~ shoreline ~~~~ │ │ ( 5 ) │ │ [toast] │ bottom:46px └──────────────────────────────────┘ Sheet (when open): full width, bottom 0, padding 12 20 34, 28px top radius ``` World bands, top to bottom (y in a 2,500px world): dusk sky 0–700, cliffs from ~600 (two greens), sand from ~1,030, a pale wet-sand strip at ~1,550, shallows from ~1,590, deep reef from ~2,010. Each band edge is a wavy quadratic path. Node positions: `x = 195 + 104·sin(i·0.9 + 0.35)`, `y = 2500 − 250 − i·150` for `i = 0…13`. Road segment `i → i+1` is the cubic `M x0 y0 C x0 (y0−80) x1 (y1+80) x1 y1`. - `.world`: a fixed, full-viewport `div` with `overflow-y:auto`, scrollbar hidden. - `.bands`: one SVG stretched to the world width (`preserveAspectRatio="none"`), so bands reach the edges on any width. - `.lane`: a 390px column centred in the world; holds the decoration SVG (lighthouse, gulls, rocks, shells, kelp, coral, bubbles, road) and the node buttons. - Nodes: `