#loading.top-splash {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #ecefff 0%, #dde3ff 60%, #ecefff 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 0 16px;
  z-index: 9999;
}

#loading.top-splash .splash-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
}

#loading.top-splash .splash-text {
  font-family: 'Nico Moji', 'Noto Sans JP', cursive, sans-serif;
  font-size: clamp(16px, 5vw, 44px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #2a3b5b;
  display: flex;
  max-width: 100%;
  white-space: nowrap;
  position: relative;
  will-change: transform;
}

/* 旧: 1文字ずつフェードイン
#loading.top-splash .splash-text .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation-name: chIn, chWave;
  animation-duration: 0.5s, 2.5s;
  animation-timing-function: ease, ease-in-out;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
  animation-delay: calc(var(--i, 0) * 0.04s), calc(0.6s + var(--i, 0) * 0.05s);
  animation-play-state: paused;
  will-change: transform, opacity, filter;
}

html.nico-loaded #loading.top-splash .splash-text .ch {
  animation-play-state: running;
}
@keyframes chIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes chWave {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  50%      { transform: translateY(-5px); opacity: 0.55; }
}
*/

/* === スタイリッシュ・タイプライター ===
   ・全文を最初は薄い「ゴースト」で見せる（::before に data-ch を attr() で複製）
   ・1文字ずつ実色＋ボヤけ消えで定着していく
   ・splash-text を青いビームが左→右にスキャンしてタイプ位置を示唆 */

/* スペース系の前提幅・ベースカラーは先に定義（後段の .ch との順序で意図通りに上書きされるよう注意） */
#loading.top-splash .splash-text .ch-space {
  width: 0.4em;
}

/* 実体の文字: 初期は透明、遅延後に実色に向けてふわっとフェード */
/* 旧: 0.45s / 0.10s step — 文字確定が 2.25s かかり長すぎた
#loading.top-splash .splash-text .ch {
  display: inline-block;
  position: relative;
  color: transparent;
  animation: chSolidify 0.45s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 0.10s);
  animation-play-state: paused;
}
*/
#loading.top-splash .splash-text .ch {
  display: inline-block;
  position: relative;
  color: transparent;
  animation: chSolidify 0.30s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 0.05s);
  animation-play-state: paused;
}
#loading.top-splash .splash-text .ch-initial {
  font-size: 1.08em;
  /* 大文字 (S/M/L) は青色に解決 */
  animation-name: chSolidifyAccent;
}

/* ゴースト: 同じ文字を半透明で先出ししておき、本文字確定時に消す */
/* 旧: 0.45s / 0.10s step — .ch と同じく長すぎたので短縮
#loading.top-splash .splash-text .ch::before {
  content: attr(data-ch);
  position: absolute;
  left: 0;
  top: 0;
  font: inherit;
  letter-spacing: inherit;
  color: rgba(42, 59, 91, 0.16);
  animation: chGhostOut 0.45s cubic-bezier(.4,.6,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 0.10s);
  animation-play-state: paused;
}
*/
#loading.top-splash .splash-text .ch::before {
  content: attr(data-ch);
  position: absolute;
  left: 0;
  top: 0;
  font: inherit;
  letter-spacing: inherit;
  color: rgba(42, 59, 91, 0.16);
  animation: chGhostOut 0.30s cubic-bezier(.4,.6,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 0.05s);
  animation-play-state: paused;
}

/* フォント (Nico Moji) のロード完了でアニメ再開 */
html.nico-loaded #loading.top-splash .splash-text .ch,
html.nico-loaded #loading.top-splash .splash-text .ch::before,
html.nico-loaded #loading.top-splash .splash-text::after {
  animation-play-state: running;
}
#loading.top-splash .splash-text .ch-space::before {
  content: "";
}

@keyframes chSolidify {
  to { color: #2a3b5b; }
}
@keyframes chSolidifyAccent {
  to { color: #1e88e5; text-shadow: 0 0 12px rgba(30, 136, 229, 0.35); }
}
@keyframes chGhostOut {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}

/* タイプ位置を示唆する青いビーム: テキスト左端→右端へ流れる
   楕円形の radial-gradient 2層（コア + 外周の薄いグロー）で上下も自然にフェード。
   GPU 合成のため transform: translate3d で移動。filter / box-shadow / left は使わない。 */
#loading.top-splash .splash-text::after {
  content: "";
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  background:
    /* コア: 細く明るい光芒 */
    radial-gradient(ellipse 2% 70% at 50% 50%,
      rgba(30, 136, 229, 0.95) 0%,
      rgba(30, 136, 229, 0.55) 25%,
      rgba(30, 136, 229, 0.2) 60%,
      rgba(30, 136, 229, 0.05) 85%,
      transparent 100%
    ),
    /* 外周: 広めの淡いグロー */
    radial-gradient(ellipse 8% 50% at 50% 50%,
      rgba(30, 136, 229, 0.18) 0%,
      rgba(30, 136, 229, 0.06) 55%,
      transparent 100%
    );
  pointer-events: none;
  opacity: 0;
  /* 旧: -52%/+52% , duration 2s, opacity 10%-85%
     → 85% 時点で既にフェードアウト中だったため、ビームが文字末端へ到達する前に消えていた。
     translate を ±55% に広げ、不透明区間を 6%–96% に延長して
     ビームが必ず文字の最右端まで到達するように修正。
     duration も 1s に短縮し、文字確定タイミング (i*0.05s + 0.30s = 0.95s で末文字確定) と同期。
  transform: translate3d(-52%, 0, 0);
  animation: beamSweep 2s linear forwards;
  */
  transform: translate3d(-55%, 0, 0);
  /* ビームらしい等倍速度 (linear)。文字活性 (chSolidify 0.05s 間隔 × 19文字 ≒ 0.95s) と同期 */
  animation: beamSweep 1s linear forwards;
  animation-play-state: paused;
  will-change: transform, opacity;
}
/* 旧: 10%/85% で末端到達前に消えていた
@keyframes beamSweep {
  0%   { transform: translate3d(-52%, 0, 0); opacity: 0; }
  10%  { opacity: 0.95; }
  85%  { opacity: 0.95; }
  100% { transform: translate3d(52%, 0, 0); opacity: 0; }
}
*/
@keyframes beamSweep {
  0%   { transform: translate3d(-55%, 0, 0); opacity: 0; }
  6%   { opacity: 0.95; }
  96%  { opacity: 0.95; }
  100% { transform: translate3d(55%, 0, 0); opacity: 0; }
}

#loading.top-splash.absorbing .splash-text {
  animation: textImplode 0.7s cubic-bezier(.55, 0, .7, 1) forwards;
  transform-origin: center center;
}

/* インプロード中は chSolidify を停止しつつ、確定後の色を保持して文字を見せ続ける */
#loading.top-splash.absorbing .splash-text .ch {
  animation: none;
  opacity: 1;
  transform: none;
  color: #2a3b5b;
}
#loading.top-splash.absorbing .splash-text .ch-initial {
  color: #1e88e5;
}
#loading.top-splash.absorbing .splash-text .ch::before {
  animation: none;
  opacity: 0;
}
#loading.top-splash.absorbing .splash-text::after {
  animation: none;
  opacity: 0;
}

@keyframes textImplode {
  0%   { opacity: 1; transform: scale(1);    filter: blur(0); }
  60%  { opacity: 0.9; filter: blur(1px); }
  100% { opacity: 0; transform: scale(0.05); filter: blur(4px); }
}

#loading.top-splash.absorbing .splash-bar {
  animation: barFadeOut 0.3s ease forwards;
}

@keyframes barFadeOut {
  to { opacity: 0; }
}

#app.page-emerge {
  animation: pageEmerge 0.6s cubic-bezier(.2, .7, .3, 1.05) forwards;
}

@keyframes pageEmerge {
  0%   { opacity: 0; clip-path: circle(0% at 50% 50%); }
  60%  { opacity: 1; }
  100% { opacity: 1; clip-path: circle(150% at 50% 50%); }
}

#loading.top-splash .splash-bar {
  position: relative;
  width: 200px;
  height: 3px;
  border-radius: 999px;
  background: rgba(42, 59, 91, 0.1);
  overflow: hidden;
}

#loading.top-splash .splash-bar span {
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #4a6cb5, transparent);
  animation: splashShimmer 1.4s ease-in-out infinite;
}

@keyframes splashShimmer {
  0%   { left: -40%; }
  100% { left: 100%; }
}

#loading.top-splash .splash-hint {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #6b7a99;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

#loading.top-splash .splash-hint.visible {
  opacity: 1;
  pointer-events: auto;
}

#loading.top-splash .splash-hint button {
  padding: 6px 18px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #4a6cb5;
  border-radius: 6px;
  background: #ffffff;
  color: #4a6cb5;
  cursor: pointer;
  transition: background 0.15s ease;
}

#loading.top-splash .splash-hint button:hover {
  background: #f0f4fc;
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out forwards;
}
.fade-out {
  animation: fadeOut 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}