@charset "utf-8";

/* カスタムフォント */
@font-face {
  font-family: 'A_KSO_Kokuryu';
  src: url('assets/fonts/A_KsoKokuryu.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hiragino_Maru_Gothic';
  src: url('assets/fonts/ヒラギノ丸ゴ ProN W4.ttc') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hiragino_Mincho';
  src: url('assets/fonts/ヒラギノ明朝 ProN.ttc') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ryumin';
  src: url('assets/fonts/AP-OTF-RyuminKO+ProN-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* カラーパレット / 変数（ポップでキュートなピンク基調） */
:root{
  --bg-pink-light:#ffe5f0;
  --bg-pink-mid:#ffcce0;
  --bg-pink-dark:#ff99c8;
  --accent-pink:#ff1493;
  --accent-coral:#ff6b9d;
  --text-window-pink:#ff4d94;
  --text-window-border:#ffd700;
  --text-light:#fff;
  --text-dark:#4a0e29;
  --shadow-pink:rgba(255, 20, 147, 0.3);
  --safe-bottom:160px;
}

/* ユーティリティ */
.hidden{display:none !important}

/* ベース */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Noto Sans JP',system-ui,Arial,sans-serif;background:linear-gradient(135deg,var(--bg-pink-light) 0%,var(--bg-pink-mid) 50%,var(--bg-pink-dark) 100%);color:var(--text-dark);overflow-x:hidden}
#app{min-height:100vh;position:relative;overflow:hidden}

/* キラキラ背景エフェクト */
body::before {
  content: '✨💕✨';
  position: fixed;
  top: 10%;
  left: 5%;
  font-size: 40px;
  opacity: 0.3;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
}

body::after {
  content: '💕✨💕';
  position: fixed;
  bottom: 15%;
  right: 8%;
  font-size: 35px;
  opacity: 0.3;
  animation: float 7s ease-in-out infinite 1s;
  pointer-events: none;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

/* 上部エリア: 文字は常に中央に表示 */
.top-area{height:100vh;display:flex;align-items:center;justify-content:center;pointer-events:none;position:fixed;inset:0;z-index:299}
.love-zone{position:relative;pointer-events:none;z-index:300;display:flex;align-items:center;justify-content:center;width:auto;filter:drop-shadow(0 8px 16px var(--shadow-pink));margin-top:-15vh}
#love-wrap{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;transition:all .45s cubic-bezier(.2,.9,.2,1);will-change:transform,filter}

/* へのへのもへじの行 */
.face-row{display:flex;gap:15px;align-items:center;justify-content:center}
.face-top{gap:80px}
.face-middle{gap:80px;margin:0}
.face-middle2{margin:0}
.face-bottom{justify-content:center}

.love-letter{font-size:85px;line-height:1;color:var(--accent-pink);font-family:'Noto Sans JP', sans-serif;font-weight:900;pointer-events:none;transition:all .8s cubic-bezier(.34,1.56,.64,1);display:inline-block;will-change:font-family,transform,font-weight,letter-spacing,-webkit-text-stroke;letter-spacing:0.05em;text-shadow:0 4px 12px var(--shadow-pink)}
.katakana{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:64px;font-family:'Noto Serif JP',serif;color:#fff;opacity:0;transition:opacity .36s;white-space:nowrap}

/* 立ち絵らしいゆるい呼吸アニメ */
.love-zone{animation:none}

/* フェーズごとの粘土変形（JSで class 切替） */
.phase0 .love-letter{filter:none;transform:none;letter-spacing:0}
.phase1 .love-letter{filter:blur(.6px) saturate(1.03);transform:skewX(-6deg) scaleY(.985);letter-spacing:0.02em}
.phase2 .love-letter{filter:blur(1.2px);transform:rotate(-2deg) skewY(6deg) scale(1.02);letter-spacing:0.04em}
.phase3 .love-letter{filter:blur(2.2px) hue-rotate(6deg);transform:scale(.96) skewX(10deg);opacity:.94}
.phase4 .love-letter{filter:none;transform:translateY(-8px) scale(1.04);letter-spacing:0}

/* 光るフラッシュ（選択時） */
.flash .love-letter{filter:brightness(1.5) saturate(1.4) drop-shadow(0 0 30px var(--accent-coral));transform:translateY(-8px) scale(1.08)}

/* 下部ウィンドウ: ポップなギャルゲー風（画面中央下部に固定） */
.text-window{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);z-index:140;display:flex;justify-content:center;padding:24px 16px;pointer-events:auto;width:100%;max-width:1100px}
.window-inner{width:100%;background:linear-gradient(135deg,var(--text-window-pink) 0%,var(--accent-coral) 100%);border:6px solid var(--text-window-border);border-radius:24px;padding:20px 28px;color:var(--text-light);box-shadow:0 12px 40px rgba(255,20,147,0.4), 0 0 0 3px rgba(255,255,255,0.6) inset;position:relative}

/* キラキラ装飾 */
.window-inner::before{
  content:'💕';
  position:absolute;
  top:-15px;
  left:20px;
  font-size:32px;
  animation:sparkle 2s ease-in-out infinite;
}

.window-inner::after{
  content:'✨';
  position:absolute;
  top:-12px;
  right:20px;
  font-size:28px;
  animation:sparkle 2s ease-in-out infinite 0.5s;
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.3) rotate(15deg); opacity: 0.7; }
}

.dialogue{min-height:52px;font-size:20px;line-height:1.6;font-family:'Noto Sans JP',sans-serif;text-align:center;font-weight:600;text-shadow:0 2px 8px rgba(74,14,41,0.3)}
.options{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.btn{padding:12px 24px;border-radius:30px;border:none;cursor:pointer;background:#fff;color:var(--accent-pink);font-weight:700;font-size:16px;box-shadow:0 4px 12px rgba(255,20,147,0.2);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);border:3px solid var(--accent-pink)}
.btn:hover{background:var(--bg-pink-light);transform:translateY(-3px) scale(1.05);box-shadow:0 8px 20px rgba(255,20,147,0.4)}
.btn:active{transform:translateY(-1px) scale(1.02)}
.btn.primary{background:linear-gradient(135deg,var(--accent-pink),var(--accent-coral));color:#fff;border:none;font-size:20px;padding:16px 40px;box-shadow:0 6px 20px rgba(255,20,147,0.5)}
.btn.primary:hover{transform:translateY(-5px) scale(1.08);box-shadow:0 10px 30px rgba(255,20,147,0.6)}

/* 効果ルートのハート */
#effects-root .heart{position:fixed;font-size:32px;opacity:0;transform:translateY(0) scale(0.8);transition:transform .9s ease,opacity .9s;pointer-events:none}
#effects-root .heart.show{opacity:1;transform:translateY(-100px) scale(1.5) rotate(15deg)}

/* 結果オーバーレイ / プロフィール一覧 */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,229,240,0.95),rgba(255,204,224,0.95));z-index:220;backdrop-filter:blur(10px)}
.result-card,.profiles-card{background:linear-gradient(135deg,#fff 0%,#ffe5f0 100%);padding:40px 32px;border-radius:32px;max-width:680px;width:92%;box-shadow:0 12px 40px rgba(255,20,147,0.3);border:4px solid var(--text-window-border);position:relative}

/* キラキラデコレーション */
.result-card::before{
  content:'💕';
  position:absolute;
  top:-20px;
  left:50%;
  transform:translateX(-50%);
  font-size:48px;
  animation:heartBounce 1.5s ease-in-out infinite;
}

@keyframes heartBounce {
  0%, 100% { transform:translateX(-50%) translateY(0) scale(1); }
  50% { transform:translateX(-50%) translateY(-10px) scale(1.2); }
}

.result-love{font-size:88px;text-align:center;margin-bottom:16px;color:var(--accent-pink);text-shadow:0 4px 20px var(--shadow-pink);font-weight:900}
.result-text{text-align:center;font-size:22px;margin-bottom:32px;color:var(--text-dark);font-weight:600}
.result-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* プレビュー/一覧 */
.profiles-preview{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.profile-preview-item{padding:14px 16px;border-radius:20px;background:linear-gradient(135deg,#fff,#ffe5f0);text-align:center;min-width:80px;font-size:14px;box-shadow:0 4px 12px rgba(255,20,147,0.2);border:2px solid var(--accent-coral);transition:all 0.3s}
.profile-preview-item:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 20px rgba(255,20,147,0.4)}
.profiles-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.profile-item{padding:20px 16px;border-radius:24px;background:linear-gradient(135deg,#fff,#ffe5f0);text-align:center;border:3px solid var(--accent-coral);box-shadow:0 6px 16px rgba(255,20,147,0.2);transition:all 0.3s}
.profile-item:hover{transform:translateY(-6px) scale(1.05);box-shadow:0 10px 24px rgba(255,20,147,0.4)}
.profile-sample{font-size:48px;margin-bottom:10px;filter:drop-shadow(0 4px 8px var(--shadow-pink))}
.profile-name{font-weight:700;color:var(--accent-pink);font-size:18px}
.profile-desc{font-size:14px;color:var(--text-dark);margin-top:6px;font-weight:500}

/* レスポンシブ */
@media (max-width:520px){
  .love-letter{font-size:80px}
  .katakana{font-size:36px}
  .window-inner{padding:16px 20px}
  .dialogue{font-size:18px}
  :root{--safe-bottom:180px}
}

/* タイトル画面用（乙女ゲーム風） */
.title-screen{
  background:linear-gradient(135deg,rgba(255,229,240,0.98),rgba(255,204,224,0.98));
  backdrop-filter:blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* タイトル全体のコンテナ（デスクトップサイズ最適化） */
.title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 1200px;
  width: 90%;
  padding: 40px 40px 60px;
  min-height: 100vh;
  box-sizing: border-box;
}

/* タイトルアニメーション全体 */
.title-animation {
  text-align: center;
  animation: titleFadeIn 2s ease-out forwards;
  opacity: 0;
  margin-bottom: 40px;
  flex: 0 0 auto;
}

@keyframes titleFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.title-logo-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

/* ロゴ画像 */
.logo-image {
  width: clamp(400px, 65vw, 1000px);
  max-height: 35vh;
  height: auto;
  display: block;
  margin: 0 auto 40px;
  opacity: 0;
  animation: logoAppear 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter: drop-shadow(0 12px 40px rgba(255, 20, 147, 0.5));
  object-fit: contain;
}

@keyframes logoAppear {
  0% {
    opacity: 0;
    transform: translateY(-80px) scale(0.7) rotate(-5deg);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.1) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* 旧テキストロゴスタイル（非表示） */
.title-main {
  display: none;
}

.title-sub {
  display: none;
}

/* 世界観説明テキスト */
.world-intro {
  margin-top: 30px;
  margin-bottom: 40px;
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  flex: 0 0 auto;
}

.intro-text {
  font-size: clamp(14px, 1.1vw, 18px);
  color: #880e4f;
  line-height: 1.8;
  margin-bottom: 20px;
  font-weight: 500;
  opacity: 0;
  animation: introFadeIn 1.5s ease-out 1.5s forwards;
  text-shadow: 0 2px 8px rgba(136, 14, 79, 0.2);
}

.intro-text.delay-1 {
  animation: introFadeIn 1.5s ease-out 2s forwards;
}

.intro-question {
  font-size: clamp(16px, 1.3vw, 22px);
  color: #ff1493;
  line-height: 1.8;
  margin-top: 24px;
  font-weight: 700;
  opacity: 0;
  animation: introFadeIn 1.5s ease-out 2.5s forwards;
  text-shadow: 0 3px 12px rgba(255, 20, 147, 0.3);
  letter-spacing: 0.05em;
}

.title-intro {
  font-size: clamp(16px, 3.5vw, 24px);
  color: #880e4f;
  line-height: 2;
  margin-bottom: 60px;
  font-weight: 500;
  opacity: 0;
  animation: introFadeIn 1.5s ease-out 1.5s forwards;
  text-shadow: 0 2px 8px rgba(136, 14, 79, 0.2);
}

@keyframes introFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スタートボタンのアニメーション（中央揃え） */
#title-screen .btn.primary {
  opacity: 0;
  animation: buttonFadeIn 1s ease-out 3s forwards;
  position: relative;
  overflow: hidden;
  padding: 18px 50px;
  font-size: 20px;
  margin: 10px auto 0;
  display: block;
  flex: 0 0 auto;
}

@keyframes buttonFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#title-screen .btn.primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s;
}

#title-screen .btn.primary:hover::before {
  transform: translateX(100%);
}

.title-card{background:linear-gradient(135deg,#fff 0%,#ffe5f0 100%);padding:48px 36px;text-align:center;color:var(--text-dark);max-width:600px;width:92%;border-radius:40px;box-shadow:0 16px 48px rgba(255,20,147,0.4);border:6px solid var(--text-window-border);position:relative}

/* タイトルのキラキラ装飾 */
.title-card::before{
  content:'💕✨💕';
  position:absolute;
  top:-25px;
  left:50%;
  transform:translateX(-50%);
  font-size:40px;
  animation:titleSparkle 2s ease-in-out infinite;
}

@keyframes titleSparkle {
  0%, 100% { transform:translateX(-50%) scale(1); opacity:1; }
  50% { transform:translateX(-50%) scale(1.2); opacity:0.8; }
}

.game-title{font-family:'Noto Sans JP',sans-serif;font-size:48px;margin:0 0 12px 0;font-weight:900;color:var(--accent-pink);text-shadow:0 4px 16px var(--shadow-pink)}
.game-sub{margin:0 0 32px 0;font-size:18px;color:var(--text-dark);font-weight:600}
.title-screen .btn.primary{padding:12px 24px;font-size:16px}

/* タイトルのアニメーションスタイル */
@keyframes titleAnimation {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

h1 {
    animation: titleAnimation 1s ease-in-out;
}

@media (max-width:520px){
  .game-title{font-size:34px}
  .title-card{padding:24px 20px}
  .btn.primary{font-size:18px;padding:14px 32px}
}

/* ロゴ画像（中央タイトル）用の小さな調整 */
.title-card .title-logo{display:block;margin:0 auto 20px;max-width:80%;height:auto;animation:titleAnimation 1s ease-in-out;filter:drop-shadow(0 8px 16px var(--shadow-pink))}