/* === puchi-splash v1 === さいしょの 2秒：produced by プチハウス（スキル puchi-splash の snippet.html と同じ見た目）
   このアプリは CSP（style-src 'self'）でインラインの style と外部フォントが止まるので、外のファイルにした。
   Fredoka は読みこまない（端末の丸ゴシックで出る） */
#phSplash{position:fixed;inset:0;z-index:1000;background:#fff8ea;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  animation:phSplashOut .4s ease-in 2s forwards;overflow:hidden;font-family:'Fredoka','Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif}
#phSplash.skip{display:none}
@keyframes phSplashOut{to{opacity:0;visibility:hidden}}
#phSplash .pb{font-weight:700;font-size:38px;color:#e8434a;letter-spacing:.04em;display:flex;text-shadow:0 3px 0 #ffd9d9;line-height:1}
#phSplash .pb span{display:inline-block;animation:phJump .55s cubic-bezier(.3,1.6,.5,1) both}
#phSplash .pb i{width:.35em}
#phSplash .pb span:nth-child(1){animation-delay:.05s;color:#e8434a}#phSplash .pb span:nth-child(2){animation-delay:.1s;color:#2f8fd6}#phSplash .pb span:nth-child(3){animation-delay:.15s;color:#e5c200}
#phSplash .pb span:nth-child(4){animation-delay:.2s;color:#8ccf3a}#phSplash .pb span:nth-child(5){animation-delay:.25s;color:#f19ad0}#phSplash .pb span:nth-child(6){animation-delay:.3s;color:#e8434a}
#phSplash .pb span:nth-child(7){animation-delay:.35s;color:#2f8fd6}#phSplash .pb span:nth-child(8){animation-delay:.4s;color:#e5c200}
#phSplash .pb span:nth-child(10){animation-delay:.5s;color:#8ccf3a}#phSplash .pb span:nth-child(11){animation-delay:.55s;color:#f19ad0}
@keyframes phJump{0%{transform:translateY(60px) scale(.3) rotate(-15deg);opacity:0}60%{transform:translateY(-14px) scale(1.15) rotate(6deg);opacity:1}100%{transform:none;opacity:1}}
#phSplash .plogo{width:min(74vw,320px);height:auto;animation:phLogoPop .6s cubic-bezier(.3,1.7,.5,1) .75s both,phLogoWig 1.2s ease-in-out 1.35s infinite}
@keyframes phLogoPop{0%{transform:scale(0) rotate(-10deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes phLogoWig{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(2deg) scale(1.04)}}
#phSplash .spark{position:absolute;font-size:34px;color:#ffc93c;animation:phSpark .9s ease-out 1s both;left:18%;top:36%}
#phSplash .spark.s2{left:78%;top:30%;animation-delay:1.15s;font-size:26px}
#phSplash .spark.s3{left:64%;top:62%;animation-delay:1.3s;font-size:22px;color:#f19ad0}
@keyframes phSpark{0%{transform:scale(0) rotate(0);opacity:0}40%{transform:scale(1.3) rotate(90deg);opacity:1}100%{transform:scale(.6) rotate(180deg);opacity:0}}
@media (prefers-reduced-motion:reduce){#phSplash *{animation-duration:.01s!important}}
/* === /puchi-splash === */