/* 履歴画面 */

body * div {
  /*border: 0px solid red;*/
}

#history-screen {
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  height: 100dvh; /* ← vhではなくdvh (ダイナミックビューポート) を使う */
}

#analysis-modal{
  position: absolute;  /* 固定位置に配置 */
  overflow: visible;
  display: flex;
  flex-direction: column;
  z-index: 2;
  gap: 0rem;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 83%;
    /*max-height: 330px;*/

  transform: translate(-50%, -50%);
  background: linear-gradient(to bottom, rgba(45, 48, 48, 0.9), rgba(5, 6, 7, 0.8));
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}
.modal-content {
  height: 100%;      /* ← ここで制御！ */
}
#analysisModalClose {
  padding: 6px 16px;
  margin-top: 12px;
  border: none;
  border-radius: 6px;
  background: #444;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
  align-items: center;
  text-align: center;
  width: 100%;
}

#analysisModalClose:hover {
  background: #666;
}




#history-wrapper{
  position: absolute;  /* 固定位置に配置 */
  overflow: visible;
  display: flex;
  flex-direction: column;
  z-index: 2;
  gap: 0rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 85%;
  height: 90%;

  border-radius: 10px;/*角丸*/
  padding: 0px 30px 18px 30px ;

  background: linear-gradient(to bottom, rgba(174, 230, 250, 0.9), rgba(8, 159, 246, 0.2));
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);

  /*font-size: 3vw;*/
  color: black;
}

#history-wrapper h2{
  font-family: 'Arial', sans-serif; /* 視覚的に目を引くフォント */
  font-size: 1.8vw; /* 大きめの文字 */
  font-weight: bold; /* 太字にして目立たせる */
  color: #ffffff; /* 白色で明瞭に */
  background: linear-gradient(to right, #7faaff, #225588); /* グラデーション背景 */
  padding-top: 2vh ; /* 内側の余白を調整 */
  padding-bottom: 2vh ; /* 内側の余白を調整 */
  border-radius: 10px; /* 角を丸くして柔らかさを追加 */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 軽いシャドウで立体感 */
  display: inline-block; /* インライン表示で親要素に合わせる */
  margin-bottom: 2vh; /* 下部に余白を追加 */
}


#history-list {
  max-height: 100%;
  overflow-y: auto;
  margin-top: 1vh;
  margin-bottom: 10px;
}


.history-entry {
  margin-bottom: 10px;
  padding: 10px;
  background: #f5f5ff;
  border-left: 5px solid #88c;
  border-radius: 10px;
}


#history-item-head{
  display: flex;
  flex-direction: row;
  gap: 0px;
  width: 100%;
  font-size: 2.5vw;
  padding: 0px 0px 10px 0px;
  font-family: 'Orbitron', sans-serif;
}

#history-item-no{
  flex: 1.5;
  display: flex;
  justify-content: center;
  font-size: 1.8vw;
  padding-left: 0px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  align-items: flex-end;
  text-shadow: 1px 2px 3px #808080;
}
#history-item-stage{
  flex: 3;
  display: flex;
  font-size: 1.7vw;
  font-weight: bold;
  color: rgb(49, 20, 239);
  align-items: flex-end;
  justify-content: center;
  text-shadow: 1px 2px 3px #808080;
}
#history-item-date{
  flex: 5;
  display: flex;
  font-size: 1.6vw;
  color: rgb(115, 6, 178);
  align-items: flex-end;
  justify-content: right;
  text-shadow: 1px 2px 3px #808080;
}


#history-item-body{
  display: flex;
  flex-direction: row;
  gap: 0px;
  width: 100%;
  font-size: 2.5vw;

  padding: 0px 0px 10px 0px;
  margin: 0px 0px 0px 0px;
}

#history-item-score{
  flex: 2;
  display: flex;
  font-size: 1.7vw;
  color: rgb(0, 0, 0);
  align-items: flex-end;
  justify-content: center;
  text-shadow: 1px 2px 3px #808080;
}
#history-item-paire{
  flex: 1;
  display: flex;
  font-size: 1.7vw;
  color: rgb(0, 0, 0);
  align-items: flex-end;
  justify-content: center;
  text-shadow: 1px 2px 3px #808080;
}
#history-item-miss{
  flex: 1;
  display: flex;
  font-size: 1.7vw;
  color: rgb(255, 14, 14);
  align-items: flex-end;
  justify-content: center;
  text-shadow: 1px 2px 3px #808080;
}
#history-item-Time{
  flex: 1;
  display: flex;
  font-size: 1.7vw;
  color: rgb(0, 0, 0);
  align-items: flex-end;
  justify-content: center;
  text-shadow: 1px 2px 3px #808080;
}
#history-item-Graph{
  flex: 0.5;
  display: flex;
  font-size: 2.8vw;
  color: rgb(0, 0, 0);
  align-items: flex-end;
  justify-content: center;
  text-shadow: 1px 2px 3px #808080;
  /*width: 10px;*/
}
#history-item-graph-button{
  font-size: 1.8vw;
}


.history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.history-table th:first-child {
  border-radius: 5px 0 0 0;
}

.history-table th:last-child {
  border-radius: 0 5px 0 0;
  border-right: 0px solid #3c6690;
}

/* ステージ・カードスコア・タイムスコア・ミスカウント・ランク */
.history-table th {
  text-align: center;
  color: #f8f8f8; /* より明るい文字色 */
  background: linear-gradient(#7aa7c8, #4b6d93);
  border-left: 1px solid #4b6d93;
  border-top: 1px solid #4b6d93;
  border-bottom: 1px solid #4b6d93;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2) inset; /* ソフトなシャドウ */
  padding: 10px 0;
  font-size: 1.4vw; /* 少し小さめに */
}

.history-table td {
  text-align: center;
  border-left: 1px solid #a8b7c5;
  border-bottom: 1px solid #a8b7c5;
  border-top: none;
  box-shadow: 0px -3px 4px 1px #eee inset; /* ソフトシャドウ */
  padding: 0px; /* 余計なパディングを削除 */
  margin: 0; /* 余計なマージンを削除 */
  box-sizing: border-box;
}

.history-table td:last-child {
  border-right: 1px solid #a8b7c5;
}

/* 最後の行のボーダーラウンド */
.history-table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}

.history-table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}

/* 行ごとのホバー効果 */
.history-table tr:hover {
  background-color: #f9f9f9; /* 明るいグレーでハイライト */
  cursor: pointer;
}

/* 行を交互に色付け */
.history-table tr:nth-child(even) {
  background-color: #f2f2f2; /* 明るいグレーの交互背景 */
}

/* ランクのアイコンサイズ調整 */
.history-table td img {
  width: 5vw; /* アイコンが大きすぎないように調整 */
  height: auto;
}


#history-item-table-rank{
  width: 70px;
}



.scrollable {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 10px;
}

.stage-log summary {
  font-weight: bold;
  cursor: pointer;
  margin-top: 12px;
}



details {
  background: #fdfdfd;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px 0px 10px  0px;
  margin:  0px 0px 0px 0px;
  margin-bottom: 0px;
  transition: all 0.3s ease;
  color: rgb(25, 0, 117);
  text-shadow: 1px 2px 3px #808080;
}

summary {
  font-weight: bold;
  cursor: pointer;

}

details[open] {
  background: #f0f8ff;

}
.stage-log {
  margin: 5px 5px, 0,0;
  padding: 8px 0px 8px 0px;
  line-height: 1;
}

.stage-log summary {
  display: block;
  margin: 0;
  padding: 0;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.5vw;
}

#score-chart {
  width: 100%;
  height: 300px;
}



/* 最下部のボタン */
#history-button-box {
  display: flex; /* 横並びにする */
  gap: 10px; /* ボタン間の間隔を設定 */
}
#history-back, #history-reset {
  display: flex;
  font-size: 1.5vw;
  border: none; /* 枠線を消す */
  cursor: pointer; /* カーソルをポインタに変更 */
  justify-content: center;
  align-items: center;
  margin-top: 0.2vw;
  padding: 0.2vw 0.2vw 0.4vw 0.2vw;
  border: none;
  border-radius: 10px;
  color: white; /* 文字色 */
  font-weight: 600;
}
#history-back{
    width: 85%;
    background-image: linear-gradient(0deg, #2589d0 0%, #2589d080 50%);
}

#history-reset {
  width: 15%;
  background-image: linear-gradient(0deg, #af3722 0%, #f87b68 50%);
}