バーチャルフォン · テーマ開発

あなたは Shine のバーチャルスマホ「ホーム画面テーマ」の開発者です。私が望むテーマのスタイルと、用意済みのアート素材を伝えます。完全なテーマパッケージを出力してください。ファイルは 3 つ：manifest.json、desktop.html、main.js です。
出力形式：各ファイルの前に「===== ファイル名 =====」という 1 行の区切りを置き、ファイル内容をそのまま出力すること。markdown のコードブロックで囲まない。説明・前置き・後書きは一切不要。この 3 ファイルと素材フォルダーをまとめて ZIP に圧縮してアップロードします。

—— テーマとは ——
テーマはバーチャルスマホのホーム画面の最下層に重ねる「雰囲気レイヤー」の H5 ページです：描くのは背景の雰囲気、時計、あいさつ、装飾ステッカーだけ。
App アイコングリッド、Dock、ページ切り替え、タップはすべて上層のネイティブ Launcher が担当します——独自の App グリッド構築、openApp / saveLayout の呼び出しは厳禁。

—— アート素材の約束（質感の主な源。提供された画像を優先して使うこと）——
- ZIP には assets/wallpaper.png（壁紙）、assets/wallpaper_night.png（夜用壁紙、任意）、
  assets/sticker-*.png（装飾ステッカー）が入っている場合がある——すべて相対パスで参照（CSS background-image または <img>）。
  壁紙は全画面の背景として敷き詰める。夜用壁紙がある場合は data.system.time.hour で判定（<6 || >=18 を夜とする）して切り替える
- icons/<appId>.png は App アイコンの上書き画像：ネイティブ Launcher が自動で読み込むため、manifest やコードでの参照は不要
- manifest の shell.backdrop_image に壁紙のパスを設定：WebView の初回描画前にネイティブ側が下敷きとして描き、白画面を防ぐ
- 私が提供していない素材のファイル名を捏造して参照しないこと。足りない部分は CSS グラデーション / テクスチャ / インライン SVG で補う
- ネットワークリクエストは全面禁止：fetch / XHR / リモート画像 / リモートフォント / CDN は不可。すべての素材は ZIP 内に置く

—— manifest.json の固定スケルトン（これをベースに微調整。構造は変えない。以下の // コメントはあなた向けの説明であり、出力する manifest.json はコメントなしの正しい純 JSON でなければならない）——
{
  "schema_version": 3,                       // 固定で 3。変更しない
  "name": "<テーマ名>",
  "version": "1.0.0",
  "entries": { "desktop": "desktop.html" },  // 雰囲気レイヤーのエントリーページ。固定
  "scripts": ["main.js"],                    // プラットフォームが ThemeSDK を注入した後に読み込む
  "shell": {
    "status_bar": "light",                   // ステータスバーの文字色：light=白文字（暗い壁紙） dark=黒文字（明るい壁紙）
    "backdrop_image": "assets/wallpaper.png" // 壁紙がある場合は必須：初回描画前にネイティブが下敷きにして白画面を防ぐ
  },
  "launcher": {
    "grid": { "cols": 4, "anchor": { "left": 0.04, "right": 0.04 } },
                                             // アイコングリッドは 4 列、左右に 4% ずつ余白
    "segments": [
      { "type": "zone", "id": "hero", "selector": "[data-theme-zone=\"hero\"]", "fallback_top": 0.3 },
                                             // hero プレースホルダーの高さを計測し、App グリッドをその下から始める
      { "type": "apps", "fill": true }       // 残りのスペースを App アイコンで埋める
    ],
    "dock": { "height": 84, "padding_h": 12, "bottom": 0.05 },
                                             // 下部 Dock：高さ / 水平パディング / 下端からの比率
    "icon_style": "flat",                    // アイコンの外観。下記参照
    "overflow_pages": { "grid_top": "full" },// 2 ページ目以降はグリッドを最上部から並べる
    "page_dots": "theme"                     // ページドットの配色をテーマに合わせる
  }
}
- status_bar は壁紙の明暗で選ぶ：暗い壁紙は light（白文字）、明るい壁紙は dark（黒文字）
- icon_style は 5 択：plain（元画像そのまま）| flat | polaroid（ポラロイド）| pill | glass。テーマの雰囲気に合わせる
- 明るい壁紙では launcher に "label": { "color": "#<濃い色>", "shadow": "light" } を追加すること。しないと App 名が既定の白文字になり読めない

—— desktop.html の約束 ——
- 装飾 DOM のみ。1 ページ目専用のヘッダー（時計 / あいさつ / キャラクター名）は <header data-theme-zone="hero"> に包む。Launcher がその高さを計測し、App グリッドをその下から始める
- CSS はすべて <style> 内にインラインで書く。壁紙 / ステッカーはパッケージ内の画像を相対パスで参照し、その他の装飾は CSS グラデーション / インライン SVG で描く
- セーフエリア（重要）：Android WebView では env(safe-area-inset-*) が常に 0。上部コンテナには必ず
  padding-top: calc(12px + max(env(safe-area-inset-top, 0px), var(--shine-safe-area-top, 0px))); を書く
- <script> や <script src> は書かない。ロジックはすべて main.js に置く（プラットフォームが ThemeSDK 注入後に manifest.scripts に従って読み込む）

—— main.js の約束 ——
(function () {
  'use strict';
  function render(data) {          // dataChanged：初回フレーム / キャラクター変更 / ページ切り替え時の全量レンダリング
    // data.system.time.hour/minute で時計を描く
    // data.character.name は持ち主（ユーザーの劇中ペルソナ）の名前。あいさつにはこれを使う。
    // 相手キャラクターへの呼びかけは data.character.worldName。混同しないこと
    // system.launcherPage > 0 のとき hero の opacity を '0' に（ページ切り替えでフェードアウト。純粋な背景の雰囲気は常時表示でも可）
    ThemeSDK.reportLayout();       // hero の高さ / 表示状態が変わったら必ず再報告
  }
  function lightRefresh() {        // dataUpdated：毎分の時計 tick（ページ切り替えは dataChanged 側）。textContent と表示切替だけを変更
    var data = ThemeSDK.getData(); // ここでは reportLayout しない。画像の再描画もしない
  }
  ThemeSDK.on('dataChanged', render);
  ThemeSDK.on('dataUpdated', lightRefresh);
  ThemeSDK.ready();                // 必ず呼ぶこと。呼ばないと実機は 3 秒以内にネイティブのホーム画面へ戻る
  ThemeSDK.reportLayout();
})();
- 使えるデータ：data.system.time { hour, minute }、data.system.launcherPage（0 = 1 ページ目）、
  data.character { name: 持ち主（ユーザーのペルソナ）の名前, worldName: 相手キャラクターの名前, worldTitle: 現在のワールド名（旧 App にない場合は worldName でフォールバック）}
- 構文はすべて ES5：var / function / 文字列連結。アロー関数、テンプレートリテラル、オプショナルチェーン ?.、分割代入は禁止——古い Android WebView でも動くこと

—— パフォーマンスのレッドライン（実機の多くはローエンド〜ミドルレンジの Android）——
- アニメーションは transform / opacity の CSS transition か animation のみ。広範囲の backdrop-filter は禁止
- requestAnimationFrame のループや setInterval での高頻度再描画は禁止。時計の更新は dataUpdated の配信に任せ、自前のタイマーを起動しない
- 大きな画像の読み込みは 1 回だけ（背景として敷き詰めれば十分）。JS で画像の src を繰り返し変更しない

—— 私が望むテーマのスタイル ——
[ここに記述。例：クリーム色の手帳風。上部に大きな時計と手書き風のあいさつ、壁紙の下半分にコラージュ装飾、アイコンはポラロイド風]

—— 用意済みの素材（ZIP に格納済み。これに従って参照すること）——
[実際に用意したファイルを列挙。例：
assets/wallpaper.png、assets/wallpaper_night.png、assets/sticker-moon.png、
icons/ にはアイコン 18 枚をすべて格納済み。
素材が 1 つもない場合は「素材なし」と書き、AI にすべて CSS で実装させる]