/* 宿主头像：霓虹线描胸像，112×112。颜色只取 tokens.css（rgba 为同色透明度变体）；动效只用 CSS，JS 只换 class。 */
.host { --hc: var(--line-2); width: 112px; height: 112px; }
.host svg { display: block; width: 112px; height: 112px; overflow: visible; filter: drop-shadow(0 0 1.6px rgba(220,230,240,0.35)); }
.host .p { display: none; }
.host .p.on { display: inline; }

/* 底盘与描边 */
.host .disc { fill: rgba(10,15,23,0.92); }
.host .ring { fill: none; stroke: var(--hc); stroke-width: 1.5; transition: stroke 0.2s; }
.host .ring-g { fill: none; stroke: var(--hc); stroke-width: 7; opacity: 0.14; transition: stroke 0.2s; }
.host .sk { fill: var(--panel); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.host .hr { fill: var(--line); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.host .cl { fill: var(--panel-2); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.host .ln { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.host .ln.thin { stroke-width: 1.1; }
.host .ln.dim { stroke: var(--dim); stroke-width: 1.2; }
.host .ln.eye { stroke-width: 2.1; }
.host .ln.brow { stroke-width: 1.9; }
.host .collar { fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; }
.host .shine { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; opacity: 0.75; }
.host .arm-o { fill: none; stroke: var(--ink); stroke-width: 11.5; stroke-linecap: round; }
.host .arm-i { fill: none; stroke: var(--panel-2); stroke-width: 8; stroke-linecap: round; }

/* 眼、嘴、脸色 */
.host .ew { fill: var(--bg); stroke: var(--ink); stroke-width: 1.4; }
.host .ei { fill: var(--teal); }
.host .ep { fill: var(--bg); }
.host .eh { fill: var(--ink); }
.host .lid { fill: var(--panel); }
.host .tint-r { fill: rgba(255,92,122,0.2); }
.host .tint-p { fill: rgba(180,140,255,0.12); }
.host .gl { fill: none; stroke: var(--violet); stroke-width: 1.3; stroke-linecap: round; opacity: 0.75; }
.host.f-diarrhea .gl { stroke: var(--cyan); }
.host .bl { fill: rgba(255,92,122,0.45); }
.host .bl.hot { fill: rgba(255,92,122,0.7); }
.host .hatch { fill: none; stroke: var(--coral); stroke-width: 1; stroke-linecap: round; }
.host .mo { fill: var(--bg); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.host .tongue { fill: var(--coral); }
.host .teeth { fill: var(--ink); stroke: var(--ink); stroke-width: 1.2; }
.host .gap { fill: none; stroke: var(--bg); stroke-width: 0.9; }
.host .drop { fill: rgba(53,208,255,0.25); stroke: var(--cyan); stroke-width: 1.3; stroke-linejoin: round; }

/* 特效：假发光 = 同色粗描边低透明度，不用 SVG filter */
.host .st-a { fill: var(--amber); stroke: rgba(255,179,71,0.35); stroke-width: 3; stroke-linejoin: round; }
.host .st-t { fill: var(--teal); stroke: rgba(46,230,166,0.35); stroke-width: 3; stroke-linejoin: round; }
.host .st-c { fill: var(--ink); stroke: rgba(255,92,122,0.6); stroke-width: 3; stroke-linejoin: round; }
.host .burn { fill: rgba(255,61,138,0.18); }
.host .flame { fill: rgba(255,61,138,0.28); stroke: var(--mag); stroke-width: 1.7; stroke-linejoin: round; }
.host .core { fill: var(--mag); }
.host .gas { fill: rgba(140,255,107,0.18); stroke: var(--lime); stroke-width: 1.6; stroke-linejoin: round; }
.host .stink { fill: none; stroke: var(--violet); stroke-width: 1.4; stroke-linecap: round; }
.host .poot { fill: none; stroke: var(--lime); stroke-width: 1.6; stroke-linecap: round; }
.host .rum { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; }
.host .thr { fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; }
.host .pow { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; }
.host .gh { fill: rgba(53,208,255,0.16); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }

/* 环色：反应的语义色 */
.host.f-c1 { --hc: rgba(255,92,122,0.6); }
.host.f-c0, .host.f-reflux { --hc: var(--mag); }
.host.f-gas { --hc: var(--lime); }
.host.f-diarrhea, .host.f-skill { --hc: var(--cyan); }
.host.f-sugar-crash { --hc: var(--amber); }
.host.f-toothache, .host.f-hurt { --hc: var(--coral); }
.host.f-yum { --hc: var(--teal); }
.host.f-victory { --hc: var(--gold); }
.host.f-defeat { --hc: var(--dim-2); }

/* 动画枢轴 */
.host .rig, .host .head { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.4s ease-out; }
.host .blink, .host .pp, .host .sp, .host .orb, .host .fl, .host .cloud, .host .puff, .host .drip, .host .throb, .host .spk, .host .soul, .host .hit, .host .jit, .host .shake, .host .power, .host .rumble { transform-box: fill-box; transform-origin: 50% 50%; }
.host .fl { transform-origin: 50% 100%; }

/* 常态：呼吸、眨眼 */
.host .rig { animation: h-breathe 3.2s ease-in-out infinite; }
.host .blink { animation: h-blink 4.4s infinite; }
.host.f-c1 .rig { animation-duration: 1.6s; }
.host [data-p="sweat"] { animation: h-drip 2.4s ease-in infinite; }
.host.f-c0 .rig { animation: none; transform: translateY(3px); }
.host.f-c0 .head { transform: rotate(9deg) translateY(2px); }

/* 反应 */
.host.f-reflux .head { animation: h-tremble 0.09s linear infinite alternate; }
.host.f-reflux .fl { animation: h-flick 0.22s ease-in-out infinite alternate; }
.host.f-reflux .f1 { animation-delay: -0.1s; }
.host.f-reflux .f2 { animation-delay: -0.17s; }
.host.f-reflux .burn { animation: h-pulse 0.5s ease-in-out infinite alternate; }

.host.f-gas .rig { animation: h-hop 0.4s ease-out; }
.host.f-gas .cloud { animation: h-cloud 1.8s ease-out both; }
.host.f-gas .puff { animation: h-puff 0.9s ease-out both; }
.host.f-gas .poot { animation: h-fade 0.5s ease-out both; }

.host.f-diarrhea .rig { animation: h-shake 0.14s linear infinite; }
.host.f-diarrhea .drip { animation: h-drip 0.9s ease-in infinite; }
.host.f-diarrhea .d2 { animation-delay: -0.4s; }
.host.f-diarrhea .d3 { animation-delay: -0.7s; }
.host.f-diarrhea .rumble { animation: h-pulse 0.25s ease-in-out infinite alternate; }
.host.f-diarrhea .jit { animation: h-jit 0.1s linear infinite alternate; }

.host.f-sugar-crash .head { animation: h-dizzy 2s ease-in-out both; }
.host.f-sugar-crash .sp { animation: h-spin 0.8s linear infinite; }
.host.f-sugar-crash .orb { animation: h-orbit 1.2s linear infinite; }
.host.f-sugar-crash .o1 { animation-delay: -0.4s; }
.host.f-sugar-crash .o2 { animation-delay: -0.8s; }

.host.f-toothache .throb { animation: h-throb 0.4s ease-in-out infinite alternate; }
.host.f-toothache .head { animation: h-wince 1.6s ease-in-out both; }

.host.f-yum .rig { animation: h-yum 0.6s ease-out; }
.host.f-yum .spk { animation: h-twinkle 0.6s ease-out both; }
.host.f-yum .s2 { animation-delay: 0.1s; }

.host.f-leak .head { animation: h-no 0.6s ease-in-out; }
.host.f-leak .pp { transform: translateX(1.3px); }

.host.f-skill .rig { animation: h-power 0.8s ease-out; }
.host.f-skill .shake { animation: h-shake 0.1s linear 6; }
.host.f-skill .power { animation: h-burst 0.8s ease-out both; }

.host.f-hurt .rig { animation: h-knock 0.6s ease-out; }
.host.f-hurt .hit { animation: h-burst 0.5s ease-out both; }

.host.f-victory .rig { animation: h-bounce 0.9s ease-in-out infinite; }
.host.f-victory .spk { animation: h-twinkle 1.4s ease-in-out infinite; }
.host.f-victory .s1 { animation-delay: -0.35s; }
.host.f-victory .s2 { animation-delay: -0.7s; }
.host.f-victory .s3 { animation-delay: -1.05s; }

.host.f-defeat .rig { animation: none; transform: translateY(2px); }
.host.f-defeat .head { transform: rotate(-10deg) translateY(2px); }
.host.f-defeat .soul { animation: h-soul-in 0.8s ease-out both, h-float 2.4s ease-in-out 0.8s infinite alternate; }

@keyframes h-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(0.8px); } }
@keyframes h-blink { 0%,93%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes h-drip { 0% { transform: translateY(-1px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(5px); opacity: 0; } }
@keyframes h-tremble { from { transform: translateX(-0.5px); } to { transform: translateX(0.5px); } }
@keyframes h-flick { from { transform: scale(0.9, 0.82); } to { transform: scale(1.05, 1.15); } }
@keyframes h-pulse { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes h-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-4px) scaleY(1.03); } 100% { transform: translateY(0); } }
@keyframes h-cloud { 0% { transform: translate(-10px, 12px) scale(0.2); opacity: 0; } 15% { opacity: 1; } 30% { transform: translate(-3px, 4px) scale(0.85); } 75% { opacity: 0.95; } 100% { transform: translate(4px, -10px) scale(1.25); opacity: 0; } }
@keyframes h-puff { 0% { transform: scale(0.3); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-4px, -2px) scale(1.2); opacity: 0; } }
@keyframes h-fade { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes h-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes h-jit { from { transform: translate(-0.4px, 0); } to { transform: translate(0.4px, 0.3px); } }
@keyframes h-dizzy { 0% { transform: rotate(0); } 20% { transform: rotate(-17deg); } 45% { transform: rotate(-11deg); } 70% { transform: rotate(-16deg); } 100% { transform: rotate(-13deg); } }
@keyframes h-spin { to { transform: rotate(360deg); } }
@keyframes h-orbit {
  0%    { transform: translate(18px, 0) scale(1); opacity: 1; }
  12.5% { transform: translate(12.7px, 3.5px) scale(1.12); }
  25%   { transform: translate(0, 5px) scale(1.2); opacity: 1; }
  37.5% { transform: translate(-12.7px, 3.5px) scale(1.12); }
  50%   { transform: translate(-18px, 0) scale(1); }
  62.5% { transform: translate(-12.7px, -3.5px) scale(0.85); }
  75%   { transform: translate(0, -5px) scale(0.75); opacity: 0.5; }
  87.5% { transform: translate(12.7px, -3.5px) scale(0.85); }
  100%  { transform: translate(18px, 0) scale(1); opacity: 1; }
}
@keyframes h-throb { from { transform: scale(0.8); opacity: 0.5; } to { transform: scale(1.12); opacity: 1; } }
@keyframes h-wince { 0% { transform: rotate(0); } 15%,85% { transform: rotate(5deg); } 100% { transform: rotate(0); } }
@keyframes h-yum { 0% { transform: scale(1); } 30% { transform: scale(1.04, 0.96); } 60% { transform: translateY(-3px) scale(0.98, 1.03); } 100% { transform: scale(1); } }
@keyframes h-twinkle { 0%,100% { transform: scale(0) rotate(0); opacity: 0; } 40% { transform: scale(1.1) rotate(20deg); opacity: 1; } 70% { transform: scale(0.9) rotate(35deg); opacity: 1; } }
@keyframes h-no { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); } }
@keyframes h-power { 0% { transform: scale(1); } 20% { transform: scale(1.06); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes h-burst { 0% { transform: scale(0.3); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes h-knock { 0% { transform: none; } 12% { transform: translate(-4px, 1px) rotate(-6deg); } 35% { transform: translate(3px, 0) rotate(3deg); } 60% { transform: translate(-1.5px, 0) rotate(-1.5deg); } 100% { transform: none; } }
@keyframes h-bounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-4px); } 60% { transform: translateY(-3.5px); } }
@keyframes h-soul-in { 0% { transform: translate(-14px, 12px) scale(0.2); opacity: 0; } 100% { transform: none; opacity: 0.85; } }
@keyframes h-float { from { transform: translateY(0); opacity: 0.85; } to { transform: translateY(-4px); opacity: 0.55; } }