RETRO PIXEL
8-BIT INTERFACE

AI Request Prompt

Design a landing page in Retro Pixel / 8-bit style — pixel art aesthetic, Game Boy vibes, chunky bordered containers with CRT scanline overlay.

COLOR TOKENS:
--bg: #1a1c2c (deep midnight blue)
--bg-light: #333c57 (muted slate)
--primary: #a7f070 (pixel green)
--accent: #f77622 (retro orange)
--secondary: #29adff (electric blue)
--danger: #ff004d (pixel red)
--highlight: #ffec27 (coin yellow)
--text: #a7f070 (green on dark)
--text-dim: #5d6f4f (muted green)
--white: #e0f8cf (Game Boy lightest green)
--border: #5d6f8e (steel blue border)
No other colors. All tones must feel like an 8-bit palette.

TYPOGRAPHY:
Font: "Press Start 2P" from Google Fonts, fallback monospace
Body: 10px, line-height 2.0 (pixel fonts need generous spacing)
Headings: same font, clamp(1rem, 3.5vw, 2rem), line-height 1.6
Labels: 7-8px, uppercase
All text must use the pixel font — no font mixing.
text-shadow: 3px 3px 0 var(--bg-light) on headings for depth.

UI COMPONENTS:
- Game frame: 4px solid border, box-shadow inset 0 0 0 2px + outer 0 8px 32px, title bar with colored square dots (no border-radius)
- Health bars: 16px tall, 2px solid border, filled div with stepped transition (steps(10))
  HP green (#a7f070), MP blue (#29adff), XP orange (#f77622), ATK red (#ff004d)
- Stat blocks: 3px solid border, semi-transparent bg, 8px uppercase labels
- RPG dialog box: 4px solid white border, triangle pointer via CSS ::before, speaker name in yellow, choices prefixed with "> "
- Score display: flex row of bordered blocks, value in highlight yellow, label in dim text
- Inventory grid: square aspect-ratio slots, 2px border, hover highlights in yellow, active slot in green, item count in corner
- 8-bit buttons: 3px solid border, box-shadow for 3D depth (0 4px 0), translateY on hover/active for press effect, no border-radius
- Toast notification: 3px solid green border, slide-in animation using steps()
- Blinking cursor: "_" character with steps(2) animation at 0.8s

PIXEL ART (CSS box-shadow technique):
Create decorative pixel art using a tiny div (4px x 4px) with multiple box-shadow declarations.
Each shadow = one pixel: Xpx Ypx 0 color
Heart: 7 rows of red (#ff004d) pixels in heart shape
Sword: blade in white, yellow guard, brown handle, orange pommel
Star: 5 rows of yellow (#ffec27) pixels
Add floating animation: translateY(0) to translateY(-4px), steps(4), 2s infinite

SCANLINE EFFECT:
body::after with position fixed, inset 0, z-index 9998, pointer-events none
repeating-linear-gradient(180deg, transparent 0-2px, rgba(0,0,0,0.12) 2-4px)

LAYOUT:
Content max-width: min(1040px, 92vw)
Page padding: 26px 0 80px
Stats grid: repeat(auto-fit, minmax(200px, 1fr)), gap 12px
Score display: flex-wrap, gap 12px, centered
Inventory: repeat(auto-fill, minmax(50px, 1fr)), gap 4px, max-width 400px
Screen padding: clamp(20px, 4vw, 40px)

MOTION:
- All animations use steps() easing for pixelated feel
- Float: steps(4), 2s infinite
- Slide-in: steps(8), 0.5s
- Blink: steps(2), 0.8s infinite
- Health bar fill: steps(10), 1s transition
- Button press: translateY(-2px) hover, translateY(2px) active

RESPONSIVE:
Below 640px: single column stats, stacked score items, 4-column inventory, smaller font sizes (7-8px for pre), stacked dialog choices
Above 640px: multi-column stats grid, flex row scores, 8-column inventory

FORBIDDEN:
- No border-radius on game elements (pixel = sharp corners)
- No gradients except scanline overlay
- No anti-aliased fonts — pixel font only
- No smooth transitions — use steps() for everything
- No blur or glassmorphism
- No serif or sans-serif fonts
- No colors outside the defined 8-bit palette
- No opacity below 0.3 on visible elements
- image-rendering must be set to pixelated

OUTPUT:
1. Single HTML file with inline CSS
2. CRT scanline overlay on body::after
3. CSS pixel art using box-shadow technique (heart, sword, star)
4. Health bar system with stepped transitions
5. RPG dialog box with speaker, text, blinking cursor, and YES/NO choices
6. Score display and inventory grid
7. 8-bit button system with 3D press effect
8. "Press Start 2P" Google Font with monospace fallback

Retro Pixel / 8-bit 스타일의 랜딩 페이지를 디자인해줘 — 픽셀 아트 미학, 게임보이 분위기, 두꺼운 테두리 컨테이너에 CRT 스캔라인 오버레이.

색상 토큰:
--bg: #1a1c2c (깊은 미드나이트 블루)
--bg-light: #333c57 (뮤트 슬레이트)
--primary: #a7f070 (픽셀 그린)
--accent: #f77622 (레트로 오렌지)
--secondary: #29adff (일렉트릭 블루)
--danger: #ff004d (픽셀 레드)
--highlight: #ffec27 (코인 옐로)
--text: #a7f070 (어두운 배경 위 그린)
--text-dim: #5d6f4f (뮤트 그린)
--white: #e0f8cf (게임보이 가장 밝은 그린)
--border: #5d6f8e (스틸 블루 테두리)
다른 색상 사용 금지. 모든 톤은 8비트 팔레트처럼 느껴져야 합니다.

타이포그래피:
폰트: Google Fonts의 "Press Start 2P", 폴백 monospace
본문: 10px, line-height 2.0 (픽셀 폰트는 넉넉한 간격 필요)
제목: 같은 폰트, clamp(1rem, 3.5vw, 2rem), line-height 1.6
라벨: 7-8px, 대문자
모든 텍스트에 픽셀 폰트 사용 — 폰트 혼용 금지.
제목에 text-shadow: 3px 3px 0 var(--bg-light) 적용하여 깊이감.

UI 컴포넌트:
- 게임 프레임: 4px solid 테두리, box-shadow inset 0 0 0 2px + 외부 0 8px 32px, 타이틀 바에 컬러 사각 도트 (border-radius 없음)
- 체력 바: 16px 높이, 2px solid 테두리, 단계적 트랜지션(steps(10))으로 채워지는 div
  HP 그린(#a7f070), MP 블루(#29adff), XP 오렌지(#f77622), ATK 레드(#ff004d)
- 스탯 블록: 3px solid 테두리, 반투명 배경, 8px 대문자 라벨
- RPG 대화 상자: 4px solid 흰색 테두리, CSS ::before로 삼각형 포인터, 스피커 이름은 노란색, 선택지 앞에 "> " 접두사
- 점수 표시: flex 행으로 테두리 블록, 하이라이트 옐로 값, dim 텍스트 라벨
- 인벤토리 그리드: 정사각 aspect-ratio 슬롯, 2px 테두리, 호버시 노란 하이라이트, 활성 슬롯은 그린, 코너에 아이템 수
- 8비트 버튼: 3px solid 테두리, 3D 깊이감 box-shadow(0 4px 0), hover/active시 translateY로 누르기 효과, border-radius 없음
- 토스트 알림: 3px solid 그린 테두리, steps() 슬라이드인 애니메이션
- 깜빡이는 커서: "_" 문자, steps(2) 애니메이션 0.8초

픽셀 아트 (CSS box-shadow 기법):
작은 div(4px x 4px)에 여러 box-shadow 선언으로 장식 픽셀 아트 생성.
각 그림자 = 하나의 픽셀: Xpx Ypx 0 color
하트: 빨간색(#ff004d) 픽셀로 하트 모양 7줄
검: 흰색 칼날, 노란 가드, 갈색 손잡이, 오렌지 폼멜
별: 노란색(#ffec27) 픽셀 5줄
부유 애니메이션: translateY(0)에서 translateY(-4px), steps(4), 2초 무한

스캔라인 효과:
body::after에 position fixed, inset 0, z-index 9998, pointer-events none
repeating-linear-gradient(180deg, transparent 0-2px, rgba(0,0,0,0.12) 2-4px)

레이아웃:
콘텐츠 최대 너비: min(1040px, 92vw)
페이지 패딩: 26px 0 80px
스탯 그리드: repeat(auto-fit, minmax(200px, 1fr)), gap 12px
점수 표시: flex-wrap, gap 12px, 중앙 정렬
인벤토리: repeat(auto-fill, minmax(50px, 1fr)), gap 4px, max-width 400px
스크린 패딩: clamp(20px, 4vw, 40px)

모션:
- 모든 애니메이션에 steps() 이징으로 픽셀화 느낌
- 부유: steps(4), 2초 무한
- 슬라이드인: steps(8), 0.5초
- 깜빡임: steps(2), 0.8초 무한
- 체력 바 채움: steps(10), 1초 트랜지션
- 버튼 누르기: hover시 translateY(-2px), active시 translateY(2px)

반응형:
640px 미만: 단일 열 스탯, 세로 점수 항목, 4열 인벤토리, 작은 폰트(pre 7-8px), 세로 대화 선택지
640px 이상: 다중 열 스탯 그리드, flex 행 점수, 8열 인벤토리

금지사항:
- 게임 요소에 border-radius 금지 (픽셀 = 각진 모서리)
- 스캔라인 오버레이 외 그라데이션 금지
- 안티앨리어싱 폰트 금지 — 픽셀 폰트만
- 부드러운 트랜지션 금지 — 모든 곳에 steps() 사용
- 블러 또는 글래스모피즘 금지
- 세리프 또는 산세리프 폰트 금지
- 정의된 8비트 팔레트 외 색상 금지
- 보이는 요소에 0.3 미만 opacity 금지
- image-rendering은 반드시 pixelated 설정

출력:
1. 인라인 CSS 포함 단일 HTML 파일
2. body::after에 CRT 스캔라인 오버레이
3. box-shadow 기법의 CSS 픽셀 아트 (하트, 검, 별)
4. 단계적 트랜지션의 체력 바 시스템
5. 스피커, 텍스트, 깜빡이는 커서, YES/NO 선택지가 있는 RPG 대화 상자
6. 점수 표시 및 인벤토리 그리드
7. 3D 누르기 효과의 8비트 버튼 시스템
8. "Press Start 2P" Google Font에 monospace 폴백

Retro Pixel / 8-bitスタイルのランディングページをデザインしてください — ピクセルアートの美学、ゲームボーイの雰囲気、太いボーダーのコンテナにCRTスキャンラインオーバーレイ。

カラートークン:
--bg: #1a1c2c（ディープミッドナイトブルー）
--bg-light: #333c57（ミュートスレート）
--primary: #a7f070（ピクセルグリーン）
--accent: #f77622（レトロオレンジ）
--secondary: #29adff（エレクトリックブルー）
--danger: #ff004d（ピクセルレッド）
--highlight: #ffec27（コインイエロー）
--text: #a7f070（暗い背景上のグリーン）
--text-dim: #5d6f4f（ミュートグリーン）
--white: #e0f8cf（ゲームボーイ最明グリーン）
--border: #5d6f8e（スチールブルーボーダー）
他の色は使用不可。全トーンは8ビットパレットの雰囲気を持つこと。

タイポグラフィ:
フォント: Google Fontsの"Press Start 2P"、フォールバックmonospace
本文: 10px, line-height 2.0（ピクセルフォントは余裕ある間隔が必要）
見出し: 同フォント、clamp(1rem, 3.5vw, 2rem), line-height 1.6
ラベル: 7-8px, 大文字
全テキストにピクセルフォント使用 — フォント混用禁止。
見出しにtext-shadow: 3px 3px 0 var(--bg-light)で奥行き感。

UIコンポーネント:
- ゲームフレーム: 4px solidボーダー、box-shadow inset 0 0 0 2px + 外側0 8px 32px、タイトルバーにカラー四角ドット（border-radiusなし）
- HPバー: 16px高、2px solidボーダー、段階的トランジション(steps(10))で塗りつぶすdiv
  HPグリーン(#a7f070)、MPブルー(#29adff)、XPオレンジ(#f77622)、ATKレッド(#ff004d)
- ステータスブロック: 3px solidボーダー、半透明背景、8px大文字ラベル
- RPGダイアログボックス: 4px solid白ボーダー、CSS ::beforeで三角ポインター、話者名は黄色、選択肢の前に"> "接頭辞
- スコア表示: flexの行でボーダー付きブロック、ハイライトイエローの値、dimテキストのラベル
- インベントリグリッド: 正方形aspect-ratioスロット、2pxボーダー、ホバーで黄色ハイライト、アクティブスロットはグリーン、コーナーにアイテム数
- 8ビットボタン: 3px solidボーダー、3D深度感のbox-shadow(0 4px 0)、hover/activeでtranslateYの押し込み効果、border-radiusなし
- トースト通知: 3px solidグリーンボーダー、steps()スライドインアニメーション
- 点滅カーソル: "_"文字、steps(2)アニメーション0.8秒

ピクセルアート（CSS box-shadowテクニック）:
小さなdiv(4px x 4px)に複数のbox-shadow宣言で装飾ピクセルアートを作成。
各シャドウ = 1ピクセル: Xpx Ypx 0 color
ハート: 赤(#ff004d)ピクセルでハート形7行
剣: 白い刃、黄色のガード、茶色のハンドル、オレンジのポメル
星: 黄色(#ffec27)ピクセル5行
浮遊アニメーション: translateY(0)からtranslateY(-4px)、steps(4)、2秒無限

スキャンライン効果:
body::afterにposition fixed、inset 0、z-index 9998、pointer-events none
repeating-linear-gradient(180deg, transparent 0-2px, rgba(0,0,0,0.12) 2-4px)

レイアウト:
コンテンツ最大幅: min(1040px, 92vw)
ページパディング: 26px 0 80px
ステータスグリッド: repeat(auto-fit, minmax(200px, 1fr)), gap 12px
スコア表示: flex-wrap, gap 12px, 中央揃え
インベントリ: repeat(auto-fill, minmax(50px, 1fr)), gap 4px, max-width 400px
スクリーンパディング: clamp(20px, 4vw, 40px)

モーション:
- 全アニメーションにsteps()イージングでピクセル化の雰囲気
- 浮遊: steps(4), 2秒無限
- スライドイン: steps(8), 0.5秒
- 点滅: steps(2), 0.8秒無限
- HPバー塗りつぶし: steps(10), 1秒トランジション
- ボタン押下: hoverでtranslateY(-2px), activeでtranslateY(2px)

レスポンシブ:
640px未満: 単一列ステータス、縦方向スコア、4列インベントリ、小さいフォント(pre 7-8px)、縦方向ダイアログ選択肢
640px以上: 複数列ステータスグリッド、flex行スコア、8列インベントリ

禁止事項:
- ゲーム要素にborder-radius禁止（ピクセル = 角張った角）
- スキャンラインオーバーレイ以外のグラデーション禁止
- アンチエイリアスフォント禁止 — ピクセルフォントのみ
- スムーズトランジション禁止 — 全てにsteps()使用
- ブラーまたはグラスモーフィズム禁止
- セリフまたはサンセリフフォント禁止
- 定義された8ビットパレット外の色禁止
- 表示要素に0.3未満のopacity禁止
- image-renderingは必ずpixelated設定

出力:
1. インラインCSS付き単一HTMLファイル
2. body::afterにCRTスキャンラインオーバーレイ
3. box-shadowテクニックのCSSピクセルアート（ハート、剣、星）
4. 段階的トランジションのHPバーシステム
5. 話者、テキスト、点滅カーソル、はい/いいえ選択肢のRPGダイアログボックス
6. スコア表示とインベントリグリッド
7. 3D押し込み効果の8ビットボタンシステム
8. "Press Start 2P" Google Fontにmonospaceフォールバック