/* ============================================================
 * title-screen.css  —  QUEST 起動時タイトル画面
 * ------------------------------------------------------------
 * ドラクエ風: 星空にロゴが浮かび「PRESS START」点滅、
 * クリック/キーで開始 → フェードしてHOMEへ。
 * ============================================================ */

/* レトロなピクセルフォント(オンライン時) / 取得失敗時はモノスペースに */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

.qs-title {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 30%, #141833 0%, #0a0c1c 45%, #05060e 100%);
  transition: opacity 0.8s ease;
  user-select: none;
  cursor: pointer;
}
.qs-title.qs-title--out {
  opacity: 0;
  pointer-events: none;
}

/* 星空 */
.qs-title__stars { position: absolute; inset: 0; overflow: hidden; }
.qs-star {
  position: absolute;
  border-radius: 50%;
  background: #cdd6ff;
  opacity: 0.6;
  animation: qsTwinkle 3s ease-in-out infinite;
}

/* ロゴ */
.qs-title__logo {
  width: min(70vw, 360px);
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 0 18px rgba(120, 150, 255, 0.35))
          drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
  opacity: 0;
  transform: scale(0.82) translateY(8px);
  animation: qsLogoIn 1s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.15s forwards;
}
/* 登場後にゆっくり上下に浮遊 */
.qs-title__logo.qs-floating {
  animation: qsFloat 4.5s ease-in-out infinite;
  opacity: 1;
  transform: none;
}

/* サブタイトル */
.qs-title__sub {
  margin-top: 18px;
  font-family: "Rajdhani", sans-serif;
  font-size: clamp(13px, 2.4vw, 18px);
  letter-spacing: 0.35em;
  color: #d8b674;
  text-shadow: 0 0 10px rgba(216, 182, 116, 0.4);
  opacity: 0;
  animation: qsFadeUp 0.8s ease 1s forwards;
}

/* PRESS START */
.qs-title__start {
  margin-top: clamp(28px, 7vh, 64px);
  font-family: "Press Start 2P", "Orbitron", monospace;
  font-size: clamp(11px, 2vw, 16px);
  letter-spacing: 0.1em;
  color: #f5e8b4;
  text-shadow: 0 0 12px rgba(245, 232, 180, 0.5);
  opacity: 0;
  animation: qsFadeUp 0.6s ease 1.4s forwards, qsBlink 1.3s steps(1) 2.2s infinite;
}
.qs-title__hint {
  margin-top: 12px;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #6b7298;
  opacity: 0;
  animation: qsFadeUp 0.6s ease 1.8s forwards;
}

/* サウンド切替ボタン */
.qs-title__mute {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 8px;
  background: rgba(20, 26, 50, 0.7);
  border: 1px solid rgba(120, 140, 200, 0.3);
  color: #cdd6ff;
  cursor: pointer;
  z-index: 2;
  transition: all 0.15s;
}
.qs-title__mute:hover {
  border-color: rgba(120, 140, 200, 0.6);
  background: rgba(30, 38, 70, 0.9);
}

/* アニメーション */
@keyframes qsLogoIn {
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes qsFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes qsFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes qsBlink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}
@keyframes qsTwinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.85; }
}