/* --- 1. サイト全体の初期設定 --- */
html,
body {
  background-color: #000 !important;
  margin: 0;
}

body.splash-active > *:not(.splash) {
  display: none; /* 完全に非表示にしてスクロールも防止 */
}

/* --- 2. 表示・非表示の切り替え --- */

/* 【修正ポイント】クッキーがある時だけコンテンツを出し、スプラッシュを消す */
.is-entered .header,
.is-entered #totop {
  display: block !important; /* クッキーがあれば表示 */
}
.is-entered .splash {
  display: none !important; /* クッキーがあれば非表示 */
}

/* 【重要】初期状態（クラスがない時）の設定 */
/* ヘッダーなどは最初から隠しておく */
html:not(.is-entered) .header,
html:not(.is-entered) #totop {
  display: none;
}

/* スプラッシュは最初から絶対に出す */
.splash {
  display: flex !important; /* ここを強制表示にする */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-color: #000;
  z-index: 2147483647;
  justify-content: center;
  align-items: center;
}

.splash-inner {
  text-align: center;
  color: #fff;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 40px 30px; /* 上下の余白をしっかり取る */
  border-radius: 10px;
}

.splash-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

.splash-message {
  text-align: center;
  margin-bottom: 20px;
}

.splash-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

#enter-btn,
#exit-btn {
  padding: 12px 35px;
  border-radius: 30px; /* 丸みをもたせて柔らかい印象に */
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease; /* 変化をふわっとさせる */
  text-decoration: none;
  display: inline-block;
  border: 2px solid transparent;
}

/* 入室ボタン：メインカラー */
#enter-btn {
  background: #ff6600; /* ここを好きな色に（例：推しカラー） */
  color: #fff;
}

#enter-btn:hover {
  background: transparent;
  border-color: #ff6600;
  color: #ff6600;
  transform: translateY(-2px); /* 少し上に浮き上がる */
}

/* 退室ボタン：控えめなグレー */
#exit-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
  border-color: #666;
}

#exit-btn:hover {
  background: #444;
  color: #fff;
}