/* ===============================
   ORA Quest : Title Screen CSS
   対象:
   - #ora-title（タイトル画面全体）
   - ロゴ / サブタイトル
   - メニュー（New Game / Continue / Option）
   設計方針:
   - UIサイズ基準: rem
   - 画面占有: vw / vh
   - 演出: px 最小限
=============================== */

/* ---------- ルート基準 ---------- */
html {
  font-size: 16px; /* Steam / itch.io / Web 共通で安定 */
}


/* ---------- タイトルロゴ ---------- */
.title-logo {
  position: relative;

  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  width: min(50rem, 90vw);
  aspect-ratio: 5 / 2;

  background-image: url("/wp-content/themes/cocoon-child-master/ORA-Quest/assets/images/ui/title-2.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 2;
  pointer-events: none;

  filter:
    saturate(0.7)
    hue-rotate(-30deg)
    brightness(1.1)
    drop-shadow(0 0 15px rgba(140, 200, 255, 0.8))
    drop-shadow(0 0 35px rgba(100, 180, 255, 0.5))
    drop-shadow(0 0 60px rgba(80, 160, 255, 0.3));

  animation: logoGlowCool 5s ease-in-out infinite alternate;
}

/* 横向きスマホ */
@media (orientation: landscape) and (max-width: 1024px) {
  .title-logo {
    top: 0.5rem;
    width: min(40rem, 60vw);
  }
}


/* ---------- タイトル画面全体 ---------- */
#ora-title {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding-top: 0rem;

  overflow: hidden;
}

#title-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  z-index: 0;      /* 背景にする */
  pointer-events: none;
}


/* ---------- 中央コンテンツ ---------- */
#ora-title > :not(.title-logo):not(#title-video):not(#ora-title-menu) {
  position: relative;
  z-index: 1;
}


/* ---------- サブタイトル ---------- */
.subtitle-text {
  margin-top: 1.5rem;
  
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  color: rgba(220, 235, 255, 0.9);
  text-align: center;

  text-shadow:
    0 0 8px rgba(160, 200, 255, 0.6),
    0 0 16px rgba(120, 170, 255, 0.4);

  animation: subtitleFade 4s ease-in-out infinite alternate;

    font-family:
    "Noto Serif JP",
    "Source Serif 4",
    "Times New Roman",
    serif;
}

@keyframes subtitleFade {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}

/* ---------- メニューコンテナ ---------- */
#ora-title-menu {
  position: absolute;

  bottom: 4rem;
  left: 0;
  right: 0;

  margin-left: auto;
  margin-right: auto;

  width: min(90vw, 40rem);

  display: flex;
  flex-direction: column;
  align-items: center;   /* ←中央配置 */
  gap: 1rem;

  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* 横向きスマホ */
@media (orientation: landscape) and (max-width: 1024px) {

  #ora-title-menu {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    bottom: 1.5rem;
  }

}



/* ---------- メニューボタン ---------- */
#ora-title-menu button {
  width: min(16rem, 80vw);  /* ←スマホでも中央に収まる */

  font-size: 1.1rem;
  letter-spacing: 0.12em;

  padding: 0.75rem 1.5rem;

  background: rgba(20, 40, 70, 0.65);
  color: rgba(230, 245, 255, 0.95);

  border: 1px solid rgba(160, 200, 255, 0.4);
  border-radius: 0.2rem;

  cursor: pointer;

  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.15s ease;

  font-family:
    "Cinzel",
    "Noto Serif",
    serif;
}

/* 横向きスマホはボタン幅を狭く */
@media (orientation: landscape) and (max-width: 1024px) {

  #ora-title-menu button {
    width: min(12rem, 45vw);
  }

}

/* iPad 縦 */
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1024px) {

  #ora-title-menu button {
    width: min(25rem, 65vw);
    font-size: 2rem;
    padding: 1rem 2rem;
  }

}

#ora-title-menu button:hover {
  background: rgba(40, 80, 140, 0.85);
  box-shadow:
    0 0 12px rgba(180, 220, 255, 0.8);
  transform: translateY(-1px);
}

#ora-title-menu button:active {
  transform: translateY(0);
  box-shadow:
    0 0 6px rgba(140, 190, 255, 0.6);
}




/* ---------- ニューゲーム警告モーダル ---------- */
#modal-overlay {
  position: fixed;
  z-index: 100;
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 99;

  justify-content: center;
  align-items: center;
}

/* タイトル用モーダル */
#modal-overlay .gate-modal-content {
  background: rgba(10, 20, 40, 0.92);
  color: #eaf4ff;

  padding: 2rem;
  border-radius: 0.4rem;

  width: min(90vw, 40rem);
  min-height: auto;

  font-size: 1.1rem;
}


/* ===============================
   モーダル選択ボタン
=============================== */

.modal-buttons{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin-top:2rem;
}

/* 共通 */
.modal-buttons button{

  padding:1rem 3rem;
  font-size:1.5rem;
  letter-spacing:0.08em;
  font-weight:600;

  background:rgba(10,15,25,0.95);
  color:#eaf4ff;

  border:2px solid rgba(160,200,255,0.6);
  border-radius:5px;

  font-family:
  "Cinzel",
  "Noto Serif",
  serif;

  cursor:pointer;

  text-shadow:
    0 0 6px rgba(180,220,255,0.9);

  box-shadow:
    0 0 10px rgba(120,160,255,0.6),
    inset 0 0 6px rgba(120,160,255,0.3);

  transition:
    transform .15s,
    box-shadow .2s,
    background .2s;
}

/* hover */
.modal-buttons button:hover{

  transform:translateY(-2px);

  box-shadow:
    0 0 14px rgba(160,200,255,0.9),
    inset 0 0 8px rgba(160,200,255,0.5);

  background:rgba(20,30,60,0.95);
}


/* ===== いいえ ===== */

.modal-buttons button[data-modal-btn="1"]{

  border-color:rgba(120,180,255,0.9);
}


/* ===== はい（危険） ===== */

.modal-buttons button[data-modal-btn="0"]{

  font-size:1.6rem;
  letter-spacing:0.12em;

  background:linear-gradient(
    180deg,
    #2b0000,
    #120000
  );

  color:#ffb3b3;

  border:2px solid #ff3a3a;

  text-shadow:
    0 0 8px rgba(255,80,80,0.9),
    0 0 16px rgba(255,0,0,0.8);

  box-shadow:
    0 0 12px rgba(255,0,0,0.6),
    inset 0 0 10px rgba(255,0,0,0.6);

  animation: dangerPulse 2s infinite;
}

/* はい hover */

.modal-buttons button[data-modal-btn="0"]:hover{

  transform:scale(1.1);

  background:linear-gradient(
    180deg,
    #420000,
    #1a0000
  );

  color:#ffffff;

  box-shadow:
    0 0 20px rgba(255,0,0,1),
    0 0 40px rgba(255,0,0,0.8),
    inset 0 0 20px rgba(255,0,0,0.8);

  animation: dangerShake 0.25s infinite;
}


/* 危険な鼓動 */
@keyframes dangerPulse{

  0%{
    box-shadow:
      0 0 8px rgba(255,0,0,0.5),
      inset 0 0 6px rgba(255,0,0,0.5);
  }

  50%{
    box-shadow:
      0 0 18px rgba(255,0,0,0.9),
      inset 0 0 12px rgba(255,0,0,0.8);
  }

  100%{
    box-shadow:
      0 0 8px rgba(255,0,0,0.5),
      inset 0 0 6px rgba(255,0,0,0.5);
  }

}

/* 不穏な揺れ */
@keyframes dangerShake{

  0%{transform:translateX(0);}
  25%{transform:translateX(-2px);}
  50%{transform:translateX(2px);}
  75%{transform:translateX(-2px);}
  100%{transform:translateX(0);}
}