/* 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-clip:text に対応しないブラウザでは color の文字色にフォールバックする。 */
  color: #eaf7ff;
  background: linear-gradient(160deg, #ffffff 0%, #7ff0ff 32%, #38a8ff 66%, #7b8cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 影は黒一色だと沈むので、輪郭を締める薄い黒＋シアンのグローの2枚重ねにする。
     text-shadowはグラデの背後に回り込んで濁るため、要素ごとかけるfilterで出す。 */
  filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 22px rgba(90, 210, 255, 0.6));
}

/* ロゴは top.js が1文字ずつ <span> に割る。各文字を個別にポップさせるため inline-block にし、
   グラデ文字は文字単位で載せ替える（1文字ごとの発色を優先。全体連続グラデよりポップ感を取る）。
   animation-delay は top.js が文字ごとに段階付けする。backwards で発火前は0%の状態（＝不可視）を
   保持し、「一瞬ドンと出てから animation が始まる」チラつきを防ぐ。 */
.title-logo span {
  display: inline-block;
  background: linear-gradient(160deg, #ffffff 0%, #7ff0ff 32%, #38a8ff 66%, #7b8cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
/* 下からせり上がりつつ、一度大きく跳ねてから収まるポップ。cubic-bezier の跳ね返りと合わせて弾む。 */
@keyframes title-pop {
  0%   { opacity: 0; transform: translateY(0.5em) scale(0.4); }
  60%  { opacity: 1; transform: translateY(-0.08em) scale(1.12); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── デッキ割り当て ────────────────────────────────────────────────── */
/* メニューと同じ幅に揃え、ラベル＋セレクタを1行ずつ縦に積む。
   主動線（対戦する／デッキ構築）より目立たせないため、枠も背景も持たせない。 */
.title-decks {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vh, 10px);
  width: min(80vw, 320px);
}
.title-deck-row {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.title-deck-label {
  flex: 0 0 auto;
  font-size: clamp(12px, 2vw, 15px);
  opacity: 0.9;
}
/* 12枚に満たないデッキ（対戦に使えない）は薄暗くして選べないと分かるようにする。
   選択自体は option の disabled が禁止しているので、ここは見た目だけ。 */
.title-deck-select option.deck-option-unready {
  color: rgba(255, 255, 255, 0.35);
}

.title-deck-select {
  flex: 1 1 auto;
  min-width: 0;                   /* 長いデッキ名でも親幅を押し広げない */
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.55);
  color: var(--text-light);
  font-size: clamp(12px, 2vw, 15px);
}
/* ロゴ直下のサブタイトル。上は負のマージンで .title-screen の gap を打ち消してロゴへ密着させ、
   下は正のマージンを足してメニューから引き離す（ロゴ＋サブタイトルで1つの塊に見せる）。 */
.title-sub {
  margin: clamp(-40px, -4.5vh, -20px) 0 clamp(4px, 1.2vh, 12px);
  font-size: clamp(13px, 2.4vw, 20px);
  opacity: 0.85;
  /* ロゴが出そろった後に続けてふわっと現れる。delay は top.js が付ける。 */
  animation: title-sub-in 0.5s ease backwards;
}
@keyframes title-sub-in {
  0%   { opacity: 0; transform: translateY(0.4em); }
  100% { opacity: 0.85; transform: translateY(0); }
}

.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;
}