/* 指令所風モニタ - 共通CSS */
/* 路線固有: --line-color, --line-name-ja-size, --line-name-en-size を各ページで定義 */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@700&family=Noto+Sans+JP:wght@400;700&display=swap');

/* ===================
   リセット・基本スタイル
   =================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #0a0a14;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===================
   1280px以上のレイアウト
   =================== */
@media (min-width: 1281px) {
  .header {
    padding-left: calc((100vw - 1280px) / 2 + 30px);
    padding-right: calc((100vw - 1280px) / 2 + 30px);
  }
  .main {
    max-width: 1280px;
    margin: 0 auto;
  }
  .info-panel {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
  .footer-note {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===================
   ヘッダー
   =================== */
.header {
  background: var(--line-color);
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  position: relative;
}

.line-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-weight: bold;
}

.line-symbol-wrap {
  background: #fff;
  width: 68px;
  height: 68px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.line-symbol {
  color: #000;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  border: 14px solid var(--line-color);
  box-sizing: border-box;
}

.line-name-ja {
  color: #fff;
  font-size: var(--line-name-ja-size, 3.2rem);
  position: relative;
  top: -2px;
}

.line-name-en {
  color: #fff;
  font-size: var(--line-name-en-size, 2rem);
  opacity: 0.9;
  position: relative;
  top: -2px;
}

.clock-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.digital-clock {
  background: #000;
  padding: 12px 10px;
  font-family: 'DSEG7-Classic', 'DSEG7 Classic', monospace;
  font-size: 3.2rem;
  color: #fff;
  letter-spacing: 3px;
  line-height: 1;
  border: none;
}

.header-right {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  display: flex;
  align-items: baseline;
  position: relative;
  top: -2px;
}

.header-right span {
  font-size: 3.8rem;
  color: #fff;
  margin: 0 3px;
}


/* ===================
   メインコンテンツ
   =================== */
.main {
  padding: 0;
  margin-top: -15px;
}

.diagram-section {
  background: #0a0a14;
  margin-bottom: -50px;
}

.diagram-section:last-of-type {
  margin-bottom: 0;
}

.track-svg {
  width: 100%;
  height: 340px;
}

/* ===================
   フッター
   =================== */
.footer-note {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0 8px 16px;
  margin-top: 20px;
  background: #0a0a14;
  color: rgb(132,145,158);
  font-size: 12px;
  line-height: 1.5;
}

.footer-note .disclaimer {
  text-align: right;
}

.footer-note .disclaimer a {
  color: inherit;
}

/* ===================
   路線切り替えナビ
   =================== */
.line-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px 16px;
  background: #0a0a0a;
  border-top: 1px solid #222;
}

.line-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #1a1a24;
  border: 2px solid #333;
  border-radius: 8px;
  text-decoration: none;
  color: #ccc;
  font-size: 1rem;
  font-weight: bold;
  transition: all 0.15s;
}

.line-nav-link:hover {
  background: #252530;
  border-color: #555;
  transform: translateY(-2px);
}

.line-nav-link.current {
  background: var(--line-color);
  border-color: var(--line-color);
  color: #fff;
  cursor: default;
}

.line-nav-link.current:hover {
  transform: none;
}

.line-nav-icon-wrap {
  background: #fff;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.line-nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #000;
  background: #fff;
  box-sizing: border-box;
}

.line-nav-link.ginza .line-nav-icon { border: 6px solid #FF9500; }
.line-nav-link.marunouchi .line-nav-icon { border: 6px solid #F62E36; }
.line-nav-link.tozai .line-nav-icon { border: 6px solid #009BBF; }

@media (max-width: 600px) {
  .line-nav {
    gap: 8px;
    padding: 16px 12px;
  }

  .line-nav-link {
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  .line-nav-icon-wrap {
    width: 32px;
    height: 32px;
  }

  .line-nav-icon {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
    border-width: 5px !important;
  }
}

/* ===================
   コントロールパネル
   =================== */
.info-panel {
  display: flex;
  justify-content: center;
  padding: 16px 8px 14px;
  background: #0a0a0a;
  border-top: 2px solid #333;
  font-size: 0.8rem;
  color: #666;
  align-items: center;
}

.info-panel span {
  color: #fff;
  margin-left: 6px;
}

.time-controls-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  background: linear-gradient(180deg, #5aa8a8 0%, #4a9090 100%);
  padding: 12px 14px;
  border: 3px solid;
  border-color: #7ac8c8 #2a6060 #2a6060 #7ac8c8;
  box-shadow: inset 0 0 0 1px #3a7878;
}

.time-controls-main {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 10px;
}

.time-controls-divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #2a6060, #7ac8c8 50%, #2a6060);
  margin: 0;
}

.time-controls-sub {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 10px;
}

.time-controls-sub .separator {
  width: 2px;
  height: 28px;
  background: linear-gradient(180deg, #2a6060, #7ac8c8);
  margin: 0 6px;
}

.time-group {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
}

.time-group label {
  color: #001a1a;
  font-size: 0.9rem;
  font-weight: bold;
  text-shadow: 1px 1px 0 #7ac8c8;
}

/* ===================
   ボタンスタイル
   =================== */
/* 3Dベベルボタン（非アクティブ/デフォルト状態） */
.time-btn {
  background: linear-gradient(180deg, #f0f0f0 0%, #c8c8c8 50%, #b0b0b0 100%);
  border: 2px solid;
  border-color: #fff #666 #666 #fff;
  color: #000;
  padding: 6px 0;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
  width: 60px;
  height: 36px;
  transition: none;
  box-shadow: 1px 1px 0 #333;
  text-shadow: none;
  box-sizing: border-box;
  text-align: center;
}

.time-btn:hover {
  background: linear-gradient(180deg, #fff 0%, #e0e0e0 50%, #c8c8c8 100%);
  color: #000;
}

/* 押した時（凹む） */
.time-btn:active {
  background: linear-gradient(180deg, #a0a0a0 0%, #b8b8b8 50%, #c8c8c8 100%);
  border-color: #666 #fff #fff #666;
  box-shadow: inset 1px 1px 2px #666;
}

/* 特殊ボタン（始発・終電）- 改行防止 */
.time-btn.special-btn {
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 6px 2px;
}

/* 凹んだ入力フィールド */
.time-controls-sub input[type="time"] {
  background: #001818;
  border: 2px solid;
  border-color: #333 #aaa #aaa #333;
  color: #00ff88;
  padding: 6px 8px;
  font-size: 1rem;
  font-family: 'Noto Sans JP', sans-serif;
  width: 130px;
  height: 36px;
  box-sizing: border-box;
  box-shadow: inset 2px 2px 4px #000;
}

.time-controls-sub input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(90deg);
  cursor: pointer;
}

.time-controls-sub select {
  background: linear-gradient(180deg, #f0f0f0 0%, #c8c8c8 50%, #b0b0b0 100%);
  border: 2px solid;
  border-color: #fff #666 #666 #fff;
  color: #000;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  height: 36px;
  box-shadow: 1px 1px 0 #333;
}

.time-controls-sub select:hover {
  background: linear-gradient(180deg, #fff 0%, #e0e0e0 50%, #c8c8c8 100%);
}

/* 汎用ボタン（設定、現在時刻など） */
.time-controls-wrap button {
  background: linear-gradient(180deg, #f0f0f0 0%, #c8c8c8 50%, #b0b0b0 100%);
  border: 2px solid;
  border-color: #fff #666 #666 #fff;
  color: #000;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
  transition: none;
  height: 36px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 0 #333;
  box-sizing: border-box;
}

.time-controls-wrap button:hover {
  background: linear-gradient(180deg, #fff 0%, #e0e0e0 50%, #c8c8c8 100%);
}

.time-controls-wrap button:active {
  background: linear-gradient(180deg, #a0a0a0 0%, #b8b8b8 50%, #c8c8c8 100%);
  border-color: #666 #fff #fff #666;
  box-shadow: inset 1px 1px 2px #666;
}

/* アクティブ状態（凹んだ緑ボタン） */
.time-controls-wrap button.active {
  background: linear-gradient(180deg, #108050 0%, #20a060 50%, #30b070 100%);
  border-color: #084030 #60e0a0 #60e0a0 #084030;
  color: #fff;
  box-shadow: inset 2px 2px 4px #042020;
  text-shadow: 1px 1px 0 #084030;
}

/* 再生/一時停止ボタン - 緑系 */
.time-controls-main button.play-btn {
  font-size: 1rem;
  padding: 0;
  width: 60px;
  height: 36px;
  text-align: center;
  background: linear-gradient(180deg, #40c080 0%, #20a060 50%, #108050 100%);
  border-color: #60e0a0 #084030 #084030 #60e0a0;
  color: #fff;
  text-shadow: 1px 1px 0 #084030;
}

.time-controls-main button.play-btn:hover {
  background: linear-gradient(180deg, #50e090 0%, #30b070 50%, #20a060 100%);
  color: #fff;
}

.time-controls-main button.play-btn:active,
.time-controls-main button.play-btn.playing {
  background: linear-gradient(180deg, #108050 0%, #20a060 50%, #30b070 100%);
  border-color: #084030 #60e0a0 #60e0a0 #084030;
  box-shadow: inset 2px 2px 4px #042020;
}

/* ===================
   ツールチップ
   =================== */
.tooltip {
  position: fixed;
  background: #1a1a24;
  border: 1.5px solid #666;
  border-radius: 6px;
  padding: 0;
  font-size: 15px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  overflow: hidden;
}

.tooltip.visible { opacity: 1; }

.tooltip h4 {
  color: #fff;
  margin: 0;
  padding: 6px 12px;
  font-size: 16px;
}

.tooltip-body {
  padding: 8px 12px;
}

.tooltip p {
  margin: 3px 0;
  color: #ccc;
  font-size: 15px;
}

/* ===================
   追加UI要素
   =================== */
.speed-display {
  color: #001a1a;
  min-width: 45px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
  text-shadow: 1px 1px 0 #7ac8c8;
}

.label-mode-btn {
  min-width: 50px;
}

.calendar-btn {
  width: 80px;
  padding: 6px 8px !important;
}

/* ===================
   レスポンシブ対応（スマホ横: 640px〜1000px）
   =================== */
@media (max-width: 1000px) and (min-width: 640px) {
  .footer-note .disclaimer {
    font-size: 10px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* ===================
   レスポンシブ対応（スマホ: 639px以下）
   =================== */
@media (max-width: 639px) {
  /* --- ヘッダー: 2行構成（1行目: 路線名+走行中、2行目: 時計） --- */
  .header {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 12px;
    gap: 6px;
  }

  .line-title {
    order: 1;
    flex: 1;
    justify-content: flex-start;
    gap: 8px;
  }

  .header-right {
    order: 2;
    font-size: 0.95rem;
    position: relative;
    top: -4px;
    align-self: center;
  }

  .header-right span {
    font-size: 1.5rem;
  }

  .clock-center {
    order: 3;
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .line-symbol-wrap {
    width: 40px;
    height: 40px;
  }

  .line-symbol {
    width: 34px;
    height: 34px;
    font-size: 1rem;
    border-width: 8px;
  }

  .line-name-ja {
    font-size: calc(var(--line-name-ja-size, 3.2rem) * 0.45);
    top: 0;
  }

  .line-name-en {
    font-size: calc(var(--line-name-en-size, 2rem) * 0.45);
    top: 0;
  }

  .digital-clock {
    font-size: 2.2rem;
    padding: 8px 10px;
  }

  /* --- 線路図: 上部の余白確保 --- */
  .main {
    margin-top: 0;
  }

  .diagram-section {
    margin-bottom: -30px;
  }

  .diagram-section:first-of-type {
    padding-top: 10px;
  }

  /* --- 操作画面: 95%幅 --- */
  .info-panel {
    padding: 12px 2.5%;
  }

  .time-controls-wrap {
    width: 100%;
    padding: 10px;
  }

  .time-controls-main {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .time-btn {
    width: 48px;
    font-size: 0.75rem;
    padding: 4px 0;
    height: 32px;
  }

  .time-btn.special-btn {
    font-size: 0.7rem;
  }

  .time-controls-main button.play-btn {
    width: 48px;
    height: 32px;
    font-size: 0.85rem;
  }

  .time-controls-sub {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .time-controls-sub .separator {
    display: none;
  }

  .time-group {
    gap: 4px;
    height: auto;
  }

  .time-group label {
    font-size: 0.8rem;
  }

  .time-controls-sub input[type="time"] {
    width: 110px;
    font-size: 0.9rem;
    height: 32px;
  }

  .time-controls-sub select {
    font-size: 0.8rem;
    height: 32px;
    padding: 4px 8px;
  }

  .time-controls-wrap button {
    font-size: 0.8rem;
    padding: 4px 10px;
    height: 32px;
  }

  /* --- フッター: 幅広め --- */
  .line-nav {
    width: 100%;
    margin: 0 auto;
    padding: 16px 8px;
    gap: 6px;
    box-sizing: border-box;
  }

  .line-nav-link {
    padding: 10px 12px;
    font-size: 0.85rem;
    gap: 6px;
  }

  .footer-note {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 16px;
  }

  .footer-note .disclaimer {
    font-size: 11px;
  }
}