/* ScrambleDeck トップ（タイトル）画面スタイル。
   background の url() は「このCSSファイル(site/css/)」からの相対パスで解決されるため ../../public/ となる
   （battle.css と同じ基準）。 */

:root {
  --accent: #3aa0ff;          /* 対戦画面の自分側と同じ青をアクセントに使う */
  --text-light: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: url("../../public/images/others/background001.png") center / cover no-repeat;
  font-family: sans-serif;
  color: var(--text-light);
}

/* タイトルとメニューを画面中央に縦積み。画面サイズ非依存に clamp で伸縮させる。 */
.title-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 4vh, 40px);
  padding: clamp(16px, 5vw, 48px);
  text-align: center;
  /* 背景画像の上でも文字が読めるよう、うっすら暗幕を敷く。 */
  background: rgba(0, 0, 0, 0.35);
}

.title-logo {
  margin: 0;
  font-size: clamp(40px, 10vw, 96px);
  font-weight: 900;
  letter-spacing: 0.04em;
  /* 青→白のグラデ文字。対応しないブラウザでは普通の白文字にフォールバック。 */
  background: linear-gradient(180deg, #cfe8ff 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.title-sub {
  margin: 0;
  font-size: clamp(13px, 2.4vw, 20px);
  opacity: 0.85;
}

.title-menu {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vh, 18px);
  width: min(80vw, 320px);
}

/* メニューボタン。<a>だがボタン見た目にする。 */
.title-btn {
  display: block;
  padding: clamp(12px, 2vh, 18px) clamp(16px, 4vw, 28px);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  color: var(--text-light);
  font-size: clamp(16px, 3vw, 22px);
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.12s, background 0.12s, box-shadow 0.12s;
}
.title-btn:hover {
  transform: translateY(-2px);
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* 主要動線（対戦する）は青で強調する。 */
.title-btn-primary {
  border-color: var(--accent);
  background: var(--accent);
}
.title-btn-primary:hover {
  background: #2f8fe6;
}