/* ============================================================
   Wa（輪）LP — 16タイプキャラクター「ひとふで」追加スタイル
   wa-a.css の後に読み込む。既存 .tcell スタイルへの追記のみ。
   キーフレームは walp- 接頭辞（LP側と衝突しない）。
   ============================================================ */

/* セル: キャラが入る分、上下の余白を整える（.has-chara は注入JSが付与） */
#types .tcell.has-chara{padding:15px 8px 12px}

/* キャラ本体 — 52px（リスト行の規定サイズ）。全身＋影のまま。切り抜き禁止 */
#types .tc-chara{width:52px;height:52px;margin:0 auto 8px;position:relative}
#types .tc-chara svg{display:block;width:100%;height:100%;overflow:visible}

/* 呼び名（日本語の愛称。「〜の子」までがひとつの名前 → 改行させない） */
#types .tc-name{font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:.02em;margin-top:3px;white-space:nowrap}
#types .tc-jp{margin-top:1px}

/* ホバー: 既存の反転（濃色地×白字）に合わせる＋子がちょんと浮く。
   気質色の髪（ひとふでの筆）は同色の反転背景に溶けるため（分析家・番人は同一色）、
   ホバー時だけ和紙色のふち（drop-shadow）で輪郭を起こして境目を作る。SVGの色は不変更。 */
#types .tcell:hover .tc-name{color:#fff}
#types .tc-chara{transition:transform .18s var(--ease),filter .18s var(--ease)}
#types .tcell:hover .tc-chara{
  transform:translateY(-2px);
  filter:drop-shadow(0 0 1px #FBF7EE) drop-shadow(0 0 1px #FBF7EE) drop-shadow(0 2px 3px rgba(43,40,34,.22));
}

/* EN表示: 呼び名は日本語のみ（EN呼び名は未決定。決まり次第この行を外し i18n 辞書へ） */
html[data-lang="en"] #types .tc-name{display:none}

/* ---------- アイドルモーション（呼吸・まばたき・小物） ----------
   原本『Wa 16タイプ キャラクター v3 - 全16体.html』と同値。 */
#types .tc-chara .wa2-char,
#types .tc-chara .wa2-shadow,
#types .tc-chara .wa2-eyes,
#types .tc-chara .wa2-hand,
#types .tc-chara .wa2-spark,
#types .tc-chara .wa2-float{transform-box:fill-box;transform-origin:center}
#types .tc-chara .wa2-hand{transform-origin:center bottom}

@media (prefers-reduced-motion: no-preference){
  #types .tc-chara .wa2-char{animation:walp-bob 4.2s ease-in-out infinite;animation-delay:var(--wd,0s)}
  #types .tc-chara .wa2-shadow{animation:walp-shadow 4.2s ease-in-out infinite;animation-delay:var(--wd,0s)}
  #types .tc-chara .wa2-eyes{animation:walp-blink 6.4s ease-in-out infinite;animation-delay:var(--wb,0s)}
  #types .tc-chara .wa2-hand{animation:walp-sway 5.6s ease-in-out infinite;animation-delay:var(--wp,0s)}
  #types .tc-chara .wa2-spark{animation:walp-twinkle 3.4s ease-in-out infinite;animation-delay:var(--wp,0s)}
  #types .tc-chara .wa2-float{animation:walp-float 4.8s ease-in-out infinite;animation-delay:var(--wp,0s)}
}

/* LPのTweaks「motion: calm」時は停止（reduced-motionと同扱い） */
[data-motion="calm"] #types .tc-chara .wa2-char,
[data-motion="calm"] #types .tc-chara .wa2-shadow,
[data-motion="calm"] #types .tc-chara .wa2-eyes,
[data-motion="calm"] #types .tc-chara .wa2-hand,
[data-motion="calm"] #types .tc-chara .wa2-spark,
[data-motion="calm"] #types .tc-chara .wa2-float{animation:none!important}

@keyframes walp-bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2.2px) scale(1.01)}}
@keyframes walp-shadow{0%,100%{transform:scaleX(1);opacity:.12}50%{transform:scaleX(.88);opacity:.08}}
@keyframes walp-blink{0%,92%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.1)}}
@keyframes walp-sway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
@keyframes walp-twinkle{0%,100%{transform:scale(.86);opacity:.6}50%{transform:scale(1.06);opacity:1}}
@keyframes walp-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(5deg)}}