画面レイアウト設計 / Screen Layout Design

1. キャンバスサイズ / Canvas Size

Property	Value
Resolution	1280 x 720 px (720p)
Aspect Ratio	16:9
Renderer	PixiJS v8 (WebGL / WebGPU)
Target FPS	30 fps (streaming-optimized)
Coordinate Origin	Top-left (0, 0)

2. レイヤー構成 / Layer Structure

PixiJS の Container 階層で Z-order を管理する。下層から上層の順に描画される。

Managed via PixiJS Container hierarchy. Layers are drawn bottom-to-top.

Z	Layer Name	Content	Blend
0	`bgLayer`	Room tilemap (floor, walls, windows)	Normal
1	`furnitureLayer`	Furniture, appliances, items	Normal
2	`characterLayer`	John, Sara, Eve sprites	Normal
3	`bubbleLayer`	Speech bubbles, reaction icons ("!", "?", heart)	Normal
4	`uiLayer`	Status bars, clock, LifeCoin display	Normal
5	`effectLayer`	Tip effects, item drop animations, particles	Additive
6	`overlayLayer`	Full-screen event overlays, fade transitions	Normal

3. 画面レイアウト全体図 / Full Screen Layout

┌──────────────────────────────────────────────────────────────────┐
│ 0,0                                                    1280,0   │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │              TOP BAR (Info Bar)  y: 0-40                 │   │
│  │  ┌──────────┐  ┌────────────┐  ┌────────────────────┐   │   │
│  │  │ Day 12   │  │ 18:30 JST  │  │ 💰 LC: 1,234      │   │   │
│  │  └──────────┘  └────────────┘  └────────────────────┘   │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                  │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │                                                          │   │
│  │              GAME VIEWPORT  y: 40-620                    │   │
│  │                                                          │   │
│  │    ┌─────────┐        ┌─────────┐                       │   │
│  │    │  John   │        │  Sara   │                       │   │
│  │    │  32x32  │        │  32x32  │                       │   │
│  │    └─────────┘        └─────────┘                       │   │
│  │         ┌──────────────────────┐                         │   │
│  │         │ "Dinner smells great │                         │   │
│  │         │  tonight!"           │                         │   │
│  │         └──────────────────────┘                         │   │
│  │                     ┌───────┐                            │   │
│  │                     │ Eve   │                            │   │
│  │                     │ 24x24 │                            │   │
│  │                     └───────┘                            │   │
│  │                                                          │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                  │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │              STATUS BAR  y: 620-720                      │   │
│  │  ┌──────────────────┐┌──────────────────┐┌────────────┐ │   │
│  │  │ John  HP ███░ 80 ││ Sara  HP ████ 85 ││ Eve HP ██░ │ │   │
│  │  │ 🍖 60 😊 70     ││ 🍖 50 😊 75     ││ 🍖 55 😊80 │ │   │
│  │  │ ⚡ 75 😰 30     ││ ⚡ 80 😰 25     ││ ⚡ 70 🐾50 │ │   │
│  │  └──────────────────┘└──────────────────┘└────────────┘ │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                        1280,720 │
└──────────────────────────────────────────────────────────────────┘

4. エリア定義 / Area Definitions

4.1 トップバー / Top Bar (Info Bar)

ゲーム日数・時刻・LifeCoin 残高を表示する横帯。

Horizontal strip showing game day, clock, and LifeCoin balance.

Property	Value
Position	x: 0, y: 0
Size	1280 x 40 px
Background	Semi-transparent black (`rgba(0, 0, 0, 0.65)`)

┌─────────────────────────────────────────────────────────────┐
│                         TOP BAR (1280 x 40)                  │
│                                                              │
│  [12px margin]                                               │
│                                                              │
│  ┌──────────────┐   ┌──────────────┐   ┌──────────────────┐│
│  │ 📅 Day 12    │   │ 🕐 18:30 JST │   │ 💰 LC: 1,234    ││
│  │ x:12  w:140  │   │ x:570  w:140 │   │ x:1080  w:188   ││
│  └──────────────┘   └──────────────┘   └──────────────────┘│
│                                                              │
│  LEFT-ALIGNED        CENTER-ALIGNED        RIGHT-ALIGNED     │
└─────────────────────────────────────────────────────────────┘

Element	Position	Anchor	Font Size	Color	Format
Game Day	x: 12, y: 20	left-center	16px	`#FFFFFF`	`Day {n}` / `{n}日目`
Clock	x: 640, y: 20	center	18px bold	`#FFD700`	`HH:MM JST`
LifeCoin Balance	x: 1268, y: 20	right-center	16px	`#FFD700`	`LC: {n}` with coin icon

LifeCoin 表示の更新

投げ銭受信時にカウントアップアニメーション（数値が1ずつ増加する演出）を表示する。

On tip received, play a count-up animation (numbers increment one by one).

4.2 ゲームビューポート / Game Viewport

タイルマップとキャラクターが表示されるメインエリア。

Main area where the tilemap and characters are rendered.

Property	Value
Position	x: 0, y: 40
Size	1280 x 580 px
Tile Size	32 x 32 px
Grid	40 columns x 18 rows (effective)
View	Top-down (bird's eye)

┌────────────────────────────────────────────────────────┐
│                GAME VIEWPORT (1280 x 580)               │
│  y: 40                                                  │
│                                                         │
│  ┌──────────────────────────────────────────────────┐  │
│  │            ROOM TILEMAP                           │  │
│  │                                                   │  │
│  │  ┌────────┐                                      │  │
│  │  │ Kitchen │  ┌───┐  ┌──────┐  ┌──────┐         │  │
│  │  │ area   │  │Tbl│  │ Sofa │  │ Desk │         │  │
│  │  │        │  └───┘  └──────┘  │(John)│         │  │
│  │  └────────┘                    └──────┘         │  │
│  │                                                   │  │
│  │     ┌────┐                         ┌────────┐    │  │
│  │     │Bath│                         │ Bed    │    │  │
│  │     │room│                         │(futon) │    │  │
│  │     └────┘          ┌────┐         └────────┘    │  │
│  │                     │Eve │                        │  │
│  │                     │bed │                        │  │
│  │                     └────┘                        │  │
│  └──────────────────────────────────────────────────┘  │
│                                                  y: 620 │
└────────────────────────────────────────────────────────┘

スプライトサイズ / Sprite Sizes

Character	Sprite Size	Collision Box	Walk Speed
John	32 x 32 px	24 x 16 px (bottom-center)	2 px/frame
Sara	32 x 32 px	24 x 16 px (bottom-center)	2 px/frame
Eve	24 x 24 px	16 x 12 px (bottom-center)	3 px/frame

スプライトのアンカーポイントは足元中央 (0.5, 1.0) に設定する。Y座標ソートにより奥のキャラが先に描画される。

Sprite anchor is set to bottom-center (0.5, 1.0). Y-sort ensures characters further back are drawn first.

4.3 ステータスバー / Status Bar

キャラクターごとのステータスを常時表示する下部パネル。

Bottom panel showing per-character stats at all times.

Property	Value
Position	x: 0, y: 620
Size	1280 x 100 px
Background	Semi-transparent black (`rgba(0, 0, 0, 0.75)`)

┌──────────────────────────────────────────────────────────────────┐
│                      STATUS BAR (1280 x 100)                      │
│  y: 620                                                           │
│                                                                   │
│  ┌─ John (430 x 88) ──┐ ┌─ Sara (430 x 88) ──┐ ┌─ Eve (380x88)┐│
│  │                     │ │                     │ │              ││
│  │ [Face] John  ♥78    │ │ [Face] Sara  ♥78    │ │ [Face] Eve   ││
│  │ HP  ████████░░  80  │ │ HP  █████████░  85  │ │ HP  ████░ 90 ││
│  │ HGR ██████░░░░  60  │ │ HGR █████░░░░░  50  │ │ HGR ████░ 55 ││
│  │ MOD ███████░░░  70  │ │ MOD ███████░░░  75  │ │ MOD ████░ 80 ││
│  │ ENG ████████░░  75  │ │ ENG ████████░░  80  │ │ ENG ████░ 70 ││
│  │ STR ███░░░░░░░  30  │ │ STR ██░░░░░░░░  25  │ │ MSC ████░ 50 ││
│  │                     │ │                     │ │              ││
│  │ x:8                 │ │ x:442               │ │ x:876        ││
│  └─────────────────────┘ └─────────────────────┘ └──────────────┘│
│                                                           y: 720 │
└──────────────────────────────────────────────────────────────────┘

ステータス項目 / Status Items

John & Sara (Human Characters)

Status	Abbr	Icon	Bar Color	Range
HP	HP	❤️	`#FF4444` → `#44FF44`	0-100
Hunger	HGR	🍖	`#FF8C00`	0-100
Mood	MOD	😊	`#FFD700`	0-100
Energy	ENG	⚡	`#00BFFF`	0-100
Stress	STR	😰	`#FF6B6B`	0-100

Eve (Dog)

Status	Abbr	Icon	Bar Color	Range
HP	HP	❤️	`#FF4444` → `#44FF44`	0-100
Hunger	HGR	🍖	`#FF8C00`	0-100
Mood	MOD	😊	`#FFD700`	0-100
Energy	ENG	⚡	`#00BFFF`	0-100
Mischief	MSC	🐾	`#DA70D6`	0-100

ステータスバー色変化

HP バーは値に応じてグラデーション変化する:

70-100: Green (#44FF44)
30-69: Yellow (#FFD700)
0-29: Red (#FF4444) + 点滅アニメーション

HP bar color changes by value:

70-100: Green (#44FF44)
30-69: Yellow (#FFD700)
0-29: Red (#FF4444) + blinking animation

ステータスバーのレイアウト詳細 / Status Bar Layout Detail

Element	Position (relative to panel)	Size
John Panel	x: 8, y: 6	430 x 88 px
Sara Panel	x: 442, y: 6	430 x 88 px
Eve Panel	x: 876, y: 6	396 x 88 px
Face Icon	x: 4, y: 4 (per panel)	24 x 24 px
Name Label	x: 32, y: 4 (per panel)	auto width
Love Score	right-aligned in panel header	auto width
Bar Width	200 px (John/Sara), 160 px (Eve)	10 px height
Bar Label (Abbr)	x: 32, y: offset per row	14px font
Bar Value (Number)	right of bar, 4px gap	12px font

5. 吹き出し / Speech Bubbles

キャラクターの会話・コメント返信・投げ銭リアクションに使用する。

Used for character dialogue, comment replies, and tip reactions.

5.1 吹き出しレイアウト / Bubble Layout

         ┌────────────────────────────┐
         │ "Dinner smells great       │
         │  tonight! Let's eat        │
         │  together~"                │
         │                            │
         │  [To: cooking_fan_123]     │  ← comment reply attribution
         └──────────┬─────────────────┘
                    │
                    ▼
              ┌──────────┐
              │ Character │
              │  Sprite   │
              └──────────┘

5.2 吹き出し仕様 / Bubble Specifications

Property	Value
Max Width	280 px
Min Width	80 px
Padding	12 px (all sides)
Border Radius	8 px
Background	`#FFFFFF` (opacity 0.95)
Border	2 px solid `#333333`
Tail	8 px triangle pointing down to character
Position	Centered above character sprite, 8 px gap from sprite top
Z-Index	`bubbleLayer` (layer 3)

5.3 テキスト仕様 / Text Specifications

Property	Value
Font Size	14px
Line Height	1.4 (≈ 20px)
Max Lines	4 lines
Max Characters (JP)	60 characters (approx. 15 chars x 4 lines)
Max Characters (EN)	120 characters (approx. 30 chars x 4 lines)
Text Color	`#333333`
Word Wrap	enabled
Overflow	truncate with "..."

5.4 吹き出しの種類 / Bubble Types

Type	Border Color	Use Case	Duration
Normal	`#333333`	Character-to-character dialogue	5s
Comment Reply	`#4A90D9`	Responding to viewer comment	6s
Tip Reaction	`#FFD700` (gold)	Thanking a tipper	8s
Whisper / Thought	`#999999` (dashed border)	Internal monologue, sleep talk	4s

5.5 吹き出しの表示ルール / Display Rules

同時に表示できる吹き出しは最大 3個（キャラクター1体につき1個）
重なり防止: 他キャラの吹き出しと重なる場合は水平方向にオフセットする
画面外はみ出し防止: ビューポート端に近い場合は内側にクランプする
フェードイン (200ms) → 表示 → フェードアウト (300ms)
Maximum 3 bubbles displayed simultaneously (1 per character)
Overlap prevention: offset horizontally if overlapping another character's bubble
Screen edge clamping: clamp to viewport edge when character is near screen border
Fade-in (200ms) → display → fade-out (300ms)

5.6 コメント返信の帰属表示 / Comment Reply Attribution

コメント返信時は吹き出し下部に返信先ユーザー名を表示する。

When replying to a comment, show the target username at the bottom of the bubble.

┌──────────────────────────────┐
│ "Thanks for watching!        │
│  I'm making curry tonight!"  │
│                              │
│  ┌─────────────────────────┐ │
│  │ 💬 To: cooking_fan_123  │ │
│  └─────────────────────────┘ │
└──────────────────────────────┘

Element	Font Size	Color
Attribution label	11px	`#888888`
Username	11px bold	`#4A90D9`

6. 投げ銭エフェクト表示エリア / Tip Effect Display Area

投げ銭（Super Chat / TikTok Gift）受信時のビジュアルエフェクト領域を定義する。

Defines the visual effect regions for incoming tips (Super Chat / TikTok Gift).

6.1 ティア別エフェクト領域 / Effect Areas by Tier

┌──────────────────────────────────────────────────────────────────┐
│                                                                  │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ ★ TIP BANNER AREA (Small/Medium tips)                    │   │
│  │   y: 44 ~ 88   (height: 44px)                           │   │
│  │   ┌──────────────────────────────────────────┐           │   │
│  │   │  🎉 100 LC from yuki_chan!                │           │   │
│  │   │      "Cup noodles arrived!"              │           │   │
│  │   └──────────────────────────────────────────┘           │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                  │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ ★ ITEM DROP ZONE (center of viewport)                    │   │
│  │   x: 440~840, y: 200~420                                 │   │
│  │                                                          │   │
│  │              ┌──────┐                                    │   │
│  │              │ Item │  ← drops from top with bounce      │   │
│  │              │ 48x48│                                    │   │
│  │              └──────┘                                    │   │
│  │                                                          │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                  │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ ★ FULL-SCREEN EFFECT (Large tips 5,000+ LC)              │   │
│  │   Entire viewport (1280 x 720)                           │   │
│  │   - Screen flash / sparkle particles                     │   │
│  │   - BGM change                                           │   │
│  │   - Special cut-in animation (center 640x360)            │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

6.2 ティア別エフェクト仕様 / Effect Specs by Tier

Small Tips（100-499 LC）

Property	Value
Banner Position	x: 640 (center), y: 66
Banner Size	auto-width (max 600px) x 44 px
Banner BG	`rgba(255, 215, 0, 0.9)` (gold)
Banner Text	16px bold, `#333333`
Item Drop Start	x: random(440-840), y: 40
Item Drop End	Near receiving character position
Item Sprite Size	48 x 48 px
Drop Animation	Ease-out bounce, 800ms
Banner Duration	3 seconds

Medium Tips（500-4,999 LC）

Property	Value
Banner Position	x: 640 (center), y: 66
Banner Size	auto-width (max 800px) x 52 px
Banner BG	`rgba(255, 165, 0, 0.95)` (orange-gold)
Banner Text	20px bold, `#FFFFFF`
Sparkle Particles	20-40 particles, spread from banner
Delivery Animation	Knock SFX → door opens → item slides in
Banner Duration	5 seconds

Large Tips（5,000+ LC）

Property	Value
Full-Screen Flash	White overlay, opacity 0→0.6→0, 500ms
Cut-in Area	x: 320, y: 180, size: 640 x 360 px (center)
Cut-in BG	`rgba(0, 0, 0, 0.8)` with gold border
Banner Text	28px bold, `#FFD700`, with glow effect
Particle Count	100+ sparkles across full screen
BGM	Fade current → fanfare → fade back
Banner Duration	8 seconds
Special Event	Event-specific sequence begins after banner

6.3 投げ銭バナーのテキスト表示 / Tip Banner Text Format

Small:   "🎉 {amount} LC from {username}!"
Medium:  "✨ {amount} LC from {username}! ✨"
Large:   "🌟🌟 {amount} LC from {username}!! 🌟🌟"

アイテム確定時（下段追加）/ When item determined (second line):
         "{item_name_jp} / {item_name_en}"

7. リアクションアイコン / Reaction Icons

キャラクターの頭上に表示される小さな感情アイコン。

Small emotion icons displayed above character heads.

    ┌──┐
    │❗│  ← reaction icon (16x16 or 24x24)
    └──┘
  ┌──────┐
  │ Char │
  │      │
  └──────┘

Icon	Meaning	Trigger
❗	Surprised / Notice	Comment directed at character
❓	Confused / Thinking	Deciding action
❤️	Love / Affection	High love score event
💢	Angry	Argument
💤	Sleeping	Sleep action
🎵	Happy / Singing	High mood
💦	Embarrassed	Teasing comments
⭐	Excited	Tip reaction
🍖	Hungry	Hunger below 20

Property	Value
Size	24 x 24 px
Position	Centered above sprite, y: sprite.top - 28 px
Animation	Bounce-in (200ms) + float (up-down 2px, 1s loop)
Duration	2 seconds

8. OBS シーン設定 / OBS Scene Configuration

8.1 メインシーン / Main Scene

OBS Studio でゲーム画面をキャプチャするための Browser Source 設定。

Browser Source configuration for capturing the game screen in OBS Studio.

Property	Value
Source Type	Browser Source
URL	`http://localhost:3000`
Width	1280 px
Height	720 px
FPS	30
CSS	(empty — game handles all styling)
Shutdown source when not visible	OFF
Refresh browser when scene becomes active	OFF
Custom frame rate	checked, 30 fps

8.2 推奨OBSシーン構成 / Recommended OBS Scene Layout

┌──────────────────────────────────────────────────────────────────┐
│                    OBS Scene: "AI Cohabitation Life"              │
│                                                                   │
│  Sources (bottom to top):                                        │
│                                                                   │
│  ┌───────────────────────────────────────────────────────────┐   │
│  │ 1. [Browser Source] Game Screen                            │   │
│  │    URL: http://localhost:3000                              │   │
│  │    Size: 1280 x 720                                       │   │
│  │    Position: (0, 0)                                       │   │
│  │    FULL CANVAS — no scaling needed                        │   │
│  └───────────────────────────────────────────────────────────┘   │
│                                                                   │
│  All UI elements (status bar, clock, tip effects, speech         │
│  bubbles) are rendered INSIDE the PixiJS canvas.                 │
│  No additional OBS overlays are needed for game UI.              │
│                                                                   │
│  Optional OBS-only overlays:                                     │
│  ┌───────────────────────────────────────────────────────────┐   │
│  │ 2. [Image] Channel logo watermark (optional)              │   │
│  │    Size: 80 x 80                                          │   │
│  │    Position: top-right (1192, 4)                          │   │
│  │    Opacity: 40%                                           │   │
│  └───────────────────────────────────────────────────────────┘   │
│  ┌───────────────────────────────────────────────────────────┐   │
│  │ 3. [Text] "LIVE" indicator (optional)                     │   │
│  │    Font: 14px bold                                        │   │
│  │    Color: #FF0000 with white outline                      │   │
│  │    Position: top-right (1220, 48)                         │   │
│  └───────────────────────────────────────────────────────────┘   │
│                                                                   │
└──────────────────────────────────────────────────────────────────┘

8.3 配信設定 / Streaming Settings

Setting	YouTube Live	TikTok Live
Protocol	RTMP	RTMP
Resolution	1280 x 720	1280 x 720
Bitrate (video)	2,500-4,000 kbps	2,000-3,000 kbps
Bitrate (audio)	128 kbps	128 kbps
Encoder	x264 or NVENC	x264 or NVENC
Keyframe Interval	2 seconds	2 seconds
Profile	High	High
Rate Control	CBR	CBR

マルチプラットフォーム配信

YouTube と TikTok に同時配信する場合は、OBS の Multi-RTMP プラグインまたは Restream.io を使用する。ローカルマシンの CPU/GPU リソースに注意。

For simultaneous streaming to YouTube and TikTok, use OBS Multi-RTMP plugin or Restream.io. Monitor local machine CPU/GPU resources.

9. フォント選定 / Font Selection

日本語と英語の両方で読みやすく、ピクセルアートの雰囲気に合うフォントを選定する。

Select fonts that are readable in both JP and EN, matching the pixel art aesthetic.

9.1 プライマリフォント / Primary Font

Use Case	Font	Fallback	Notes
UI Text (status, clock, LC)	"DotGothic16"	"Press Start 2P", monospace	Google Fonts. Pixel-style JP+EN
Speech Bubbles	"M PLUS 1p" (Regular 400)	"Noto Sans JP", sans-serif	Google Fonts. Readable JP+EN
Tip Banner	"M PLUS 1p" (Bold 700)	"Noto Sans JP", sans-serif	Bold for impact
Numbers (stats, LC)	"Press Start 2P"	"DotGothic16", monospace	Pixel number aesthetic

9.2 フォント読み込み / Font Loading

typescript

// Google Fonts CDN (in index.html or loaded via WebFontLoader)
const FONT_URLS = [
  'https://fonts.googleapis.com/css2?family=DotGothic16&display=swap',
  'https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap',
  'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
]

9.3 フォントサイズ一覧 / Font Size Reference

Element	Font	Size	Weight	Color
Game Day label	DotGothic16	16px	400	`#FFFFFF`
Clock	DotGothic16	18px	400	`#FFD700`
LifeCoin balance	Press Start 2P	14px	400	`#FFD700`
Status bar name	DotGothic16	14px	400	`#FFFFFF`
Status bar abbr	DotGothic16	12px	400	`#CCCCCC`
Status bar value	Press Start 2P	12px	400	`#FFFFFF`
Speech bubble text	M PLUS 1p	14px	400	`#333333`
Comment attribution	M PLUS 1p	11px	400	`#888888`
Tip banner (small)	M PLUS 1p	16px	700	`#333333`
Tip banner (medium)	M PLUS 1p	20px	700	`#FFFFFF`
Tip banner (large)	M PLUS 1p	28px	700	`#FFD700`

10. カラーパレット / Color Palette

ピクセルアートの温かみと視認性を両立するカラーパレット。

A color palette balancing pixel art warmth with readability.

10.1 UI カラー / UI Colors

Name	Hex	Usage
`ui-bg-dark`	`#1A1A2E`	Top bar / status bar background base
`ui-bg-overlay`	`rgba(0,0,0,0.65)`	Top bar overlay
`ui-bg-status`	`rgba(0,0,0,0.75)`	Status bar overlay
`ui-text-primary`	`#FFFFFF`	Primary UI text
`ui-text-secondary`	`#CCCCCC`	Secondary / label text
`ui-text-muted`	`#888888`	Attribution, hints
`ui-gold`	`#FFD700`	LifeCoin, clock, highlights
`ui-link`	`#4A90D9`	Comment attribution, links

10.2 ステータスバーカラー / Status Bar Colors

Name	Hex	Usage
`bar-hp-high`	`#44FF44`	HP 70-100
`bar-hp-mid`	`#FFD700`	HP 30-69
`bar-hp-low`	`#FF4444`	HP 0-29
`bar-hunger`	`#FF8C00`	Hunger bar
`bar-mood`	`#FFD700`	Mood bar
`bar-energy`	`#00BFFF`	Energy bar
`bar-stress`	`#FF6B6B`	Stress bar
`bar-mischief`	`#DA70D6`	Mischief bar (Eve)
`bar-bg`	`#333333`	Bar background (unfilled)

10.3 吹き出しカラー / Speech Bubble Colors

Name	Hex	Usage
`bubble-bg`	`#FFFFFF` (95% opacity)	Bubble background
`bubble-border-normal`	`#333333`	Normal dialogue
`bubble-border-comment`	`#4A90D9`	Comment reply
`bubble-border-tip`	`#FFD700`	Tip reaction
`bubble-border-thought`	`#999999`	Thought / whisper
`bubble-text`	`#333333`	Bubble text

10.4 エフェクトカラー / Effect Colors

Name	Hex	Usage
`effect-gold`	`#FFD700`	Tip sparkles
`effect-orange`	`#FFA500`	Medium tip banner
`effect-white`	`#FFFFFF`	Large tip flash
`effect-particle`	`#FFE4B5`	Particle glow

10.5 ゲーム画面カラー / Game Screen Colors

Name	Hex	Usage
`room-floor`	`#D2B48C`	Wood floor base
`room-wall`	`#F5F5DC`	Wall base
`room-shadow`	`rgba(0,0,0,0.15)`	Furniture shadows
`room-window-light`	`rgba(255,255,200,0.3)`	Window light overlay
`night-overlay`	`rgba(10,10,40,0.4)`	Nighttime tint (22:00-6:00)
`morning-overlay`	`rgba(255,200,100,0.15)`	Morning tint (6:00-8:00)
`evening-overlay`	`rgba(255,120,50,0.2)`	Evening tint (17:00-19:00)

11. 時間帯別演出 / Time-of-Day Rendering

ゲーム内時刻に応じてビューポートの色調を変化させる。

Viewport color tint changes based on in-game time.

Time (JST)	Overlay	Lighting	Notes
6:00-8:00	`morning-overlay`	Warm yellow tint	Window light bright
8:00-17:00	None	Natural / neutral	Full brightness
17:00-19:00	`evening-overlay`	Orange sunset tint	Window shows sunset
19:00-22:00	Slight dim	Indoor lights on	Warm interior glow
22:00-6:00	`night-overlay`	Dark blue tint	Only lamp areas lit

12. レスポンシブ考慮 / Responsive Considerations

OBS Browser Source は固定サイズで取り込むため、レスポンシブ対応は不要。ただし、デバッグ用にブラウザで直接開く場合の挙動を定義する。

OBS Browser Source captures at a fixed size, so responsive design is unnecessary. However, behavior when opening directly in a browser for debugging is defined below.

Scenario	Behavior
OBS Browser Source	Fixed 1280x720. No scaling.
Desktop browser (debug)	Canvas fixed at 1280x720. CSS `margin: 0 auto` centers it. Black letterbox around canvas.
Window smaller than 1280x720	CSS `transform: scale()` to fit, maintaining aspect ratio.

13. パフォーマンス指針 / Performance Guidelines

Metric	Target	Notes
Frame rate	30 fps stable	OBS captures at 30 fps; higher is unnecessary
Draw calls	< 50 per frame	Use sprite batching and texture atlases
Texture memory	< 64 MB	All sprites in shared atlas (2048x2048)
Particle count (idle)	0	Particles only during tip effects
Particle count (max)	150	Large tip effect peak
Speech bubble updates	On text change only	No per-frame recalculation
Status bar updates	On state change only	WebSocket push triggers redraw

14. 座標早見表 / Coordinate Quick Reference

全レイアウト要素の座標を一覧化する。

Consolidated list of all layout element coordinates.

Element	x	y	Width	Height	Anchor
Canvas	0	0	1280	720	top-left
Top Bar	0	0	1280	40	top-left
Game Day label	12	20	auto	auto	left-center
Clock label	640	20	auto	auto	center
LifeCoin label	1268	20	auto	auto	right-center
Game Viewport	0	40	1280	580	top-left
Status Bar	0	620	1280	100	top-left
John Status Panel	8	626	430	88	top-left
Sara Status Panel	442	626	430	88	top-left
Eve Status Panel	876	626	396	88	top-left
Tip Banner (small)	640	66	max 600	44	center
Tip Banner (medium)	640	66	max 800	52	center
Item Drop Zone	440-840	200-420	400	220	center
Cut-in (large tip)	320	180	640	360	top-left

画面レイアウト設計 / Screen Layout Design ​

1. キャンバスサイズ / Canvas Size ​

2. レイヤー構成 / Layer Structure ​

3. 画面レイアウト全体図 / Full Screen Layout ​

4. エリア定義 / Area Definitions ​

4.1 トップバー / Top Bar (Info Bar) ​

4.2 ゲームビューポート / Game Viewport ​

スプライトサイズ / Sprite Sizes ​

4.3 ステータスバー / Status Bar ​

ステータス項目 / Status Items ​

ステータスバーのレイアウト詳細 / Status Bar Layout Detail ​

5. 吹き出し / Speech Bubbles ​

5.1 吹き出しレイアウト / Bubble Layout ​

5.2 吹き出し仕様 / Bubble Specifications ​

5.3 テキスト仕様 / Text Specifications ​

5.4 吹き出しの種類 / Bubble Types ​

5.5 吹き出しの表示ルール / Display Rules ​

5.6 コメント返信の帰属表示 / Comment Reply Attribution ​

6. 投げ銭エフェクト表示エリア / Tip Effect Display Area ​

6.1 ティア別エフェクト領域 / Effect Areas by Tier ​

6.2 ティア別エフェクト仕様 / Effect Specs by Tier ​

Small Tips（100-499 LC） ​

Medium Tips（500-4,999 LC） ​

Large Tips（5,000+ LC） ​

6.3 投げ銭バナーのテキスト表示 / Tip Banner Text Format ​

7. リアクションアイコン / Reaction Icons ​

8. OBS シーン設定 / OBS Scene Configuration ​

8.1 メインシーン / Main Scene ​

8.2 推奨OBSシーン構成 / Recommended OBS Scene Layout ​

8.3 配信設定 / Streaming Settings ​

9. フォント選定 / Font Selection ​

9.1 プライマリフォント / Primary Font ​

9.2 フォント読み込み / Font Loading ​

9.3 フォントサイズ一覧 / Font Size Reference ​

10. カラーパレット / Color Palette ​

10.1 UI カラー / UI Colors ​

10.2 ステータスバー カラー / Status Bar Colors ​

10.3 吹き出しカラー / Speech Bubble Colors ​

10.4 エフェクトカラー / Effect Colors ​

10.5 ゲーム画面カラー / Game Screen Colors ​

11. 時間帯別演出 / Time-of-Day Rendering ​

12. レスポンシブ考慮 / Responsive Considerations ​

13. パフォーマンス指針 / Performance Guidelines ​

14. 座標早見表 / Coordinate Quick Reference ​