System Requirements Document for block-blas

1. Introduction

block-blas is a playable, browser-delivered block-placement puzzle game built to closely match the block-blast game found on the Play Store. The product intent is a single, focused, drop-in puzzle experience: a player is offered block shapes, places them onto a grid, clears completed lines or blocks, watches a score accumulate, and restarts or continues to improve their result.

The audience is the casual mobile puzzle player — one-thumb, short-session, dopamine-driven — who expects chunky satisfying blocks, a board that reads instantly at arm's length, and big legible numbers. The product is deliberately a no-clock puzzle: there is no timer and no countdown pressure anywhere in the experience.

The product is delivered as a first-party web application with two destinations: an anonymous Landing entry surface and the Game session itself. No account, sign-in, or identity establishment is required to play.

2. System Overview

block-blas is a client-delivered interactive puzzle game. It consists of two first-party pages:

• Landing — the anonymous public entry surface that presents the game, its block-shape vocabulary, and a single entry action into play.
• Game — the interactive block-blast session where the player places offered shapes on the board, clears completed lines or blocks, views score and progress, and restarts after a session ends.

Both pages are owned by the application and are reachable without any access requirement. The only active human actor is the Player. There are no provider-owned surfaces, no external destinations, and no outbound recipients in the current scope.

Current scope: the Landing entry surface and the playable Game session, including shape offering, placement, line/block clearing, scoring, progress display, session end, and restart.

Narrow exclusions: no account creation, sign-in, profile, or identity management; no social, leaderboard, or multiplayer features; no in-app purchase or store integration; no timer or countdown mechanic; no notifications.

2a. Product Interpretation and Delivery Boundary

The user asked for a block-blast game that closely matches the Play Store block-blast game. That request is interpreted as a first-party, self-contained web game that reproduces the gameplay shape of the reference — an 8×8 grid, offered block shapes, placement, line/block clearing, and an accumulating score — and the feel of the reference: chunky, immediate, one-thumb, no-clock.

The reference is treated as inspiration only for gameplay and look. No assets, copy, names, or proprietary content are taken from the Play Store title; the game is built as its own product with its own visual identity.

Delivery boundary: everything the player does happens in the browser, in the two first-party pages above. There is no backend service the player interacts with, no provider-owned surface, and no external destination. The Landing page is anonymous and is the entry point; the Game page is anonymous and is where all play occurs. Because no durable, privately-owned, resumable actor state is required by the accepted behavior, no application-owned identity is introduced.

Future boundary: anything not listed under Current scope above is out of current scope and is not built, referenced, or implied by the current pages.

2c. Page Content and Component Coverage

Landing

• Information and state: the product wordmark, a one-line description of the game, the block-shape vocabulary presented as a specimen sheet, and the current best score if one exists in the session.
  • Wordmark: "BLOCK" and "BLAS" stacked, left-aligned, with a small rotated tag reading "8×8" pinned to it.
  • Specimen sheet: each block shape on its own tagged row with its name in quoted caps — "T", "L", "SQUARE", "BAR" — rendered as real block pieces.
  • Ticker tape along the bottom edge: PLACE · CLEAR · COMBO · NO TIMER ·
• Primary action: a single hard-edged orange PLAY bar that enters the Game.
• Supporting actions: none required; the specimen rows are presentational, not interactive controls.
• Domain entities: block shape (name, cell footprint, fill colour), best score.
• Component responsibilities:
  • Hero wordmark block — renders the stacked wordmark, the hairline rule between the two words, and the rotated "8×8" tag.
  • Specimen sheet — renders each block shape as a real piece with its 2px inset darker stroke and 3px hard offset shadow, with its quoted name tag.
  • Mini board panel — a #16171A panel with a 2px stroke holding a live-looking mini board populated with block pieces and one ghost piece mid-drop.
  • Play CTA — the orange entry bar with a hazard-tape rule underneath.
  • Ticker tape — the uppercase scrolling strip along the bottom edge.
• States:
  • Loading: not applicable — the Landing is static content with no data fetch.
  • Empty: the default state; best score is absent and no "BEST" figure is shown.

• Success: the Landing renders fully with the specimen sheet and the PLAY bar available.
• Error: not applicable — no remote data is required to render the Landing.
• Recovery: not applicable.

Game

• Information and state: the 8×8 board with its exposed hairline rules, the current score, the best score, the current level or progress indicator, the three offered shape slots, and the session-end state.
  • Score panel: a "SCORE" label in 13px tracked caps above tabular digits in acid yellow, inside a #16171A panel with a 2px stroke, pinned top-left.
  • Best panel: a "BEST" tagged panel showing the best score for the session.
  • Level indicator: a "LEVEL" tagged panel showing current progress.
  • Board: an 8×8 zero-radius rectangle with a 2px stroke, hairline #2A2B2F rules between cells, and a hazard-tape rule along its top edge.
  • Tray: three labelled slots bottom-centre, each holding one offered shape or showing as a disabled empty slot.
• Primary actions: drag an offered shape from its tray slot onto the board and release it on a legal cell group to place it.
• Supporting actions: restart the session after it ends; continue playing while legal placements remain.
• Domain entities: board cell (row, column, occupied/empty, block colour), block shape (name, cell footprint, fill colour), offered shape slot (index, shape or empty), score, best score, level, session state (active, ended).
• Component responsibilities:
  • Board — renders the 8×8 grid, the exposed rules, placed blocks, and the ghost outline for the shape currently being dragged.
  • Score panel — renders the "SCORE" tag and the tabular score digits, and runs the count-up roll when a clear releases score.
  • Best panel — renders the "BEST" tag and the best score, and shows the "NEW BEST" tag when the current score passes it.
  • Level panel — renders the "LEVEL" tag and the current level.

• Tray — renders the three offered shape slots, marks empty slots as disabled, and refills the slots after a placement consumes them.
• Drag layer — lifts the dragged piece 4px with its hard shadow doubled, and snaps a ghost outline to the nearest legal cell.
• Line-clear choreography — flashes cleared rows, staggers block shrink from the centre outward, and releases the score roll.
• Session-end panel — presents the final score and the restart action when no legal placement remains.
• Hazard-tape rail — the vertical striped rail running the full height of the right edge.
• States:
  • Loading: not applicable — the board is generated locally at session start.
  • Empty: a fresh session with an empty board, score at zero, and three shape slots filled.
  • Success: a placement lands legally, the piece locks into the grid, any completed lines or blocks clear, and the score rolls up.
  • Error: an illegal placement — the piece returns to its tray slot and the board is unchanged.
  • Recovery: after an illegal placement the player can immediately pick up the same or another offered shape and try again; after a session ends the player can restart and receive a fresh board.

3. Functional Requirements

FR-1 — Enter the game from the public entry surface (provenance: required_inference) As a Player, I should be able to open the Landing page and start playing from a single clear entry action, so that I can get into a session without any setup.

• Trigger/input: the Player opens the Landing page and activates the PLAY bar.
• Observable result: the Game page opens with a fresh 8×8 board, score at zero, and three shape slots filled.
• Access state: anonymous; no account or sign-in is required.
• Failure/recovery: if the Game cannot be entered, the Player remains on the Landing and can retry the PLAY action.
• Continuation: the Player proceeds to place shapes (FR-2).

FR-2 — Place an offered block shape on the board (provenance: explicit) As a Player, I should be able to drag an offered block shape from its tray slot onto the board and place it on a legal cell group, so that I can build up the grid.

• Trigger/input: the Player picks up a shape from one of the three tray slots and drags it over the board.
• Observable result: the piece lifts 4px with its hard shadow doubled, a ghost outline snaps to the nearest legal cell group, and on release the piece locks into the grid as solid blocks.
• Access state: anonymous; available throughout an active session.
• Failure/recovery: if the release target is not a legal cell group, the piece returns to its tray slot and the board is unchanged (FR-6).
• Continuation: the placed piece may complete lines or blocks (FR-3), and the tray refills (FR-4).

FR-3 — Clear completed lines or blocks (provenance: explicit) As a Player, I should have completed lines or blocks cleared automatically when a placement fills them, so that the board stays playable and I am rewarded.

• Trigger/input: a placement fills every cell of one or more rows, columns, or blocks.
• Observable result: the cleared rows flash #F4F2ED for 80ms, then each block shrinks to zero in a 40ms stagger from the centre outward, and the cells become empty.
• Access state: anonymous; automatic during an active session.
• Failure/recovery: not applicable — clearing is deterministic once a line or block is filled.
• Continuation: the score rolls up (FR-5) and the Player continues placing (FR-2).

FR-4 — Receive a refilled set of offered shapes (provenance: required_inference) As a Player, I should receive new offered shapes in the tray slots as I consume them, so that I always have something to place while the session is active.

• Trigger/input: a placement consumes one or more of the three offered shapes.
• Observable result: the consumed slots are refilled with new shapes; slots with no shape show as disabled.
• Access state: anonymous; automatic during an active session.
• Failure/recovery: if no shape can be offered, the session ends (FR-7).
• Continuation: the Player continues placing (FR-2).

FR-5 — See the score accumulate (provenance: explicit) As a Player, I should see my score increase as I clear lines and blocks, so that I can judge how well the session is going.

• Trigger/input: a line or block clear completes.
• Observable result: the score digits roll up over 300ms in tabular numerals and settle at the new total; the "SCORE" panel is the loudest element on the screen.
• Access state: anonymous; visible throughout an active session.
• Failure/recovery: not applicable.
• Continuation: the Player continues placing (FR-2) or the session ends (FR-7).

FR-6 — Recover from an illegal placement (provenance: required_inference) As a Player, I should be told immediately when a placement is not allowed, so that I can correct it without losing my session.

• Trigger/input: the Player releases a shape on a cell group that is not legal.
• Observable result: the piece returns to its tray slot, the board is unchanged, and the piece performs an 80ms horizontal 2px shake with no colour change.
• Access state: anonymous; available throughout an active session.
• Failure/recovery: this requirement is the recovery path; the Player can immediately retry with the same or another shape.
• Continuation: the Player continues placing (FR-2).

FR-7 — Reach and understand the end of a session (provenance: required_inference) As a Player, I should be told clearly when no legal placement remains, so that I understand the session is over and see my final result.

• Trigger/input: no offered shape can be legally placed anywhere on the board.
• Observable result: the session ends and the final score is presented together with the best score for the session.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the Player can restart (FR-8).

FR-8 — Restart and play again (provenance: required_inference) As a Player, I should be able to restart after a session ends, so that I can try to beat my previous result.

• Trigger/input: the Player activates the restart action on the session-end state.
• Observable result: a fresh 8×8 board is generated, the score resets to zero, the three shape slots are refilled, and the best score is retained.
• Access state: anonymous.
• Failure/recovery: if the restart does not take effect, the Player can activate it again.
• Continuation: the Player returns to placing shapes (FR-2).

FR-9 — Track and be shown a best score (provenance: required_inference) As a Player, I should see my best score for the session and be told when I beat it, so that I have a target to chase.

• Trigger/input: the current score passes the stored best score.
• Observable result: the "BEST" panel updates and a "NEW BEST" tag is shown.
• Access state: anonymous; the best score is held for the session.
• Failure/recovery: not applicable.
• Continuation: the Player continues placing (FR-2).

FR-10 — See level or progress (provenance: required_inference) As a Player, I should see a level or progress indicator that advances as I clear, so that I can feel forward motion within a session.

• Trigger/input: the Player clears lines or blocks.
• Observable result: the "LEVEL" panel advances.
• Access state: anonymous; visible throughout an active session.
• Failure/recovery: not applicable.
• Continuation: the Player continues placing (FR-2).

FR-11 — Play without any clock pressure (provenance: explicit) As a Player, I should never be shown a timer or countdown, so that I can think about my placements at my own pace.

• Trigger/input: any point in the Landing or Game experience.
• Observable result: no timer, countdown, or time-pressure indicator is ever displayed, and no session ends because of elapsed time.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: not applicable.

4. User Personas

Player

Product context. The Player is the sole active human actor in block-blas. They arrive at the Landing page from a link or a direct visit, on a phone or a desktop browser, with no account and no prior setup. They are a casual puzzle player in the Play Store block-blast audience: drop-in, one-thumb, short-session, and looking for immediate, legible feedback.

Primary goal. To play a satisfying block-placement puzzle round — placing offered shapes onto the 8×8 board, clearing lines and blocks, and watching the score climb — and then to restart and try to beat that result.

Distinct accepted responsibilities.

• Choosing where each offered block shape goes on the board, weighing the three available shapes against the current grid.
• Committing a placement by releasing a dragged shape onto a legal cell group.
• Reading the board state at a glance and deciding whether to clear now or build toward a larger clear.
• Reacting to the score, best score, and level indicators to judge how the session is going.
• Recognising when no legal placement remains and deciding to restart.

Relevant inputs and decisions. The Player's inputs are the drag-and-release of a shape from a tray slot onto the board, and the activation of the PLAY and restart actions. Their decisions are which of the three offered shapes to use, where to place it, and when to restart.

Interactions with other accepted participants. None. The Player is the only active human actor; there is no opponent, teammate, counterparty, or recipient in the current scope. All other work is local game logic.

Observable success. The Player sees their placed piece lock into the grid, sees completed lines or blocks flash and clear, sees the score digits roll up, sees the best score update with a "NEW BEST" tag when beaten, and sees a clear session-end state with a restart action when the board can no longer accept any offered shape.

What makes this role distinct. The Player is not an administrator, author, or operator of anything — there is no content to manage, no configuration to set, and no other user to serve. Their entire relationship with the product is the moment-to-moment loop of choosing, placing, clearing, and scoring, and the product's success is measured entirely by how legible and satisfying that loop is at arm's length.

5. Core User Flows

Flow A — First visit and entry into play

1. The Player opens the Landing page. The page renders the stacked "BLOCK / BLAS" wordmark with the rotated "8×8" tag, the specimen sheet of block shapes with their quoted names, the mini board panel, and the ticker tape along the bottom edge.
2. The Player reads the one-line description and scans the specimen sheet to understand the shape vocabulary.
3. The Player activates the orange PLAY bar.
4. The Game page opens with a fresh 8×8 board, the score at zero, and three shape slots filled in the tray.
5. Next step: the Player begins placing shapes (Flow B).

Flow B — Placing a shape and clearing a line

1. On the Game page, the Player looks at the three offered shapes in the tray and at the current board.
2. The Player picks up one shape and drags it over the board. The piece lifts 4px with its hard shadow doubled, and a ghost outline snaps to the nearest legal cell group.
3. The Player releases the shape on a legal cell group. The piece locks into the grid as solid blocks with their 2px inset darker stroke and 3px hard offset shadow.
4. If the placement fills one or more rows, columns, or blocks, those lines clear: the cleared rows flash #F4F2ED for 80ms, then each block shrinks to zero in a 40ms stagger from the centre outward, and the cells become empty.
5. The score digits roll up over 300ms in tabular numerals and settle at the new total. If the new total passes the best score, the "BEST" panel updates and a "NEW BEST" tag appears.
6. The consumed tray slot is refilled with a new shape; any slot with no shape shows as disabled.
7. Next step: the Player continues placing (back to step 1) until no legal placement remains.

Flow C — Illegal placement and immediate recovery

1. On the Game page, the Player drags a shape over the board and releases it on a cell group that is not legal.
2. The piece returns to its tray slot, the board is unchanged, and the piece performs an 80ms horizontal 2px shake with no colour change.
3. The Player immediately picks up the same shape or a different offered shape and tries again.
4. Next step: the Player continues placing (Flow B).

Flow D — Session end and restart

1. On the Game page, the Player reaches a board state where none of the offered shapes can be legally placed anywhere.
2. The session ends and the final score is presented together with the best score for the session.
3. The Player activates the restart action.
4. A fresh 8×8 board is generated, the score resets to zero, the three shape slots are refilled, and the best score is retained.
5. Next step: the Player returns to placing shapes (Flow B), now chasing the retained best score.

Flow E — Chasing the best score

1. On the Game page, the Player is mid-session with a current score below the best score.
2. The Player clears lines and blocks, and the score rolls up.
3. The current score passes the best score. The "BEST" panel updates and a "NEW BEST" tag is shown.
4. The Player continues placing, now with the new figure as the target.
5. Next step: the Player continues placing (Flow B) or the session ends (Flow D).

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: Virgil Abloh — industrial framing, quoted labels, hazard-tape accents, an exposed grid, and a 3% remix of the familiar. Headline idea: a block-blast game wearing its own quotation marks.

Mode: dark.

Colour tokens by role

Block fill set (separate, deliberate — never used for CTAs or text): #FF4D00, #E8FF2E, #2E6BFF, #00C48C, #FF2D9B, #FFB300, #7A5CFF, #00D5FF. Each block is a solid fill with a 2px darker inner stroke and no gradient. Orange and yellow are never used together in the same block.

Typography

• Headings: Archivo Black, all-caps, wide 0.08em letterspacing for labels and tags, tight -0.02em tracking at display size for the wordmark and score. Weight range 700–900 only; no light weights, no italics.
• Body: Space Grotesk.
• Score digits: Space Grotesk 700 with tabular numerals so they never jitter as they count.
• Scale: 1.25 modular on mobile, 1.333 on desktop. Wordmark clamp(40px, 11vw, 128px); score digits clamp(48px, 14vw, 96px); section headings clamp(28px, 6vw, 56px); labels 13px uppercase tracked +0.08em; body 16px/1.55; ticker tape 14px uppercase. Maximum 5 sizes on any screen.
• Everything label-like is quoted: "SCORE", "BEST", "LEVEL".

Shape language. Hard-edged and industrial. Zero border-radius on the board frame, tiles, and buttons — everything is a rectangle with a 2px #F4F2ED or #16171A stroke, like construction framing. Block pieces are square-cornered with a 2px inset darker stroke and a 3px offset hard shadow (no blur) so they read as physical chips. Hazard-tape stripes (45° repeating-linear-gradient of #FF4D00 and #0B0B0C, 12px bands) appear as thin 10px rules under section headers and along the top edge of the board. Labels are small rectangle tags with a 1px stroke, sometimes rotated -2° like a sticker slapped on. Nothing is pill-shaped; nothing is soft.

Layout. A strict exposed 8×8 grid governs every screen; hairline #2A2B2F rules are drawn visibly between the board cells and extended out to the page margins so the whole viewport reads as one ruled sheet. Landing: asymmetric split — left 7 columns carry the oversized stacked wordmark with a rotated tag reading "8×8" pinned to it; right 5 columns hold a live, playable-looking mini board built from real block pieces. Game screen: board centred and dominant, score block pinned top-left as a tagged panel, next-piece tray as three labelled slots bottom-centre, and a vertical hazard-tape rail running the full height of the right edge. On mobile everything collapses to one column with the board at 92vw and the tray as a horizontally scrollable row of three slots.

Imagery. No photography, no illustration, no 3D renders. The imagery is the game itself plus industrial graphic matter: hazard-tape stripes, exposed grid rules, sticker tags, quotation-mark glyphs used as oversized punctuation, and the block pieces treated as product. The Landing hero shows the actual block shapes arranged as a specimen sheet — each shape on its own tagged row with its name in quoted caps ("T", "L", "SQUARE", "BAR") — like a parts catalogue for a drop.

Readable text and controls stay whole at every viewport. Headlines, wordmarks, labels, numbers, panel text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Decoration, texture, and motion may be cropped, bled off an edge, rotated, or overlapped exactly as the direction asks, as long as they cover no readable text or control. The ticker tape and the mobile tray row may cross the viewport edge by design because they move or scroll, and every item becomes fully readable as it passes. With prefers-reduced-motion, the ticker wraps into rows and the tray becomes a horizontally scrollable row so each item can be brought fully into view.

Forbidden: the generic indigo/blue-on-white SaaS template; blue/indigo as an action colour (the palette's #2E6BFF exists only as one of eight block fills); gradients, glassmorphism, blur, or soft drop shadows; rounded corners on the board, tiles, or buttons; Inter, Roboto, Poppins, or any system-ui font for headings or body; photography, character illustration, or 3D renders; confetti, particle bursts, or celebratory 3D animations on a line clear; a centred hero stack of headline + subtext + button; any timer or countdown pressure.

7. Signature Design Concept

"The Ruled Sheet." The Landing is a full-bleed industrial black ground with the 8×8 grid rules drawn edge-to-edge and bleeding off all four sides, so the entire viewport reads as one ruled sheet rather than a page with a hero on it.

The dominant element is BLOCK and BLAS stacked in Archivo Black at clamp(40px, 11vw, 128px), left-aligned flush to the grid's second column, occupying the left 60% of the viewport and running nearly full height. The two words are separated by a single hairline rule, with a small rotated orange tag reading "8×8" overlapping the wordmark's baseline — the wordmark is quoted, like a sticker slapped on the product.

To the right, a real playable-looking mini board sits on a #16171A panel with a 2px stroke, populated with eight solid block pieces and one ghost piece mid-drop. Beneath the wordmark, one line of Space Grotesk body at 16px, then a single hard-edged orange CTA bar reading PLAY, flush-left, with a hazard-tape rule underneath. A thin ticker tape of uppercase text — PLACE · CLEAR · COMBO · NO TIMER · — runs along the very bottom edge, crossing the viewport by design.

No centred stack, no gradient, no blob. The concept recomposes only accepted content — the wordmark, the shape vocabulary, the entry action, and the no-clock promise — into a composition that makes the grid itself the brand.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: flat

Landing Hero Motion Brief

Focal subject. The oversized stacked "BLOCK / BLAS" wordmark and the adjacent mini board panel populated with real block pieces and one ghost piece mid-drop.

Input → transformation → outcome thesis. As the Player moves their pointer or finger across the Landing, the ghost piece on the mini board tracks toward the nearest legal cell group and the exposed grid rules respond with a subtle emphasis — the same ghost-outline mechanic the Player will use in the real Game. The outcome is that the Player understands the core interaction — pick up a shape, see where it can go, drop it — before they ever press PLAY.

Motion vocabulary. Snappy and mechanical, never bouncy. The piece lifts 4px with its hard shadow doubling; the ghost outline snaps to the nearest legal cell. Valid placement is a 120ms scale 1.0→1.04→1.0 with the hard shadow collapsing. Invalid placement is an 80ms horizontal 2px shake with no colour change. Everything is restrained to 120–240ms; no easing theatrics, no particles, no confetti.

Composed first frame. Full-bleed black ground with the 8×8 rules bleeding off all four edges. "BLOCK" and "BLAS" stacked left, flush to the second column, separated by a hairline rule, with the rotated orange "8×8" tag overlapping the baseline. The mini board panel on the right, populated and holding one ghost piece mid-drop. The 16px body line beneath the wordmark, the orange PLAY bar flush-left with its hazard-tape rule, and the ticker tape crossing the bottom edge.

Reduced-motion state. With prefers-reduced-motion, the hero renders as a static composed frame: the ghost piece sits at a fixed legal cell, the ticker tape wraps into rows so every item is fully readable, and no lift, snap, shake, or count-up animation plays. The PLAY bar and all readable text remain whole and fully visible.

Game Screen Motion

The Game screen carries the product's only motion flourish: the line-clear choreography. Cleared rows flash #F4F2ED for 80ms, then each block shrinks to zero in a 40ms stagger from the centre outward, while the score digits roll up over 300ms in tabular numerals. Piece drag lifts the piece 4px with its hard shadow doubling and snaps a ghost outline to the nearest legal cell. Invalid placement is an 80ms horizontal 2px shake with no colour change. No particles, no confetti, no celebratory 3D — the flash and the number are the reward.

9. Non-Functional Requirements

NFR-1 — No clock pressure (provenance: explicit) The product must never display a timer, countdown, or any time-pressure indicator, and no session may end because of elapsed time. Rationale: the user's reference is a no-clock block puzzle, and the creative direction forbids implying one.

NFR-2 — Instant, legible board reading (provenance: required_inference) The board, score, best score, level, and tray must be readable at arm's length on a phone. Rationale: the accepted audience is a one-thumb, short-session casual player, and the creative direction sets the score panel as the loudest element on the Game screen.

NFR-3 — Responsive integrity (provenance: explicit) Headlines, wordmarks, labels, numbers, panel text, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering any part of them. Rationale: stated directly in the creative direction's readability rule.

NFR-4 — Reduced-motion support (provenance: explicit) With prefers-reduced-motion, the product must provide a usable static arrangement: the ticker wraps into rows, the mobile tray becomes a horizontally scrollable row, and no lift, snap, shake, or count-up animation plays. Rationale: stated directly in the creative direction's readability rule.

NFR-5 — Motion restraint (provenance: explicit) All motion must stay within 120–240ms, use hard offset shadows with zero blur, and avoid particles, confetti, and celebratory 3D. Rationale: stated directly in the creative direction's motion section.

NFR-6 — Anonymous, no-account play (provenance: required_inference) The product must be fully playable without any account, sign-in, or identity establishment. Rationale: no accepted behavior requires durable, privately-owned, resumable actor state, and the accepted access contract marks both pages as none.

NFR-7 — Session-local best score (provenance: required_inference) The best score must be retained across restarts within the session so the Player has a target to chase. Rationale: FR-9 requires a "NEW BEST" outcome, which is only meaningful if the figure survives a restart.

10. Tech Stack

• React — the two first-party pages (Landing, Game) are built as a React web application.
• Vite — build tooling and local development server for the React application.
• TypeScript — typed implementation of the board, shape, and session domain entities.
• CSS with custom properties — the palette, type scale, and shape language are expressed as design tokens; the exposed grid rules and hazard-tape stripes are CSS.
• Client-side session state only — the board, tray, score, best score, level, and session state live in the browser for the duration of the session; no backend service is required by any accepted requirement.

No database, no server framework, and no container orchestration are required by the current scope.

11. Assumptions and Constraints

Constraints

• C-1 (explicit) The game should closely match the block-blast game available on the Play Store.
• C-2 (explicit) The Play Store block-blast game is used as a reference for gameplay and look only; no specific URL or asset was supplied, and the reference is inspiration only — no assets, copy, names, or proprietary content are taken from it.
• C-3 (explicit) The product must never imply a timer or countdown.
• C-4 (explicit) The creative direction's palette, typography, shape language, layout, motion, and readability rules are authoritative for the visual and interaction design.

Assumptions

• A-1 (required_inference) The Player plays in a single browser session; the best score is retained across restarts within that session and is not persisted beyond it.
• A-2 (required_inference) The board is 8×8, matching the "8×8" tag in the creative direction and the exposed grid that governs every screen.
• A-3 (required_inference) The three tray slots are refilled as shapes are consumed, so the Player always has something to place while the session is active.
• A-4 (required_inference) A session ends when no offered shape can be legally placed anywhere on the board.
• A-5 (required_inference) The Landing page is anonymous and is the entry point; the Game page is anonymous and is where all play occurs. No account, sign-in, or identity management is introduced.

12. Glossary

• Block shape — one of the offered pieces the Player can place on the board, defined by its name, cell footprint, and fill colour.
• Board — the 8×8 grid of cells onto which block shapes are placed.
• Cell — a single square of the board, identified by row and column, and either occupied by a block or empty.
• Clear — the automatic removal of a completed row, column, or block, followed by the flash-and-shrink choreography and the score roll.
• Ghost outline — the snapped preview showing where the currently dragged shape would land.
• Level — the progress indicator that advances as the Player clears lines and blocks within a session.
• Offered shape — a block shape currently available in one of the three tray slots.
• Session — one continuous run of play, from entering the Game to the point where no legal placement remains.
• Tray — the row of three labelled slots holding the currently offered shapes.
• Best score — the highest score reached in the current session, retained across restarts and shown in the "BEST" panel.