/* 省略: 添付画像を参考に、各要素の配置やデザインを自由に設定してください */
/* --- シナリオ選択ページ用のスタイル --- */
.scenario-select-page {/* ページのBODY */
    background: url('images/bg_index.jpeg') repeat;/*#ffdee9;/*#34c7c7;明るいブルー */
    font-family: sans-serif;
    color: #fff;
    padding: 10px;
}

.logo-area {
    width: 100%;
    max-width: 980px;
    margin: 0 auto 0px auto; // bottom 20px
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px;
    text-align: center;
}

.logo-area img {
    max-width: 100%;
    height: auto;
}

.title-p {/*ロゴ上のタイトル　message id=4 */
	width: 92%;
	margin-left: 35px;
	margin-bottom: -25px;
	font-size: 0.8em;
	text-align: left;
	color: #333;
}

.alart-p {/*注意事項　message id=2 */
	margin-top: -10px;
	font-size: 0.64em;
		color: #777;
}

.msg3 {/*ゲームの簡単な説明　message id=3 */
	margin-top: 0px;
    text-align: center;
	margin-top: 0px;
	font-size: 0.75em;
		color: #333;
}

.page-title {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
}

/*シナリオカード*/
.scenario-container {
		margin-top: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px; /* カード間のスペース */
}

.scenario-card {
    background-color: #fff;
    border: 5px solid #FAACC6;
    border-radius: 13px;
    overflow: hidden;
    width: 45%;/* 280px */
    max-width: 240px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.scenario-card:hover {
    transform: translateY(-5px);
}

.card-thumbnail {
    width: 100%;
    height: 180px;
    background-color: #d3d3d3; /* グレー */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-thumbnail {
    width: 86%;           /* 100px★横幅を180pxに指定 */
    height: auto;          /* 100px★高さを180pxに指定 */
    margin: 10px auto 0;    /* カード内で左右中央に配置 */
    border-radius: 4px;       /* 見た目のため少し角を丸める */
    overflow: hidden;         /* はみ出した画像を完全に隠す */
}

.card-thumbnail img {
    width: 100%;
    height: auto%;
    object-fit: cover;      /* ★アスペクト比を維持し、はみ出した部分を切り取る */
    display: block;
}

.card-body {
    padding: 10px 10px 10px; /* パディングを調整 */
    color: #333;
    text-align: center;       /* テキストも中央揃えにする */
}

.card-title {
   color: #EB5777;
    margin: 0 0 3px 0;
    font-size: 0.91em;
}

.card-description {
    margin: 0;
    font-size: 0.7em;
    color: #777;
    line-height: 1.5;
    text-align: left;
}

/* --- 無効なカード用のスタイル --- */
.scenario-card.inactive-card {
  opacity: 1;
  cursor: not-allowed;
}

.play-label {
  width: 80%;
  display: inline-block;
  margin-top: 10px;
  padding: 2px 10px;
  font-size: 0.7em;
  font-weight: bold;
  color: white;
  background-color: #FF5192; /* ダークピンク */
  border-radius: 7px;
}


.coming-soon-label {
  width: 80%;
  display: inline-block;
  margin-top: 10px;
  padding: 2px 10px;
  font-size: 0.7em;
  font-weight: bold;
  color: white;
  background-color: #FFBEDA; /* ダークピンク */
  border-radius: 7px;
}

/*---  メニュー画面ここまで  ---*/

body { font-family: sans-serif; }
#game-container { position: relative; width: 100%; max-width: 400px; margin: auto; border: 1px solid #ccc; 
max-height: 550px !important; overflow: hidden;}
#background { position: absolute; top: -50px; left: 0; width: 100%; height: calc(100% + 50px); background-size: cover; background-position: center; z-index: -1; transition: background-image 0.5s; }/*top:0px;*/
#game-screen { display: flex; flex-direction: column; height: 550px; }
#game-screen {
    /* ▼ これを以下のように変更または追加してみてください */
    justify-content: flex-start; /* 上詰めにする */
    padding-top: 0px;           /* 上に詰めすぎるので少し余白を入れる（数値は調整してください） */
}

#opponent-area { flex: 0.4; display: flex; justify-content: center; align-items: center; margin-top: 0px;}
#player-area { flex: 1; display: flex; justify-content: center; align-items: center; }


/* ---【追加】シナリオ説明文のスタイル --- */
#scenario-description {
    color: white;
    font-size: 0.9em;
    text-shadow: 1px 1px 3px black; /* 影を付けて読みやすくする */
    margin-top: 20px; /* STARTボタンとの間隔 */
    padding: 0 20px; /* 左右の余白 */
    max-width: 500px; /* 最大幅 */
    text-align: left; /* 中央揃え */
    line-height: 1.5; /* 行間を少し広げる */
}


#message-area { text-align: center; }

#player-hands button {
	padding: 5px;
	margin: 5px;
	cursor: pointer;
	}

#player-hands .hand-btn img {
  width: 60px;  /* ←ここの数値を調整してみてください */
  height: auto; /* 高さは自動で調整されます */
}

#opponent-hand {
	width: 80px;
	height: auto;
	transform: rotate(180deg);
	} /* 相手の手を逆向きに */

#player-hands.disabled { pointer-events: none; opacity: 0.5; }
#countdown { font-size: 2em; color: red;}/*2025/12/07*/

/* 相手の手（上部）のエリア */
#opponent-area {
  flex: 0.8; /* 1.2 */
  display: flex;
  justify-content: center;
  /* ↓ここを調整 */
  align-items: center; /* 上のエリア内で下に寄せる */
  padding-right: 49%;/*相手の手を左側に寄せる*/
  /*padding-top: 20px;*/
  margin-top: 0px;
}

/* プレイヤーの手（下部）のエリア */
#player-area {
  flex: 0.8;/* 1.5 */
  display: flex;
  flex-direction: column; /* 縦並びにするため */
  justify-content: center;
  /* ↓ここを調整 */
  align-items: center; /* 横方向は中央に */
}

/* プレイヤーの手のボタンの親要素 */
#player-hands {
  margin-top: 0px; /* 必要に応じて上の要素との間隔を調整 */
}

/* メッセージエリア */
#message-area {
  text-align: center;
  /* 2行分の高さを最低でも確保する */
  min-height: 2.5em; /* ← この行を追加 3em */
  display: flex; /* ↓ 縦方向も中央揃えにするため */
    flex-direction: column;  /* ★これを追加！縦並びになります */
  justify-content: center; /* ↓ */
  align-items: center; /* ← この3行を追加 */
}

/* カウントダウン */
#countdown {
  font-size: 1.6em;/*2em */
  color: red;
  /* 数字が表示されていなくても高さを確保する */
  text-align: left;
  height: 1.2em; /* ← この行を追加（フォントサイズの少し上） */
    align-items: left; /* ← この3行を追加 */
  margin-top:-30px;/* 0px */
}

#message-text img{
	width: auto;
	height: 2.5em;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px auto;
}

#message-text {
    margin-top: 0; /* h1のデフォルトの上余白を消す 20251207 */
    padding-top: 0;
}

/* メッセージとカウントダウンの文字を見やすくする */

#message-text, #countdown {
  color: #FFF; /* 文字色を白に */
/*  background: rgba(255,255,255,0.3); */
/*  text-shadow:
    -1px -1px 0 #FF1493,
     1px -1px 0 #FF1493,
    -1px  1px 0 #FF1493,
     1px  1px 0 #FF1493; /* 上下左右の4方向に黒い影を1pxずらして縁取りに見せる */
}

#message-text, #countdown {
  color: #FFF; /* 文字色を白に */
  /* WebKit系および主要ブラウザ向け */
  -webkit-text-stroke: 2px #FF1493;
  
  /* 標準プロパティ (将来の互換性のため) */
  text-stroke: 2px #FF1493;

  /* 縁取りが適用されないブラウザのためのフォールバック */
/*  color: white; /* 縁取りがなくても読めるように文字色を指定 */
  -webkit-text-stroke: 8px #FF1493;
  text-stroke: 2px #FF1493;
  paint-order: stroke;
}


img {
  /* 画像のドラッグを禁止 */
  pointer-events: none;

  /* テキスト選択のように画像が選択されるのを禁止 */
  user-select: none;
  -webkit-user-select: none; /* Safari, Chrome用 */
  -moz-user-select: none;    /* Firefox用 */
  -ms-user-select: none;     /* Internet Explorer, Edge用 */
}

/* スタート画面のスタイル */
#start-screen {
  position: fixed; /* 画面全体に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75); /* 半透明の黒い背景 */
  display: flex;
    flex-direction: column; /* ★この行を追加 */
  justify-content: center;
  align-items: center;
  z-index: 100; /* ゲーム画面より手前に表示 */
}

/* STARTボタンのスタイル */
#start-btn {
  background-color: hotpink; /* 背景ピンク */
  color: white;             /* テキスト白 */
  border: 3px solid white;  /* 白いborder */
  border-radius: 15px;      /* 角丸 */
  padding: 15px 40px;
  font-size: 2em;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
}

#start-btn:hover {
  transform: scale(1.05); /* マウスを乗せたら少し拡大 */
}

/* 戻るボタンのスタイル */
.back-btn {
  background-color: #3399FF; /* 背景ピンク */
  color: white;             /* テキスト白 */
  border: 3px solid white;  /* 白いborder */
  border-radius: 15px;      /* 角丸 */
  padding: 10px 25px;
  margin-top: 41px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
  text-decoration: none;
  opacity: 0.55;
}



.hand-btn {
	background: rgba( 0, 191, 255, 0.3);/*#00bfff;*/
	border-radius: 15px;
	border: none;
}

#background {
	background-size: 80%;
	background-repeat: no-repeat;
	
}

/* ---【追加】ここから --- */

/* プレイ確認画面とスタート画面の共通スタイル */
#pre-start-screen,
#start-screen {
  position: fixed; /* 画面全体に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75); /* 半透明の黒い背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100; /* ゲーム画面より手前に表示 */
  color: white;
}

/* スタート画面は最初は非表示にしておく */
#start-screen {
  display: none;
}

#confirm-box p {
  font-size: 1.5em;
  margin-bottom: 25px;
  text-align: center;
  }

/* Yes/Noボタンの共通スタイル */
#confirm-yes-btn, #confirm-no-btn {
  width: 37%;
  background-color: hotpink;
  color: white;
  border: 2px solid white;
  border-radius: 10px;
  padding: 10px 30px;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
  margin: 0 15px;
  transition: transform 0.2s;
}

#confirm-yes-btn:hover, #confirm-no-btn:hover {
  transform: scale(1.05);
}

/* ---【追加】ここまで --- */

#bonus-stage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    
    /* 背景画像用の設定 */
    background-size: cover;
    background-position: center;

    /* 中の要素を中央に配置するための設定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* テキストやボタンを見やすくするための設定 */
    color: white;
    text-shadow: 1px 1px 3px black;
}


/* ---【修正】ボーナスステージのスタイル --- */
#bonus-stage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* 初期状態は非表示 */

    /* 背景画像を少し暗くして文字を読みやすくする */
    background-color: rgba(0, 0, 0, 0.3);

    /* 背景画像用の設定 */
    background-size: cover;
    background-position: center;

    /* 中の要素を中央に配置するための設定 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px; /* 画面端の余白 */
    box-sizing: border-box; /* paddingを含めて100%にする */
}

/* 質問テキストのスタイル */
#bonus-question-text {
    color: white;
    font-size: 1.41em; /* 少し大きく */
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    background-color: rgba(0, 0, 0, 0.23);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 100px;
    width: 90%; /* 横幅を指定 */
    max-width: 500px; /* 最大幅を指定 */
    text-align: center; /* テキストを中央揃えに */
    border: 1px solid rgba(255, 255, 255, 0.5);
     margin-top: 10px !important;
}

/* 回答ボタンのコンテナ */
#answer-buttons {
    display: flex;
    flex-direction: column; /* ボタンを縦に並べる */
    align-items: center;
    width: 100%;
}

/* 回答ボタンのスタイル */
#answer-buttons button {
    background-color: rgba(255, 105, 180, 0.55); /* 少し透明に */
    color: white;
    border: 2px solid white;
    border-radius: 10px;
    padding: 15px; /* 上下の余白を増やす */
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    margin: 8px 0; /* 上下の間隔を調整 */
    width: 80%; /* 横幅を統一 */
    max-width: 400px; /* 最大幅を指定 */
    transition: all 0.2s ease; /* アニメーション効果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* ボタンにマウスを乗せた時のスタイル */
#answer-buttons button:hover {
/*    background-color: rgba(255, 105, 180, 1); /* 色を濃くする */
/*    transform: translateY(-2px); /* 少し上に浮き上がる */
/*    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);*/
}



/* ---【追加】エンディング画面のレイアウト --- */

/* 画面全体のコンテナ */
#ending-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 中のメッセージとボタンを中央に配置 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 背景として表示する画像 */
#ending-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をコンテナいっぱいに表示 */
    z-index: -1; /* 文字やボタンの後ろに配置 */
}

/* メッセージのスタイル */
#ending-message {
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 2px 2px 4px black; /* 文字を読みやすくする影 */
    background-color: rgba(0, 0, 0, 0.25); /* 半透明の背景 */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
}

/* ボタンのスタイル */
#restart-btn {
  background-color: hotpink;
  color: white;
  border: 3px solid white;
  border-radius: 15px;
  padding: 15px 40px;
  font-size: 1.5em;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
}

#restart-btn:hover {
  transform: scale(1.05);
}

/* --- ゲームオーバーダイアログのスタイル --- */
.modal-overlay {
  display: none; /* 普段は隠しておく */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.74);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-overlay.show {
  display: flex; /* このクラスが付いたら表示する */
}

.modal-content {
  margin-top: 48px;
  background-color: rgba(255,255,255,0.99);/*ゲームオーバー時の画面の背景透明度*/
  padding: 30px 40px;
  border-radius: 10px;
  text-align: center;
  color: #333;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.modal-content h2 {
  margin-top: 0;
  color: #dc3545; /* 赤色 */
}

.modal-buttons {
  margin-top: 25px;
  display: flex;
  gap: 15px; /* ボタン間のスペース */
}

.modal-btn {
  padding: 10px 20px;
  font-size: 1em;
  color: white;
  border: 2px solid #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.modal-btn:hover {
  opacity: 0.8;
}

#retry-btn {
  background-color: #FF5192;/*もう一度プレイする＿ピンク色  /緑色 */
}

#back-to-menu-btn {
  background-color: #00bfff; /* メニューに戻る＿水色 */
}

/* ゲームオーバーダイアログのフェードインアニメーション */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-overlay.show {
display: flex;
animation: fadeIn 1.0s ease-in-out forwards; /* アニメーションを適用 */
}

.gameover {
	width: 75%;
	max-width:400px;
}

/* ゲームオーバー時の勝率などの表示 */
.stats-display {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  font-family: monospace;
}
.stats-item {
  text-align: center;
}
.stats-label {
  display: block;
  font-size: 14px;
  color: #333;
}
.stats-value {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}
/* クリア回数の表示、じゃんけん＆BONUS	 */
.stats-item-icon {
  width: 65px;
  height: 45px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
}

/* 5連勝回数の背景画像 */
#streak-5-display {
  background-image: url('images/icon_p1.png');
}

/* ボーナスクリア回数の背景画像 */
#bonus-clear-display {
  background-image: url('images/icon_p2.png');
}

/* アイコン内の数字のスタイル */
.stats-item-icon span {
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}




/* 過去10戦の戦歴アイコンつき */
.history-display {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}
.history-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  height: 32px;
}
.history-row img {
  width: 24px;
  height: 24px;
}
/* 相手の手　*/
#opponent-history img {
  transform: rotate(180deg);
}

#result-history span {
  width: 24px;
  text-align: center;
  font-weight: bold;
}
#result-history .win {
  color: #EB5777;/*#dc3545; /* 赤 */
}
#result-history .loss {
  color: #00BFFF; /* グレー */
}


.link-btn {
  text-align: center;
  margin: 30px 0;
}

.link-btn1 {
  display: inline-block;
  background: #EB5777;/*#FF5192;/* linear-gradient(to right, #f58bb6, #fca2be); /* メインカラー */
  color: #fff;
  padding: 10px 25px;
  font-size: 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 3px 5px rgba(0,0,0,0.2);
  transition: 0.3s;
}

.link-btn1:hover {
  opacity: 0.85;
  transform: scale(1.02);
}

/* ムービーモーダル用（既存のmodal-overlayを流用しつつ、背景は真っ黒に） */
#movie-modal {
    background-color: black !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
#streak-video {
    width: 100%;
    height: auto;
    max-height: 80vh;
}