# nika typing — スキン仕様 v3.3（ロゴを添付イラストの切り抜きに差し替え／プレイ画面・ちびキャラの雑談版／舞台は記号のみ）

v3 は v2 の骨組み（VN型の下部ダイアログ、分節フィードバック、意味チップ、控えめなヒント/Esc、スキンごとの枠と進行表示、キーボード付きモバイル）をそのまま引き継いでいます。そのうえで、舞台の主役を「大きな猫NPC」から「ちびキャラたち」に替えました。
**v3.1 では、「売り子と客の1対1の購入」をやめ、ブースの前で友だち同士が雑談している空気にしました。v3.2 では、吹き出しから台詞をなくし、記号だけで「雑談している」ことを伝える形にしました。** 特定の会話にしばられない、汎用の「場」です。
v2 から変えていない項目（色の意味、分節、トークン、スキンごとの枠や飾り）は `../v2/SKIN-SPEC.md` の §3・§4・§6・§7 がそのまま有効です。この文書は v3 の差分だけを書きます。

- モック: `mock/play.html`（`?skin=a|b|c&state=normal|pre|correct|miss&kb=1`）、`mock/play.css`、`mock/art.js`
- 書き出し: `mock/render.py`（2x、Playwright）、`mock/compare.py`
- 素材: `art/`（背景は v2 と同じ。キャラの切り抜き、ロゴ）
- 変更前（台本どおりの購入シーン）の C デスクトップは `png/before-scripted/` に残してあります。

## 0. 舞台の原則（v3.2）: 舞台は記号だけ、言葉は下のパネルだけ

**舞台には台詞を出しません。** 吹き出しの中身は「…」「♪」「笑い線」「スマイルの弧」などの記号だけにします。日本語・中国語・英語の単語は、舞台には1文字も置きません。
理由: 台詞を出すと、会話の内容とシーンがそこで決まってしまうからです。記号なら「みんなでわいわい話している」ことだけが伝わり、どんな練習文を入れても成り立ちます。
**実際の言葉（目標文、意味チップ、入力）は、下の YOUR TURN パネルにだけ置きます。** 学習の文字はパネル、舞台は雰囲気。この役割分担は意図したものです。

1. **店員と客の構図にしません。** 机の真後ろに立つ「売り子」は置きません。4人とも机の手前で、ゆるい弧になって互いの方を向きます。
2. **記号の吹き出しを同時にいくつも出します。** 大きさ（l/m/s）と不透明度に差をつけて、何人もが並行して話している感じを出します。
3. **ゴーストを1つ置きます。** 点線で半透明の「…」の吹き出しを、少し上に浮かせます。会話がずっと続いている感じを出すためです。ログの一覧は置きません。
4. **学習者もグループの一人です。** 同じ形の吹き出しをアクセント色にし、「•••」で自分が話す番を示します。
5. **名札や役職は付けません。** 誰が話しているかは、しっぽの向きで分かるようにします。
6. 正解・ミスの反応も記号で表します（§4）。友だちが文で返事をすることはありません。
7. シーン名は環境を表す軽いラベルにします（「攤位前閒聊」/ SCENE · コミケの雑談）。購入クエストのような名前にはしません。B の進行表示も「第1句〜第5句」です。
8. 練習文「わたしも新刊ほしい！」（我也想要新刊！）は、入れ替えられる一例です。舞台はどの文にも依存しません。

v3.1（吹き出しに台詞がある版）の C デスクトップは `png/before-text/` に残してあります。比較は `png/compare-text-vs-iconic.png` で見られます。

## 1. 舞台のレイヤー（奥から順）

| z | レイヤー | 内容 |
|---|---|---|
| 0 | bg | スキンごとの背景（A ロビー / B 駅 / C 夜市）。v2 と同じアンカー配置です |
| 1 | fxWorld | 背景側の演出（花火など、スキンごと） |
| 1 | fg | 背景をもう1枚重ね、`clip-path` で机と本を切り出したもの（`back:true` のキャラだけを隠します。v3.1 では使っていません） |
| 2 | `.chara.far` | 少し奥の友だち（デスクトップでは猫耳の少女）。`brightness(.95) saturate(.92)` で、ぼかしはかけません |
| 3 | `.chara` | 友だちと学習者 |
| 5 | grade | スキンごとの色調補正 |
| UI | 吹き出し・HUD・ダイアログ | 舞台の上に重ねます |

- キャラの共通処理: `var(--chara-f)`（スキンごとの色補正）、`--rim`（縁の光）、接地影。
  - A: `saturate(.96) sepia(.06)`
  - B: 補正なし
  - C: `brightness(.9) saturate(1.05)`
- **全員**の足元を、ダイアログ窓の上端でフェードさせます。インラインの `-webkit-mask` で、f=(DT−top)/h とし、f−3% から f+5% にかけて透明にします。
  - DT（窓の上端）: d=484、m=544、k=298

## 2. モード別のキャラ配置（CSS px、1x、中心 x と身長 h）

| モード | 学習者 | ツインテール | キャップ（反転） | 猫耳（far） |
|---|---|---|---|---|
| d 1280×800 | x214、h540（いちばん手前） | x448、h466 | x846、h468 | x1052、h404（少し奥） |
| m 390×844 | x66、h380 | x200、h340 | x330、h330 | 非表示 |
| k 390×844＋KB | x66、h280（頭と肩） | x196、h250 | x318、h250 | 非表示 |

- 向き: 左の2人は右を、右の2人は左を向き、輪になります。ツインテールの子は、本をキャップの子に見せる形です（差し出す相手は客ではなく友だちです）。
- 隣どうしを少し重ねると「群れ」に見えます。間隔を均等にしすぎないようにします。

## 3. 記号の吹き出し `.cb.ic` と浮き記号 `.mk`（v3.2）

**吹き出し `.cb.ic`**（白地の丸い吹き出し。中身は記号だけ）

| 大きさ | 寸法（d / m・k は ×0.78） | 使いどころ |
|---|---|---|
| `l` | 92×62 | その場でいちばん目立つ発言（1つだけ） |
| `m` | 74×50 | 並行している普通の発言 |
| `s` | 54×38 | 相づち、ゴースト |

| 中身 `k-*` | 記号 | 意味 |
|---|---|---|
| `dots` | ●●●（濃→薄の3点） | 何かしゃべっている（いちばん基本） |
| `smile` | スマイルの弧だけ | 楽しそうに話している、相づち |
| `heart` | 小さなハート（ピンク） | 好き・かわいい（正解時だけ、控えめに） |
| `.ghost` | 点線・不透明度 .5 の `dots` | 数秒前の発言。会話が続いている感じ |
| `.me.dots` | アクセント色の枠に ●●● | 学習者が話す番 |
| `.me.dots.oops` | 赤い枠に ●●● と「!?」 | ミスした直後 |
| `.me.said` | 正解色の枠にスマイル＋✓バッジ | 正解した＝自分の発言が輪に加わった |

**浮き記号 `.mk`**（吹き出しなしで頭のまわりに浮かべる。白／紺のハロー付き）

| 記号 | 色 | 意味 |
|---|---|---|
| `laugh` | インク色の短い弧3本（マンガの笑い線） | くすくす笑い |
| `note` / `notes` | ♪ / ♫（金） | 機嫌がいい、鼻歌 |
| `spark` | 4方向のキラキラ（金） | うれしい、ひらめき（控えめに） |
| `sweat` | 水色のしずく | あせ、困った |
| `?` | ツインテールのエモート | 首をかしげる |

- 配置は「話す人の頭のてっぺん（cx, top）」からの相対値（単位 h/500）です。モードが変わっても、頭について動きます。しっぽの先がこの点にきます。しっぽは `tl`（左下）か `tr`（右下）です。
- 色: 吹き出しの記号は `--cb-ic`（A こげ茶、B 紺、C 青緑）。浮き記号のインクは `--mk-ink`、ハローは `--mk-halo`（C は紺のハローと、シアンのほのかな光）。
- 同時に出す数の目安: デスクトップは友だち3〜4個＋ゴースト1個＋自分1個。m は2個＋ゴースト1個（キャップの子の吹き出しは頭上に移す）。k は友だち1個＋自分1個＋笑い線（ゴーストとキラキラは省く）。
- 使わないもの: 文字、単語、名札、「w」などのアルファベット（読めてしまうので、笑いは線で表します）。ネオンピンク（ロゴ専用の色）。
- 対話ログ（左のパネル）は廃止したままです。

## 4. 反応（正解・ミス）も記号だけ

| 状態 | 友だち | ツインテールの子 | 学習者 |
|---|---|---|---|
| normal | ツインテ `dots`(l)＋ゴースト `dots`、キャップ `smile`＋笑い線、猫耳 ♫♪ | そのまま | `•••` |
| correct | キャップ `smile`(l)＋笑い線、猫耳 ♫＋キラキラ＋`heart`、ゴースト | `.happy`（跳ねる）＋♪＋キラキラ | スマイル＋✓（正解色） |
| miss | キャップ 笑い線＋`dots`(s)、猫耳 `smile`(s)＋あせ、ゴースト | `.confused`（かたむく）＋「?」とあせ | `•••!?`（赤） |

- ミスは「怒られる」のではなく、「友だちにくすっと笑われる」温度感です。それでも文のツッコミは出しません。
- スキン固有の演出（A の正解スタンプ、B の改札印、C の PERFECT ネオンや MISS 表示）は v2 のままです。これらは舞台の台詞ではなく、ゲームの判定表示です。
- 赤はミス専用、緑は正解専用です。

## 5. ブランド（ロゴマーク）

- **v3.3（2026-10-09）から、公式マークはユーザー提供の手描きイラストの白線を切り抜いたものです。** ノートPCの後ろから覗く猫、左の3本の動き線、右のマグ。形・比率・手描きの揺れは元の絵のままで、描き直していません。
- 使うファイル（`../brand/` が正本、`art/` はモック用のコピー）:
  - `art/nika-icon-cutout-tight.svg`（HUD ではこれを使用。余白を詰めた 4:3 のベクター。高さで指定）
  - `art/nika-icon-cutout.svg`（正方形・余白込み。アプリアイコンなど）
  - `art/nika-icon-cutout-small.svg`（16/32px 用の太線版）
  - `art/nika-icon-cutout-pink.png`（透過 PNG 1024²、ラスター用）
  - 白線版・グロー版・背景付きは `../brand/nika-icon-cutout-*.png`。一覧は `../brand/nika-icon-cutout-cleansheet.png`
- 旧マーク（描き直したネオン猫 `art/nika-icon.svg` / `nika-icon-cleansheet.png`）は比較用に残してありますが、使いません。比較: `png/compare-icon-before-after-cutout.png`、旧書き出しは `png/before-cutout/`。
- 置き場所: HUD 左上の戻るボタンのプレート内に「< [マーク] nika typing」と並べます。
  - デスクトップ: マークの高さ 38px（幅は約 51px）。
  - モバイル: マークの高さ 28px（幅は約 37px）で、ワードマークは省きます。
- ネオンピンクはロゴだけの色です。UI の操作色には使いません。
- **舞台には絶対に出しません。** NPC にも、背景の小物にも、エモートにも使いません。

## 6. 切り抜きの手順（`art/key.py`）

1. `src-cast.jpg`（1280×720、地の色 ≈ (255,250,241)）を、空の列の並びで4人に分けます。
2. 地の色に近いピクセルのうち、画像の外周につながっているものだけを透明にします（`scipy.ndimage.label`）。境界の差が 7〜26 の範囲はソフトなアルファにします。
3. 地の色を色から引き戻します: C = (I − (1−a)·bg)/a。
4. 閉じた隙間（髪の内側など）は、シード点を指定して個別に抜きます（例: (1197,296)）。
5. アバター: 売り子と学習者の顔を切り出し、クリーム色の円の上に 160px で配置します。
- ロゴマークの切り抜き手順は `../brand/README.md`（`../brand/cutout-work/`）にあります。

## 7. 書き出し一覧（`png/`）

- play-{A,B,C}-normal--desktop / play-{A,B,C}-normal--mobile-keyboard / play-C-normal--mobile
- play-{A,B,C}-correct--desktop / play-C-miss--desktop / play-C-miss--mobile-keyboard
- compare-skins--desktop.png（3スキン並び、1x）/ compare-v2-v3.png（C デスクトップ、v2 と v3.2）
- compare-scripted-vs-casual.png（購入の台本 → 雑談）/ compare-text-vs-iconic.png（台詞の吹き出し → 記号の吹き出し）
- compare-icon-before-after-cutout.png（描き直したネオン猫 → 添付イラストの切り抜き、HUD 拡大つき）。旧書き出し一式は before-cutout/

## 8. まだ足りない点

- 立ち絵が1ポーズずつしかありません。そのため、全員が同じ向き・同じ姿勢で、表情も変わりません。
  - 雑談らしさを出すには、横を向く・笑う・指さす・飲み物を持つ、などの差分が必要です。
- ツインテールの子は、元の絵が本を差し出すポーズです。並べ方で「友だちに見せている」ように見せていますが、少しだけ店員っぽさが残っています。
- 吹き出しは頭からの相対位置で置いていますが、重なりの回避は手で調整しています（m では位置を上書き）。実装では自動で重ならないようにする仕組みが必要です。
- 記号は静止画です。実装では、●●● が順に点滅する、♪ がふわっと浮く、ゴーストが上へ流れて消える、などの動きで「雑談している」感じがもっと強く出るはずです。
- 切り抜きの縁に、わずかに明るいにじみが残っています（特に C）。キャラは昼の光で描かれています。
- 学習者は左右反転していません（v3.1 で元の向きに戻しました）。キャップの子は反転しているので、リュックの側が元絵と逆です。
- 練習文を「わたしも新刊ほしい！」に変えましたが、元の「新刊を一冊ください」に戻すこともできます（D と SEG を差し替えるだけです）。
- 演出は静止画のみ、キーボードは仮の画像、プレイ画面以外の画面はまだデザインしていません。