body {
  background-color: #111;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  user-select: none;
  box-sizing: border-box;
}

/* ⚙ 運行表示設定パネル（上部） */
.config-panel {
  width: 900px;
  background-color: #16181a;
  border: 3px solid #222;
  border-radius: 4px;
  padding: 10px 20px;
  margin-bottom: 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.config-title {
  font-size: 13px;
  font-weight: bold;
  color: #9ab0c5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-badge {
  background-color: #ff7700;
  color: #000;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-weight: bold;
  font-size: 11px;
}

.config-select-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.config-select-label {
  font-size: 12px;
  color: #a0aec0;
  font-weight: bold;
}

.config-select {
  background-color: #050505;
  color: #ff7700;
  border: 1px solid #333;
  padding: 4px 10px;
  font-family: monospace;
  border-radius: 3px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

/* 全体ボード群のラッパー */
.boards-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 900px;
}

.board-container {
  width: 100%;
  background-color: #0c0c0c;
  border: 12px solid #222;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
  padding: 15px;
  box-sizing: border-box;
}

.line-header {
  display: flex;
  align-items: center;
  background-color: #16181a;
  border: 3px solid #000;
  padding: 12px 20px;
  margin-bottom: 12px;
  color: #fff;
}

/* 路線記号（G:緑, R:赤） */
.line-symbol {
  color: #fff;
  font-size: 42px;
  font-weight: bold;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-right: 20px;
  font-family: 'Arial Black', sans-serif;
}

.line-symbol.R { background-color: #e51616; } /* 下り赤 */
.line-symbol.G { background-color: #72ca3a; } /* 上り緑 */

.line-info {
  margin-right: 50px;
}

.line-info .ja {
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 2px;
}

.destination-info .ja {
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 4px;
}

.destination-info .ja span {
  font-size: 28px;
  font-weight: normal;
  margin-left: 5px;
}

.led-display {
  background-color: #050505;
  border: 4px solid #1a1a1a;
  padding: 10px 15px;
  box-sizing: border-box;
  background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.45) 50%);
  background-size: 100% 4px;
}

/* ヘッダーの項目ラベル */
.led-labels {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1.9fr 1.8fr 1fr;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #222;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.led-labels div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 行データ */
.led-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1.9fr 1.8fr 1fr;
  align-items: center;
  height: 62px;
  border-bottom: 1px solid #111;
}

.timetable-rows {
  display: flex;
  flex-direction: column;
  min-height: 124px;
}

.green {
  color: #33ff33;
  text-shadow: 0 0 4px rgba(51, 255, 51, 0.8), 0 0 10px rgba(51, 255, 51, 0.5);
}

.orange {
  color: #ff7700;
  text-shadow: 0 0 4px rgba(255, 119, 0, 0.8), 0 0 10px rgba(255, 119, 0, 0.5);
}

.red {
  color: #ff2222;
  text-shadow: 0 0 4px rgba(255, 34, 34, 0.9), 0 0 10px rgba(255, 34, 34, 0.6);
}

.dim {
  color: #1c130b;
  text-shadow: none;
}

/* 各列のドット調フォントとスタイル調整 */
.col-type, .col-dest {
  font-family: "MS Gothic", "Courier New", monospace;
  font-size: 42px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
}

.col-name {
  font-family: "MS Gothic", "Courier New", monospace;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}

.col-cars {
  font-family: "MS Gothic", sans-serif;
  font-size: 38px;
  font-weight: bold;
  text-align: center;
}

.col-cars .num {
  font-size: 42px;
  margin-right: 2px;
}

.col-time {
  font-family: 'Courier New', Courier, monospace;
  font-size: 46px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1px;
}

.col-track {
  font-family: 'Courier New', Courier, monospace;
  font-size: 46px;
  font-weight: bold;
  text-align: center;
}

.loading-msg {
  grid-column: 1 / -1;
  text-align: center;
  font-family: "MS Gothic", monospace;
  font-size: 26px;
  font-weight: bold;
  line-height: 124px;
}

/* 遅延点滅 */
.blink {
  animation: led-blink 1s steps(2, start) infinite;
}

@keyframes led-blink {
  to {
    visibility: hidden;
  }
}

/* スマートフォン・タブレット向けのレスポンシブ調整 */
@media (max-width: 940px) {
  body {
    padding: 10px;
  }
  .config-panel, .boards-wrapper {
    width: 100%;
  }
  .board-container {
    padding: 8px;
    border-width: 8px;
  }
  .line-header {
    padding: 8px 12px;
  }
  .line-symbol {
    width: 45px;
    height: 45px;
    font-size: 30px;
    margin-right: 12px;
  }
  .line-info .ja { font-size: 24px; }
  .destination-info .ja { font-size: 28px; }
  .destination-info .ja span { font-size: 18px; }

  /* スケール調整 */
  .led-display {
    padding: 5px;
  }
    
  .led-labels {
    font-size: 16px;
    grid-template-columns: 1fr 1.2fr 1.2fr 1.5fr 0.3fr;
  }
  .led-row {
    height: 44px;
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr 1.5fr 0.3fr;
  }

  .col-type, .col-dest { font-size: 24px; }
  .col-name { font-size: 18px; }
  .col-cars { font-size: 22px; }
  .col-cars .num { font-size: 24px; }
  .col-time { font-size: 26px; }
  .col-track { font-size: 26px; }
}