/* ----------------------------- */
/* 勝敗カウンター部分           */
/* ----------------------------- */
#scoreboard {
  background-color: #00ff00; /* OBS用クロマキー用緑 */
  color: black;
  font-size: 2.5rem;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* 通常画面用勝敗カウンターの背景は白にしたい場合は別ID/クラスを作成して調整可能 */

/* ----------------------------- */
/* ボタン行                       */
/* ----------------------------- */
#button-row {
  text-align: center;
  margin: 20px 0;
}

#button-row button {
  font-size: 2rem;
  padding: 10px 12px;
  margin: 10px;
  background-color: white;
  border: 2px solid #888;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s;
}

#button-row button:hover {
  background-color: #eee;
}

/* ----------------------------- */
/* メッセージボックス             */
/* ----------------------------- */
#message-box {
  text-align: center;
  color: white;
  background-color: red;
  padding: 10px 20px;
  margin: 10px auto;
  border-radius: 5px;
  font-size: 1.2rem;
  max-width: 400px;
  transition: opacity 0.3s;
}

/* ----------------------------- */
/* 出力・インポートボタン         */
/* ----------------------------- */
#export-buttons {
  text-align: center;
  margin: 20px 0;
}

#export-buttons button,
#import-file,
.import-label {
  font-size: 1.2rem;
  padding: 8px 16px;
  margin: 5px;
  background-color: white;
  border: 2px solid #888;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s;
}

#export-buttons button:hover,
.import-label:hover {
  background-color: #eee;
}

.import-label {
  display: inline-block;
}

/* ----------------------------- */
/* マップ・ジョブ画像             */
/* ----------------------------- */
#map-container, #job-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

#map-container div, #job-container div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

#map-container img {
  width: 200px;
  margin: 5px;
  cursor: pointer;
}

#job-container img {
  width: 50px;
  margin: 5px;
  cursor: pointer;
}

.selectable {
  border: 2px solid transparent;
  transition: 0.2s;
}

.selectable:hover { border-color: #888; }

.selected {
  border-color: #007bff;
  box-shadow: 0 0 8px #007bff;
}

/* ----------------------------- */
/* ログウィンドウ                 */
/* ----------------------------- */
#log-table-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 420px;
  max-height: 400px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

#log-toggle {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 0.8rem;
  border-radius: 3px;
}

#log-scroll {
  overflow-y: auto;
  flex-grow: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 6px;
  text-align: center;
  font-size: 0.9rem;
}

th {
  background-color: #eee;
}

#log-table-container.minimized #log-scroll { display: none; }

/* ----------------------------- */
/* チャート                       */
/* ----------------------------- */
#charts-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

#charts-container canvas {
  width: 70% !important;
  max-width: 800px;
  height: 50% !important;
}

/* ----------------------------- */
/* フッター                       */
/* ----------------------------- */
footer {
  margin-top: 40px;
  text-align: center;
}

footer img {
  display: block;
  margin: 0 auto 10px auto;
}

footer .trademark-text,
footer .copyright {
  display: block;
  margin-top: 5px;
}

/* ----------------------------- */
/* OBS用ウィンドウの勝敗カウンター */
/* ----------------------------- */
.obs-scoreboard {
  background-color: #00ff00; /* クロマキー用緑 */
  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}
.obs-scoreboard div {
  margin: 4px 0;
}