/* エムロン本体（LP v8 main.css の canonical を移植・2026-09-26） */
/* ================= 本物のエムロン（canonical: dome_glass_v8 + growth_v1 + mouth v7.3） ================= */
.char{
  position:relative;display:flex;flex-direction:column;align-items:center;
  --w:142px;--h:calc(var(--w)*0.82);
  --na:rgba(0,200,180,.5);--nb:rgba(120,225,255,.5);--nc:rgba(175,255,240,.35);
  --pool:rgba(175,255,240,.8);--deepA:rgba(60,140,170,.3);--deep:rgba(30,90,140,.55);
  --glow:rgba(70,220,200,.6);
  --sat:1;
}
.char .mist{
  position:absolute;left:50%;top:40%;
  width:calc(var(--w)*1.9);height:calc(var(--w)*1.3);
  transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse 46% 38% at 36% 58%, rgba(78,212,184,.22), rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 40% 34% at 66% 40%, rgba(167,147,232,.2), rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 34% 30% at 54% 66%, rgba(243,154,180,.16), rgba(0,0,0,0) 70%);
  filter:blur(6px);
  animation:mistb 5.5s ease-in-out infinite;
  z-index:0;pointer-events:none;
}
@keyframes mistb{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(.98)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.char .ground{
  position:absolute;bottom:calc(var(--w)*-.08);left:50%;transform:translateX(-50%);
  width:70%;height:calc(var(--w)*.09);border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(70,58,120,.18), rgba(70,58,120,0) 70%);
  animation:gshadow 3.6s ease-in-out infinite;
  z-index:0;
}
@keyframes gshadow{0%,100%{transform:translateX(-50%) scaleX(1)}25%{transform:translateX(-50%) scaleX(1.05)}50%{transform:translateX(-50%) scaleX(.96)}}
.rig{position:relative;width:var(--w);height:var(--h);transform-origin:50% 100%;z-index:1}
.char .body{
  position:absolute;inset:0;
  border-radius:50% 50% 48% 48% / 58% 58% 44% 44%;
  transform-origin:50% 100%;
  animation:jelly 3.6s ease-in-out infinite;
  box-shadow:0 0 12px -2px var(--glow), 0 0 30px -7px rgba(150,130,240,.35);
  filter:saturate(var(--sat));
  z-index:2;
}
@keyframes jelly{
  0%,100%{transform:scale(1,1)}
  25%{transform:scale(1.045,.955)}
  55%{transform:scale(.965,1.04)}
  78%{transform:scale(1.02,.985)}
}
.char .fill,.char .rim{position:absolute;inset:0;border-radius:inherit}
.char .fill{
  overflow:hidden;
  background:
    radial-gradient(circle at 33% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.28) 11%, rgba(255,255,255,0) 28%),
    radial-gradient(circle at 50% 96%, var(--pool) 0%, rgba(255,255,255,0) 44%),
    radial-gradient(circle at 30% 66%, var(--na) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(circle at 72% 38%, var(--nb) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.1) 0%, var(--deepA) 48%, var(--deep) 100%);
}
.char .fill::before{
  content:"";position:absolute;inset:-22%;border-radius:50%;
  background:conic-gradient(from 0deg, var(--na), var(--nb), var(--nc), rgba(255,182,214,.16), var(--na));
  filter:blur(11px);animation:neb 18s linear infinite;
}
@keyframes neb{to{transform:rotate(360deg)}}
.char .fill::after{
  content:"";position:absolute;left:16%;right:16%;bottom:2%;height:26%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 62%, rgba(255,255,255,.7), var(--pool) 55%, rgba(0,0,0,0) 78%);
  filter:blur(2px);
}
.char .rim{
  padding:1px;
  background:linear-gradient(160deg, rgba(255,255,255,.75), rgba(150,130,220,.25) 45%, rgba(80,60,170,.4) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask-composite:exclude;
}
.char .mien{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:4;transform:translateY(calc(var(--h)*.13));
}
.char .eyerow{display:flex;gap:calc(var(--w)*.10)}
.char .eye{
  position:relative;
  width:calc(var(--w)*.22);height:calc(var(--w)*.24);
  animation:blink 4.8s infinite;transform-origin:center;
}
.char .eye .white{
  position:absolute;inset:0;background:#fff;border-radius:50%;
  box-shadow:0 1px 2px rgba(40,30,90,.1);overflow:hidden;
}
@keyframes blink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
.char .pupil{
  position:absolute;left:50%;top:50%;
  width:60%;height:58%;
  background:#1d1a30;border-radius:50%;
  transform:translate(-50%,-50%) translateX(var(--px,0));
}
.char .pupil::after{
  content:"";position:absolute;left:20%;top:14%;
  width:36%;height:32%;border-radius:50%;
  background:rgba(255,255,255,.95);
}
.char .eye:first-child .pupil{--px:5%}
.char .eye:last-child .pupil{--px:-5%}
/* 2026-09-25：アプリ FLCompanion.tsx と顔の位置を揃える（mouthwrap 高さ w×.16・口は w×.015 上。これで目の上端が体高比 .37 になり実機と一致） */.char .mouthwrap{margin-top:calc(var(--w)*.02);display:flex;justify-content:center;align-items:center;height:calc(var(--w)*.16)}.char .mouthwrap .mouth-d{position:relative;top:calc(var(--w)*-.015)}
.char .mouth-d{
  width:calc(var(--w)*.07);height:calc(var(--w)*.07);
  background:#14111c;border-radius:1.5px;
  transform:rotate(45deg);
  animation:mouthblink 5.6s ease-in-out infinite;
}
@keyframes mouthblink{
  0%,88%,100%{transform:rotate(45deg) scale(1,1)}
  90%{transform:rotate(45deg) scale(1.25,.15)}
  93%{transform:rotate(45deg) scale(.95,1.08)}
}
.spks{position:absolute;inset:0;z-index:3;pointer-events:none}
.spk{position:absolute;width:var(--s);height:var(--s);max-width:9px;max-height:9px;background:var(--sc);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  filter:drop-shadow(0 0 2.5px var(--sg)) drop-shadow(0 0 5px var(--sg));
  animation:twinkle var(--tspd,2.8s) ease-in-out infinite var(--tdel,0s)}
@keyframes twinkle{
  0%,100%{opacity:.2;transform:scale(.55) rotate(0deg)}
  50%{opacity:1;transform:scale(1.1) rotate(22deg)}
}
.spk.sc{--sc:#4ed4b8;--sg:rgba(78,212,184,.75)}
.spk.sp{--sc:#a793e8;--sg:rgba(167,147,232,.75)}
.spk.sf{--sc:#f39ab4;--sg:rgba(243,154,180,.7)}
/* 糖質（ティール）：左クラスタ */
.spk.k1{left:-22%;top:2%;--s:calc(var(--w)*.11)}
.spk.k2{left:-12%;top:30%;--s:calc(var(--w)*.07);--tdel:.6s;--tspd:3.4s}
.spk.k3{left:-25%;top:46%;--s:calc(var(--w)*.05);--tdel:1.1s;--tspd:2.4s}
/* タンパク質（紫）：右下クラスタ */
.spk.k4{left:97%;top:34%;--s:calc(var(--w)*.10);--tdel:.3s}
.spk.k5{left:100%;top:58%;--s:calc(var(--w)*.06);--tdel:.9s;--tspd:3.2s}
.spk.k6{left:82%;top:74%;--s:calc(var(--w)*.045);--tdel:1.4s;--tspd:2.5s}
/* 脂質（ピンク）：右上クラスタ */
.spk.k7{left:68%;top:-16%;--s:calc(var(--w)*.09);--tdel:.5s}
.spk.k8{left:88%;top:-2%;--s:calc(var(--w)*.06);--tdel:1.2s;--tspd:3.6s}
.spk.k9{left:52%;top:-22%;--s:calc(var(--w)*.045);--tdel:1.7s;--tspd:2.6s}

@keyframes twinkle{
  0%,100%{opacity:.2;transform:scale(.55) rotate(0deg)}
  50%{opacity:1;transform:scale(1.1) rotate(22deg)}
}
.char.e-turq{--na:rgba(0,200,180,.5);--nb:rgba(120,225,255,.5);--pool:rgba(175,255,240,.8);--deep:rgba(30,110,140,.5);--glow:rgba(120,235,215,.55);--nc:rgba(255,255,255,.3);--deepA:rgba(255,255,255,.08)}
.char.e-coral{--na:rgba(255,150,140,.5);--nb:rgba(255,200,160,.5);--pool:rgba(255,225,210,.8);--deep:rgba(200,90,95,.45);--glow:rgba(255,170,150,.5);--nc:rgba(255,255,255,.3);--deepA:rgba(255,255,255,.08)}
.char.e-lav{--na:rgba(170,150,240,.5);--nb:rgba(210,180,255,.5);--pool:rgba(230,215,255,.8);--deep:rgba(105,80,180,.45);--glow:rgba(190,165,250,.5);--nc:rgba(255,255,255,.3);--deepA:rgba(255,255,255,.08)}
.char.e-leaf{--na:rgba(130,210,140,.5);--nb:rgba(200,240,160,.5);--pool:rgba(220,245,205,.8);--deep:rgba(60,135,90,.45);--glow:rgba(150,225,155,.5);--nc:rgba(255,255,255,.3);--deepA:rgba(255,255,255,.08)}
.char.e-honey{--na:rgba(255,200,110,.5);--nb:rgba(255,230,160,.5);--pool:rgba(255,240,205,.8);--deep:rgba(200,130,55,.45);--glow:rgba(255,215,130,.5);--nc:rgba(255,255,255,.3);--deepA:rgba(255,255,255,.08)}
.char.e-sakura{--na:rgba(255,175,200,.5);--nb:rgba(255,215,230,.55);--pool:rgba(255,230,240,.8);--deep:rgba(205,105,145,.45);--glow:rgba(255,190,212,.55);--nc:rgba(255,255,255,.3);--deepA:rgba(255,255,255,.08)}
.char.e-soda{--na:rgba(130,190,255,.5);--nb:rgba(180,225,255,.55);--pool:rgba(215,238,255,.8);--deep:rgba(70,120,195,.45);--glow:rgba(160,205,255,.5);--nc:rgba(255,255,255,.3);--deepA:rgba(255,255,255,.08)}
.char.e-chai{--na:rgba(220,185,150,.5);--nb:rgba(240,215,185,.55);--pool:rgba(245,228,205,.8);--deep:rgba(155,110,75,.45);--glow:rgba(230,200,165,.5);--nc:rgba(255,255,255,.3);--deepA:rgba(255,255,255,.08)}
.char.e-mist{--na:rgba(185,200,210,.45);--nb:rgba(215,228,235,.5);--pool:rgba(230,238,243,.8);--deep:rgba(125,145,160,.42);--glow:rgba(200,215,225,.5);--nc:rgba(255,255,255,.3);--deepA:rgba(255,255,255,.08)}
.char.e-plum{--na:rgba(200,140,180,.5);--nb:rgba(230,180,215,.5);--pool:rgba(240,215,232,.8);--deep:rgba(140,75,125,.45);--glow:rgba(215,155,195,.5);--nc:rgba(255,255,255,.3);--deepA:rgba(255,255,255,.08)}
/* ---- guide 拡張 ---- */
.char.mini .mist{display:none}
.char.mini .body{box-shadow:0 0 8px -2px var(--glow),0 0 16px -6px rgba(150,130,240,.22)}
.char.sleepy .eye{animation:none;transform:scaleY(.18)}
.char.sleepy .body{filter:saturate(.55)}
.char.still .body,.char.still .eye,.char.still .mouth-d,.char.still .fill::before,.char.still .ground{animation:none}
@media(prefers-reduced-motion:reduce){.char .body,.char .eye,.char .mouth-d,.char .fill::before,.char .ground,.char .mist,.spk{animation:none!important}}