# SUSHI QUEST — Style Reference

> A pocket-sized sushi adventure surrounded by an electric-blue pixel sea.

**Original URL:** [akindo-sushiro.co.jp/expo2025_gameqr/](https://www.akindo-sushiro.co.jp/expo2025_gameqr/)
**Final URL:** [akindo-sushiro.co.jp/expo2025_gameqr/](https://www.akindo-sushiro.co.jp/expo2025_gameqr/)
**Theme:** saturated blue scenery, black adventure sections, and a bright introductory dialog; no selectable color theme was verified.
**Inspected:** September 12, 2026, at 13:38:34 UTC / 22:38:34 JST, using the supplied browser inspection.
**Viewports:** 1440 × 1000 and 390 × 844 CSS pixels.
**Scope:** the current Japanese educational browser experience, including the opening explanation dialog, visible map and story fragments, desktop country navigation, language affordances, character and quest structures recorded in the DOM, and the closing brand statement. All five original-page screenshots show the introduction dialog open.

SUSHI QUEST explains fisheries challenges through an RPG vocabulary: countries, heroes, encounters, dialogue, and sets of three possible answers. A narrow vertical adventure column carries the content. On desktop, electric-blue patterned scenery fills the surrounding space, with navigation on the left, a large decorative sprite on the right, and overlapping pixel illustrations along the bottom.

Its strongest visual relationship is between dense, colorful artwork and simple reading surfaces. Tile-map terrain, sushi creatures, boats, machinery, and beveled controls create the game world. Black dialogue regions and a white introductory text panel provide places to read. The introductory dialog is especially prominent in the supplied evidence: a deep-blue illustrated container with a mint wordmark, three characters, cropped clouds, stepped white corners, and a cyan waterline.

## How to Read This Reference

- **Measured** means a value reported by the supplied rendered DOM or computed-style evidence. These measurements were not collected through a new browser session.
- **Visual estimate** means a dimension or color inferred from the original-page screenshots. Estimated hexadecimal colors are implementation starting points, not sampled source values.
- **Derived** means arithmetic based on measured values, such as the 390/400 scaling relationship.
- **Recommended** means guidance for a new implementation. It does not establish existing behavior.
- Token names are descriptive aliases. The supplied custom properties do not expose a complete design-token system.
- The open dialog obscures substantial content. Underlying text recorded in the DOM establishes content structure, but does not establish that every passage was visually inspected or every control exercised.
- Some computed paragraph and heading styles differ from their visible appearance. Descendant styles, artwork lettering, and other rendering details were not supplied, so those differences remain explicit throughout this reference.

## Tokens — Colors

### Default Palette

| Name | Value | Alias | Evidence and role |
| --- | --- | --- | --- |
| Adventure Black | `#000000` | `--color-black` | Measured background of the character/quest section; visually supports dark game scenes and framed dialogue. |
| Panel White | `#ffffff` | `--color-white` | Measured in text and background declarations; visually matches the introductory reading panel and bright frame details. |
| Electric Blue | approximately `#2354ff` | `--color-stage` | Visual estimate for a middle tone in the large desktop side fields. The scenery contains several blues. |
| Deep Quest Blue | approximately `#0b00a6` | `--color-dialog` | Visual estimate for the introductory dialog's saturated blue field. |
| Ocean Cyan | approximately `#43bcef` | `--color-water` | Visual estimate for the water decoration at the dialog's lower edge. |
| Pale Mint | approximately `#c9ffd6` | `--color-mint` | Visual estimate for light portions of the illustrated wordmark. |
| Aquaculture Blue | approximately `#258de8` | `--color-aquaculture` | Approximate category seed for the blue country control and associated character imagery. |
| Machine Green | approximately `#81c600` | `--color-machine` | Approximate category seed for the green country control, characters, and answer treatment. |
| Research Gold | approximately `#dc9c40` | `--color-research` | Approximate category seed for the warm country control and character details. |
| Central Veil | `rgb(0 0 0 / 0.75)` | `--color-veil` | Recommended approximation of the strong dimming behind the introduction. Its source opacity was not measured. |

The category controls are visibly subdued in the captured dialog state. Their unobscured fill colors cannot be recovered reliably from these images; the category values above are approximate reusable hues.

The page's color identity depends on spatial allocation. Blue occupies most of the desktop viewport, while black dominates the narrow adventure area beneath the opening map. White is concentrated in reading panels, borders, clouds, and highlights. Green and warm orange distinguish characters and countries rather than acting as interchangeable global action colors.

### Rendered Color Versus Sampled Node Color

The introductory paragraph's sampled node reports white text, but its visible text is black on white. The closing statement also appears dark on a light surface beneath the veil, while its sampled ancestors report black backgrounds and white text. These observations do not establish a particular blending technique. They show that the provided node samples are insufficient to explain every painted layer.

Use the screenshots for visible foreground/background relationships. Do not reproduce white-on-white introductory copy by copying one sampled declaration in isolation.

The supplied `--swiper-theme-color: #007aff` is a measured custom property, but its presence does not establish that it is the site's main brand blue or that a particular carousel interaction was used.

## Tokens — Typography

### Body and Standard Interface Copy

**Measured family:** `YakuHanJP, 'Noto Sans JP', sans-serif`.

The body, country-link nodes, answer-link nodes, and closing-copy node report this stack at `16px`, weight `400`. The actual loaded face was not independently verified. Preserve this distinction between a computed family declaration and proof that a specific font file rendered every glyph.

Use readable Japanese sans-serif copy for explanations and standard labels. The imagery already supplies substantial visual complexity, so ordinary text benefits from restrained spacing and regular weight.

### RPG Dialogue and Utility Labels

**Measured family:** `DotGothic16-Regular`.

Narrative paragraphs and the `language` label report this family. At desktop size, dialogue paragraphs use `15px` type and `25.5px` line height. At the mobile viewport, many become `14.625px` and `24.8625px`, preserving a `1.7` line-height ratio.

The language label remains `15px / 15px` in both snapshots. This is a useful example of mixed scaling: game geometry and dialogue can shrink slightly while a utility caption retains its size.

A generic `sans-serif` fallback in the Quick Start is a recommended addition; the sampled dialogue family did not include that fallback.

### Identity and Section Lettering

The SUSHI QUEST wordmark is illustrated lettering with mint highlights, dark edging, and a fantasy-game silhouette. Preserve it as authorized artwork rather than approximating it with an invented display-font name.

`STORY` appears as a large, bold, white uppercase heading with a small red directional marker. Its sampled `h2` reports only `16px`, weight `400`, while its box is about `40.8px` high and the visible lettering is substantially larger. The evidence does not identify the descendant or asset responsible for this appearance.

### Type Scale

| Role | Desktop evidence | Mobile evidence | Interpretation |
| --- | --- | --- | --- |
| Body and answer-link nodes | `16px`, weight `400` | `16px`, weight `400` | Measured; these sampled labels do not follow the 0.975 scale. |
| Dialogue paragraphs | `15px / 25.5px` | `14.625px / 24.8625px` | Measured; line-height ratio is `1.7`. |
| Language caption | `15px / 15px` | `15px / 15px` | Measured fixed utility size. |
| Introductory paragraph node | `15px / 25.5px` | `14.625px / 24.8625px` | Measured node styles; visible line spacing differs. |
| Introductory visible line pitch | approximately `32px` | approximately `31px` | Visual estimate, consistent with five desktop lines and six mobile lines. |
| Section heading container | `40.80px` high | `39.78px` high | Measured box; not a verified font size. |
| Section heading appearance | approximately `34–36px`, bold | approximately `33–35px`, bold | Visual estimate. |
| Closing-copy node | `16px / 28.45px` | `16px / 26.91px` | Measured; visible descendants were not separately sampled. |
| Copyright appearance | approximately `11–12px` | approximately `11–12px` | Visual estimate; the enclosing paragraph reports `16px`. |

The introductory text block measures `267.52 × 160px` on desktop and `241.33 × 187.22px` on mobile. These rectangles and the visible wrapping are more useful for reconstructing that panel than assuming its sampled line height explains the entire rendering.

## Tokens — Spacing & Shapes

**Layout basis:** a 400px-wide desktop adventure column that fills the 390px mobile viewport.
**Density:** generous space for illustrations, compact dialogue typography, and substantial answer targets.

### Responsive Unit

Many measured dimensions follow the ratio `390 / 400 = 0.975`:

- The opening region changes from `792px` to `772.1875px` high.
- Character tiles change from `91 × 92px` to approximately `88.72 × 89.69px`.
- Answer targets change from `64px` to approximately `62.39px` high.
- Dialogue type changes from `15px` to `14.625px`.

A useful **recommended reconstruction**, rather than a recovered source formula, is:

```css
--stage-width: min(100vw, 400px);
--u: min(1px, 0.25vw);
```

One `u` corresponds to one design pixel at a 400px content width. Keep the document root at a conventional size. Apply this unit selectively; the observed interface does not scale every font and inset uniformly.

### Spacing Scale

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Closing-copy horizontal inset | `22px` | `21.45px` | Measured |
| Section-heading horizontal inset | `23px` | `22.42px` | Measured |
| Gap between character tiles | `16px` | approximately `15.59px` | Derived from measured rectangles |
| Character-section top padding | `50px` | `48.75px` | Measured |
| Gap between answer targets | approximately `11.88px` | approximately `11.58px` | Derived from measured rectangles |
| Answer-target top padding | `13px` | `12.675px` | Measured |
| Desktop country-control gap | approximately `16px` | Not displayed | Visual estimate |
| Intro panel's text inset from its white edge | approximately `20px` | approximately `29px` | Visual estimate supported by the paragraph rectangles |

### Border Radius

| Element | Appearance | Implementation guidance |
| --- | --- | --- |
| Introductory blue container | Slightly rounded outer corners, approximately `7–10px` | A small radius is appropriate here. |
| White introductory panel | Multiple square steps at each corner | Use an image frame or stepped mask, not a smooth rounded rectangle. |
| Country and language controls | Clipped pixel corners with contrasting inner edges | Preserve the layered bezel. |
| Dialogue frames | Dark fill and crisp light outlining | Keep outlines distinct against patterned black scenery. |
| Answer controls | Thick, angular game-button frame | Use hard edge highlights and a darker lower edge. |
| Map-to-story boundary | Irregular large square blocks | Treat it as illustrated scenery, not a regular section divider. |

Sampled anchors often report `border-radius: 0px`. This does not account for corner shapes painted by decorative layers or images.

### Layout Measurements

| Element | 1440 × 1000 | 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Main column | `x: 520px`, width `400px` | `x: 0px`, width `390px` | Measured |
| Opening region | `400 × 792px` | `390 × 772.19px` | Measured |
| STORY heading top | `812px` | `791.69px` | Measured document position |
| Character tile | `91 × 92px` | `88.72 × 89.69px` | Measured |
| Confirmation target | `198 × 64px` | `193.05 × 62.39px` | Measured |
| Answer target | `285.14 × 64px` | `278.02 × 62.39px` | Measured anchor rectangle |
| Closing-copy width | `356px` | `347.09px` | Measured |
| Intro container | approximately `356 × 463px` | approximately `346 × 476px` | Visual estimate |
| Intro container position | approximately `(542, 107)` | approximately `(22, 104)` | Visual estimate |
| White intro panel | approximately `307 × 220px` | approximately `300 × 239px` | Visual estimate |
| Document height | `16,995.84px` | `16,503.27px` | Measured for the captured state |

The visible decorative answer frames appear wider than the sampled answer anchors in the intermediate desktop capture. Distinguish artwork bounds from the measured interactive node when recreating hit areas.

## Components

### Desktop Stage Frame

**Role:** extends a narrow adventure into a complete desktop composition.

The 400px center column leaves 520px on each side at the inspected desktop width. Both side fields use bands of blue with changing densities of small square dots. The pattern is visibly raster-like, with alternating coarse and fine regions.

Along the bottom, overlapping boats, machinery, buildings, and characters form a dense cropped border. Several are tilted, and parts extend beyond the viewport. A single larger sushi or character sprite occupies the right field above this collage.

The side scenery remains in approximately the same viewport positions across the supplied desktop scroll states. This supports persistent framing, but the evidence does not identify whether each individual layer uses fixed positioning, sticky positioning, or another mechanism.

### Country Navigation

**Role:** presents the three thematic countries within the desktop frame.

The group sits to the left of the content column. Its visual width is approximately `254px`; its right edge is about `60px` from the column. The wordmark sits above three illustrated controls:

1. `ヨウショク国` — blue treatment with an aquatic hero.
2. `マシーン国` — green treatment with a mechanical character.
3. `ケンキュウ国` — warm treatment with a research character.

Each control combines a chunky clipped frame, a sprite at the left, and a centered Japanese label in the remaining area. The visible frames are approximately `58px` high. The sampled inline anchors are only `24px` high, so they should not be treated as measurements of the entire illustrated button.

A small light triangle appears beside different country rows in different captures. Its exact relationship to scrolling or selection was not exercised. Country switching and navigation destinations remain unverified.

### Language Control

**Role:** exposes a language-selection affordance.

A dark rectangular control contains a globe, the lowercase label `language`, and a downward chevron. A light inner border and stepped corners tie it to the game interface.

Desktop evidence includes a wide version below the country controls and another language node in the opening region. Mobile displays the compact opening control near the upper-right corner. Its visible mobile footprint is approximately `146 × 47px`.

No expanded menu, language list, selected-language state, or navigation result was supplied. Preserve the observed closed control without inventing available translations.

### Opening Explanation Dialog

**Role:** explains the educational purpose before the adventure.

This is the most completely visible component. Its anatomy is:

1. A large white close cross above the blue container, aligned to its right edge.
2. A deep-blue container with small outer corner radii.
3. Cropped white cloud artwork at the upper right and lower left.
4. The mint SUSHI QUEST wordmark above three colorful character heads.
5. A white reading panel with stepped corners.
6. Cyan water and white foam along the container's bottom edge.

The copy begins `スシローはおいしいおすしを大切にする会社として、海や魚を大切にしています。` It then explains that the experience introduces fisheries challenges and solutions related to the future of sushi.

At desktop size, the container starts around `107px` from the viewport top. At mobile size, it starts around `104px`. It retains these positions when the background changes from the map to the ending content. It is therefore visually anchored to the viewport rather than positioned as an ordinary paragraph in the long document.

The close anchor measures approximately `67.53 × 106.64px` on desktop and `65.84 × 103.97px` on mobile. Much of that box is padding; the visible cross is approximately `32px` square. Do not confuse its padded rectangle with the cross's painted size.

The mobile dialog becomes slightly narrower but taller. Its white panel gains horizontal text padding, creating six visible lines instead of five. Preserve this reflow; simply scaling the desktop panel as a single image would miss it.

The underlying column is strongly dimmed while the dialog remains bright. The side fields retain saturated color. The source overlay's exact coverage, opacity, focus behavior, scroll locking, close action, and repeat-visit persistence were not verified.

### Map Opening

**Role:** establishes the adventure setting and introduces the vertical journey.

Visible portions show a tile map with blue water, green terrain, dark trees, sandy paths, buildings, and bridges. The DOM records the SUSHI QUEST identity, the label `大阪・関西万博 出店記念コンテンツ`, and the cue `↓スクロール` within the opening region.

The event label's measured desktop rectangle is approximately `262.42 × 27px`, at document `y: 483.11px`. The scroll cue begins around `y: 530.63px`. Both sit behind the open dialog in the supplied opening screenshots, so their unobscured appearance cannot be fully specified from those captures.

The map descends into a black region through irregular square blocks. Preserve the transition's uneven silhouette and large pixel scale.

### Story Section

**Role:** moves from the map into narrated game content.

The visible heading uses white uppercase `STORY` lettering and a small red marker. Black-on-near-black dot texture gives the background depth without introducing a raised card surface.

The DOM records a dialogue paragraph area beneath the heading, but that paragraph is empty in both supplied node snapshots. Its populated text treatment and reveal behavior are therefore not confirmed.

The opening and story sections have overlapping measured document bounds: both begin at `y: 0`, while the story section has large top padding. Do not add their recorded heights as if they were two independent, sequential blocks. A new implementation can use ordinary flow plus an overlapping pixel transition to reproduce the visible result.

### Character Selector

**Role:** presents three hero choices before the quest content.

The DOM places three nearly square targets in a horizontal row beneath `CHARACTER`. Each is `91 × 92px` on desktop, with `16px` gaps. Parts of the illustrated tiles are visible behind the dialog in the intermediate desktop capture.

The recorded selected-character content includes `ヨウショクのゆうしゃ`, ancestry and skill labels, a short confirmation question, and the `けってい` control. The hero-name node occupies a tall, narrow rectangle of `47 × 280px`; the evidence does not establish the exact layout mechanism used for that label.

The confirmation control is narrower than the answer controls: `198px` versus approximately `285px` at desktop size. Preserve this hierarchy between a compact character confirmation and broader answer choices.

Character switching, selection persistence, and the result of confirmation were not tested.

### Quest Block and Answer Stack

**Role:** presents fisheries problems as encounters with three possible responses.

The rendered text contains four aquaculture quests, four machine quests, and three research quests. Numbered `QUEST.1`, `QUEST.2`, and subsequent labels repeat within the DOM. This supports repeated decorative quest lettering, but does not prove an animated marquee.

A typical block contains an encounter introduction, a character's question, and three stacked answer controls. Example source labels include `海水をりくにはこぶ`, `空き地で育てる`, and `魚とはなす`.

In the intermediate desktop screenshot, three green answer frames remain visible beneath the dialog. Their beveled edges, centered labels, and regular spacing make them read as game choices. Use one answer per row; the observed layout keeps this arrangement on both viewport sizes.

Dialogue paragraphs use the measured DotGothic16 declaration, typically with an approximately `265px` desktop text width for the main question. Some mobile passages are populated where corresponding desktop samples are empty. Their timing, visibility rules, and completion state are unresolved.

Correct/incorrect feedback, answer explanations, scoring, replay, and progression rules were not exercised. They must be designed or verified separately rather than inferred from the answer wording.

### Closing Statement and Brand Footer

**Role:** connects the game premise back to the future of sushi.

The DOM records a thank-you message, an explanation of changing marine environments, and Sushiro's statement about continuing its work with producers. The original-page screenshots show a light reading area, the Sushiro logo, and a centered copyright line beneath the dimming layer.

The statement uses almost the full column width, with approximately `22px` desktop side insets. It is broader and more editorial than the inset game dialogue. A band of sushi illustrations appears above the ending area in the supplied bottom captures.

The original page identifies Sushiro through its explanatory copy, logo, and `©AKINDO SUSHIRO CO.,LTD. ALL RIGHTS RESERVED.` footer. No production-credit names are visible in the supplied original-page evidence.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be concluded |
| --- | --- | --- |
| Intro dialog anchoring | Similar position over opening, intermediate, and ending backgrounds | The dialog stays visually anchored while different document regions are captured. Exact positioning and scroll-lock logic are unknown. |
| Desktop scenery persistence | Side navigation and bottom collage retain their placement | Persistent desktop framing is supported. Per-layer implementation is unknown. |
| Right-side decorative sprite | Sushi in earlier captures; a green mechanical character in another | Visual state varies. Trigger, sequence, duration, and animation mechanism are unverified. |
| Country marker | Triangle appears beside different rows | A state indicator is present; its governing interaction is unverified. |
| Narrative text population | Desktop and mobile snapshots contain different amounts of dialogue | Content readiness or reveal conditions differ. A typewriter effect cannot be claimed from this alone. |
| Repeated quest lettering | Repeated text in the rendered DOM | Repetition is established; scrolling or looping motion is not. |
| Sampled CSS animation | Selected elements report `animation: none` | These nodes do not establish a page-wide absence of animation. |
| Sampled transition | Selected elements report `transition: all` without useful timing evidence | No reliable duration or easing can be extracted. |
| Close, language, character, and answer controls | Visible affordances and DOM anchors | Click, touch, keyboard, and resulting states were not exercised. |

**Recommended motion direction:** if adding movement, use brief sprite-frame changes and small discrete offsets. An optional `800ms steps(2, end)` bob is a reasonable prototype treatment, but is not an observed site timing. Keep explanatory text stable while it is being read, and provide reduced-motion behavior.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Desktop exterior | Blue bands with raster dot-density changes | Creates a continuous game world around the narrow content. |
| Opening scenery | Pixel-map water, land, trees, and structures | Introduces place and adventure. |
| Adventure substrate | Black with subtle dark pixel texture | Supports characters, dialogue, and bright controls. |
| Game dialogue | Dark fill with crisp light framing | Separates narrative from scenery. |
| Country and answer controls | Colored fills with hard highlights and lower-edge shading | Gives controls a game-menu bezel. |
| Intro shell | Deep blue with illustrated clouds and water | Makes the opening explanation a branded scene. |
| Intro reading panel | White with stepped corners and dark copy | Provides strong reading contrast. |
| Background veil | Strong visible dimming over the central content | Separates the introduction from the adventure. |
| Ending reading area | Light surface beneath the veil | Supports a quieter brand statement. |

There is no visible general-purpose soft-shadow system. Depth comes from sprite shading, contrasting frame layers, occlusion, and the dialog veil. The apparent gray of the ending panel is not sufficient evidence for a gray base token.

## Imagery

Pixel art carries the identity at every scale. Tiny terrain tiles build the opening world; medium sprites inhabit controls and character choices; larger sushi and mechanical characters decorate the desktop; overlapping illustrations form the bottom border.

Keep the visual units distinct. Map tiles should align to a terrain grid. Characters need readable silhouettes and a small number of strong highlight colors. Decorative piles can rotate and overlap, while dialogue and answer labels remain aligned and legible.

The introductory wordmark combines angular fantasy lettering with pale mint highlights. Its three character heads repeat the country colors. White clouds are cropped by the blue container, and the water strip uses small horizontal highlights and stepped foam edges.

Use nearest-neighbor rendering when enlarging suitable raster assets. Avoid smoothing away their pixels. Rotation can introduce browser interpolation, so match the visible result with authorized precomposed artwork where practical. No photography is visible in the supplied original-page captures; this is a statement about the inspected imagery, not an inventory of every page asset.

### Observed Asset References

Individual asset URLs, native dimensions, formats, and sprite-sheet definitions were not supplied. The rendered page evidence contains the relative asset-base string `assets/img/`, but that is not a verified file inventory.

| Asset group | Observed use | Implementation requirement |
| --- | --- | --- |
| Main wordmark and three character heads | Introductory dialog | Use authorized artwork; no exact filename is available. |
| Standalone wordmark | Desktop navigation | Preserve its wide, compact proportions. |
| Cloud and water decoration | Intro container edges | Keep cropping and pixel edges intentional. |
| Tile-map scenery | Opening region | Preserve tile alignment and aspect ratio. |
| Country sprites and frames | Desktop controls and character area | Keep category colors associated with their characters. |
| Sushi and mechanical sprites | Right desktop field | Supply complete states before implementing any animation. |
| Overlapping object collage | Bottom of desktop side fields | Prefer the intended composition over arbitrary repeated sprites. |
| Dialogue and answer frames | Adventure sections | Use original frame assets or a carefully matched stepped border. |
| Sushiro logo | Closing statement | Use the authorized brand asset. |

The CSS below defines asset slots without inventing original filenames or remote asset URLs.

## Layout & Responsive Behavior

At 1440px wide, the adventure remains `400px` wide and centered. The desktop treatment uses the remaining space for persistent scenery and navigation. It does not enlarge the story into a wide reading measure or split the quest answers across columns.

At 390px wide, the adventure fills the viewport. The desktop country rail, right-side feature sprite, and exterior bottom collage are absent from the supplied mobile captures. The compact language control remains at the upper right of the opening region.

The measured geometry supports a 400px design basis with proportional shrinking at 390px. However, fixed-size labels, changing text padding, and content-state differences prevent a single global scale transform from reproducing the page.

The intro dialog is the clearest responsive exception. Its outer width changes only slightly, but its text region narrows from approximately `267.5px` to `241.3px`. Additional wrapping increases the panel height. Preserve live text and allow height to grow.

The page is a long vertical document, measuring approximately 17,000px on desktop and 16,500px on mobile in these states. Exact document height depends on populated content and should not become a hardcoded implementation target.

The actual media-query breakpoints, tablet and landscape layouts, browser zoom, device-pixel ratio, and safe-area rules were not supplied. The Quick Start uses recommended breakpoints of `1100px` for exterior desktop framing and `600px` for the intro's mobile text padding. These reproduce the two observed endpoints without claiming to recover the original CSS.

## Do’s and Don’ts

### Do

- Keep the adventure column close to 400px on desktop and full width on the inspected phone layout.
- Use the desktop margins as illustrated scenery, with the country controls grouped on the left.
- Preserve blue dot-density bands and the dense bottom collage.
- Keep the introduction's wordmark, three characters, clouds, stepped white panel, and waterline together as one composition.
- Give Japanese explanations live text with enough width and line spacing to match the visible wrapping.
- Preserve the blue, green, and warm country associations.
- Keep three answer choices in a vertical stack with substantial target heights.
- Use crisp light borders and hard bevels to separate game controls from dark scenery.
- Treat measured anchor rectangles and painted artwork bounds as different kinds of evidence.
- Verify partially populated narrative content before making claims about its reveal behavior.

### Don’t

- Don't stretch the map or game dialogue across the desktop viewport.
- Don't replace the country navigation with an unrelated general-purpose menu design.
- Don't smooth the pixel artwork into vector-like illustrations.
- Don't convert the stepped reading panel into a large pill or a generic rounded card.
- Don't infer a carousel, marquee, typewriter, or animation timing from names and repeated text alone.
- Don't assume answer selection produces a particular score or feedback screen.
- Don't copy the sampled white paragraph color into the visibly black-on-white introduction.
- Don't reproduce the dialog as a flattened screenshot; its mobile text reflows.
- Don't use transiently empty paragraphs or the diagnostic-looking `For check` string as a recommended content pattern.
- Don't turn the dimmed appearance of the current capture into the permanent color palette.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified original-site features:

- Use a native modal dialog or an equivalent accessible implementation with a descriptive name, focus containment, Escape support, and focus restoration.
- Keep the close target at least `44 × 44px`, even when its cross artwork is smaller. Ensure the entire dialog remains reachable on short screens.
- Use semantic buttons for state changes and links for navigation. The supplied empty `href` values do not establish original event behavior.
- Provide meaningful accessible labels for country choices, characters, and language selection. Mark scenery and decorative repeated quest lettering as decorative.
- Distinguish a selected country through shape or text as well as color.
- Announce answer feedback when implemented, and avoid requiring animation completion before users can read explanations.
- Keep narrative content available in a static or reduced-motion mode. Do not leave essential information dependent on an unresolved reveal effect.
- Verify contrast using the final undimmed artwork and button colors, particularly white text on green or gold.
- Test narrow phones, landscape, enlarged text, and keyboard navigation. The two supplied viewports do not establish those behaviors.

## Agent Prompt Guide

### Quick Color Reference

- Desktop blue field: approximately `#2354ff`, with lighter and deeper blue dither bands.
- Intro shell: approximately `#0b00a6`.
- Reading panel and frame highlights: white.
- Adventure substrate and introductory text: black.
- Water decoration: approximately `#43bcef`.
- Wordmark highlights: approximately `#c9ffd6`.
- Country seeds: blue `#258de8`, green `#81c600`, warm gold `#dc9c40`.
- These chromatic values are visual estimates; use the final assets to refine them.

### Overall Prompt

“Create a Japanese educational RPG-style web experience inspired by SUSHI QUEST. Center a 400px-wide vertical adventure on desktop and let it fill a phone viewport. Surround desktop content with electric-blue raster dot bands, a left-side wordmark and three illustrated country controls, a large right-side sprite, and cropped pixel-art objects along the bottom. Build the adventure from tile-map scenery, black dialogue regions, character choices, and three vertically stacked beveled answers. Create a viewport-anchored introductory dialog with a deep-blue field, mint illustrated identity, three colorful characters, cropped white clouds, a stepped white reading panel, and cyan water along the bottom. Use readable Japanese text, crisp pixel imagery, and responsive text wrapping. Treat exact game logic and animation as separate requirements.”

### Example Component Prompts

1. **Intro dialog:** “Design an approximately 356px-wide blue introduction container, starting around 107px below the desktop viewport top. Put a white close cross above its right edge. Add a mint wordmark and three character heads, a stepped white text panel, cropped clouds, and a pixel waterline. On a 390px phone, use roughly 22px outer clearance and increase the text panel's internal side padding so the copy gains one line.”
2. **Country rail:** “Create a 254px-wide desktop navigation group with a compact illustrated wordmark, three roughly 58px-high pixel-beveled country controls, and a dark language selector. Use blue, green, and warm gold, with one sprite at the left of each country label. Keep about 16px between controls.”
3. **Quest answers:** “Place three full-width game answer buttons in one column on black scenery. Use approximately 285px-wide, 64px-high targets with about 12px gaps. Add hard frame highlights and a dark lower edge; keep Japanese labels centered and legible. Define feedback separately from this visual component.”
4. **Map transition:** “Build a narrow pixel-map opening with water, green islands, trees, paths, and bridges. Let irregular large square blocks transition the bottom edge into a subtly patterned black story section with a bold white STORY heading and a small red marker.”
5. **Closing statement:** “Finish the narrow adventure with a light reading area, roughly 22px side insets, comfortably spaced Japanese explanatory paragraphs, the authorized Sushiro logo, and a small centered copyright line.”

## Quick Start

### CSS Custom Properties

This is a practical reconstruction of the observed proportions, not copied source CSS. It uses estimated colors, a derived 400px design unit, and recommended responsive breakpoints. The intro uses the screenshot's approximate line pitch; game dialogue uses the measured `1.7` ratio. Its ordinary sans-serif intro copy is a visual adaptation because the supplied paragraph declaration does not fully explain the rendered glyphs and spacing.

Supply authorized artwork for the image classes. The blue dot texture and button bevels below are simplified CSS fallbacks. Open the native dialog with `showModal()` and connect its close control through normal dialog handling; CSS alone does not implement the game's controls.

```css
:root {
  /* Measured neutral colors and estimated chromatic colors */
  --color-black: #000;
  --color-white: #fff;
  --color-stage: #2354ff;
  --color-dialog: #0b00a6;
  --color-water: #43bcef;
  --color-mint: #c9ffd6;
  --color-aquaculture: #258de8;
  --color-machine: #81c600;
  --color-research: #dc9c40;
  --color-veil: rgb(0 0 0 / 0.75);

  /* Recommended darker answer fill for white-label contrast */
  --color-choice: #345500;

  /* Observed declarations, with an added dialogue fallback */
  --font-copy: YakuHanJP, 'Noto Sans JP', sans-serif;
  --font-dialogue: 'DotGothic16-Regular', sans-serif;

  /* Derived adaptation; not recovered source variables */
  --stage-width: min(100vw, 400px);
  --u: min(1px, 0.25vw);
  --text-label: 16px;
  --text-dialogue: calc(15 * var(--u));
  --text-utility: 15px;
  --text-section: calc(36 * var(--u));
  --leading-dialogue: 1.7;
  --leading-intro: calc(32 * var(--u));
  --section-inset: calc(23 * var(--u));
  --answer-width: calc(285.14 * var(--u));
  --answer-height: calc(64 * var(--u));
  --answer-gap: calc(11.875 * var(--u));
  --intro-width: calc(356 * var(--u));
  --intro-top: calc(107 * var(--u));
  --radius-intro: calc(8 * var(--u));
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-white);
  background: var(--color-stage);
  font-family: var(--font-copy);
  font-size: 16px;
}

/* Simplified desktop scenery; replace with the intended texture. */
.desktop-stage {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    #508eff, var(--color-stage) 25%, #0600ff 48%, #508eff
  );
}

.desktop-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#0800bf 1px, transparent 1px);
  background-size: 8px 8px;
  mask-image: repeating-linear-gradient(
    transparent 0, #000 70px, transparent 140px
  );
}

.adventure {
  position: relative;
  z-index: 1;
  width: var(--stage-width);
  margin-inline: auto;
  background: var(--color-black);
}

.pixel-art {
  display: block;
  max-width: 100%;
  image-rendering: pixelated;
}

.map-opening {
  position: relative;
  min-height: calc(792 * var(--u));
  overflow: hidden;
}

.map-opening > .map-art {
  width: 100%;
  height: auto;
}

.story-section,
.character-section,
.quest-section {
  padding-inline: var(--section-inset);
}

/* Flow-based approximation of the measured STORY heading position. */
.story-section { padding-top: calc(20 * var(--u)); }
.character-section { padding-top: calc(50 * var(--u)); }

.section-title {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin: 0;
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.13;
}

.game-dialogue {
  color: var(--color-white);
  background: var(--color-black);
  border: 3px solid currentColor;
  padding: calc(20 * var(--u));
  font-family: var(--font-dialogue);
  font-size: var(--text-dialogue);
  line-height: var(--leading-dialogue);
}

.character-options {
  display: flex;
  justify-content: center;
  gap: calc(16 * var(--u));
}

.character-option {
  width: calc(91 * var(--u));
  min-height: calc(92 * var(--u));
}

.quest-options {
  display: grid;
  gap: var(--answer-gap);
  width: var(--answer-width);
  max-width: 100%;
  margin-inline: auto;
}

.quest-answer {
  min-height: var(--answer-height);
  padding: 10px 12px;
  border: 4px solid #718342;
  border-bottom-color: #1c290b;
  border-radius: 0;
  color: var(--color-white);
  background: var(--color-choice);
  font: inherit;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
}

.country-nav { display: none; }

.country-nav__logo {
  width: 100%;
  margin-bottom: 30px;
}

.country-nav__items {
  display: grid;
  gap: 16px;
}

.country-control {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  min-height: 58px;
  padding: 4px 12px;
  border: 4px solid rgb(255 255 255 / 0.55);
  border-bottom-color: rgb(0 0 0 / 0.45);
  color: var(--color-white);
  background: var(--country-color, var(--color-aquaculture));
  font: inherit;
}

.language-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 8px 12px;
  border: 3px solid var(--color-white);
  color: var(--color-white);
  background: var(--color-black);
  font-family: var(--font-dialogue);
  font-size: var(--text-utility);
  line-height: 1;
}

/* Native modal: recommended behavior, approximate visual placement. */
.intro-dialog {
  position: fixed;
  inset: 0 auto auto 50%;
  transform: translateX(-50%);
  width: var(--intro-width);
  max-width: calc(100vw - 32px);
  max-height: 100dvh;
  margin: 0;
  padding: var(--intro-top) 0 0;
  overflow-y: auto;
  border: 0;
  color: var(--color-black);
  background: transparent;
}

.intro-dialog::backdrop {
  background: linear-gradient(var(--color-veil), var(--color-veil))
    center / var(--stage-width) 100% no-repeat;
}

.intro-close {
  position: absolute;
  top: calc(54 * var(--u));
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: var(--color-white);
  background: transparent;
  font: 44px / 1 monospace;
  cursor: pointer;
}

.intro-card {
  position: relative;
  overflow: hidden;
  padding: calc(44 * var(--u)) calc(24 * var(--u))
    calc(68 * var(--u));
  border-radius: var(--radius-intro);
  background: var(--color-dialog);
}

.intro-logo {
  position: relative;
  z-index: 1;
  width: calc(284 * var(--u));
  height: calc(123 * var(--u));
  margin-inline: auto;
  object-fit: contain;
}

.intro-copy {
  position: relative;
  z-index: 1;
  margin: calc(8 * var(--u)) 0 0;
  padding: calc(30 * var(--u)) calc(20 * var(--u));
  color: var(--color-black);
  background: var(--color-white);
  font-family: var(--font-copy);
  font-size: var(--text-dialogue);
  line-height: var(--leading-intro);
  overflow-wrap: anywhere;
  /* Simplified square-step corners; original frame art is more detailed. */
  clip-path: polygon(
    0 8px, 8px 8px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px),
    calc(100% - 8px) 100%, 8px 100%,
    8px calc(100% - 8px), 0 calc(100% - 8px)
  );
}

.intro-cloud {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(156 * var(--u));
  pointer-events: none;
}

.intro-water {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: calc(38 * var(--u));
  object-fit: cover;
  pointer-events: none;
}

.closing-copy {
  margin: 0;
  padding-inline: calc(22 * var(--u));
  color: var(--color-black);
  background: var(--color-white);
  font-size: 16px;
  line-height: 1.78;
}

/* Recommended breakpoints; only desktop and phone endpoints were observed. */
@media (min-width: 1100px) {
  .desktop-stage { display: block; }
  .country-nav {
    display: block;
    position: fixed;
    z-index: 2;
    top: calc(50% - 266px);
    right: calc(50% + 260px);
    width: 254px;
  }
}

@media (max-width: 600px) {
  .intro-copy {
    padding: calc(26 * var(--u)) calc(30 * var(--u));
  }
  .closing-copy { line-height: 1.68; }
}

/* Recommended optional motion; no original timing is asserted. */
.sprite-bob { animation: sprite-bob 800ms steps(2, end) infinite; }

@keyframes sprite-bob {
  50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .sprite-bob { animation: none; }
}

/* Keep interactive focus outside clipped decorative layers. */
:where(button, a, select):focus-visible {
  outline: 3px solid var(--color-white);
  outline-offset: 4px;
}
```

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. These do not imply that the original website uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-stage-blue: var(--color-stage);
  --color-quest-blue: var(--color-dialog);
  --color-ocean: var(--color-water);
  --color-wordmark-mint: var(--color-mint);
  --color-country-blue: var(--color-aquaculture);
  --color-country-green: var(--color-machine);
  --color-country-gold: var(--color-research);

  --font-copy: YakuHanJP, 'Noto Sans JP', sans-serif;
  --font-game: 'DotGothic16-Regular', sans-serif;

  --text-game-copy: calc(15 * var(--u));
  --text-game-section: calc(36 * var(--u));
  --text-game-utility: 15px;

  --spacing-game-unit: var(--u);
  --spacing-game-inset: var(--section-inset);
  --spacing-game-answer: var(--answer-height);
  --spacing-game-gap: var(--answer-gap);
  --radius-game-intro: var(--radius-intro);
}
```

## Sources & Evidence

- **Original and final website:** [SUSHI QUEST](https://www.akindo-sushiro.co.jp/expo2025_gameqr/). The supplied inspection reports HTTP `200` and the same original and final URL.
- **Capture date:** September 12, 2026, `13:38:34.563 UTC`, corresponding to `22:38:34.563 JST`.
- **Visual evidence:** three supplied original-page desktop captures at `1440 × 1000` and two original-page mobile captures at `390 × 844`. These cover the opening, an intermediate desktop quest region, and closing content. Every original-page capture retains the introductory dialog.
- **Rendered evidence:** document text, selected element rectangles, computed font and color declarations, section dimensions, and the supplied custom properties for both viewport sizes.
- **Observed traversal:** the browser capture process traversed document positions. No supplied evidence establishes activation of the close, language, country, character-confirmation, or answer controls.
- **Readiness limits:** the supplied process observed the initial page for at least five seconds and waited for load, layout/text stability, visible image decoding, and eligible finite animations within bounded time limits. Perpetual animations were paused during readiness checks and resumed afterward. Those checks do not prove semantic completeness.
- **Environment limits:** SharedWorkers and service workers were disabled during the supplied inspection. Scroll offsets, device-pixel ratio, detailed asset requests, event handlers, and full descendant styles were not supplied.
- **Content limitations:** several narrative nodes are empty or zero-height, desktop and mobile text population differs, and some sampled styles do not match visible painted text. Occluded content, delayed reveals, interaction results, and exact animation behavior remain unverified.

This reference describes the current evidence at the original URL. Measurements, screenshot estimates, derived proportions, and recommended implementation choices are labeled separately.