/* body {
  padding:100;
  margin:100;
} */

.slidecontainer {
    width: 100%;
    /* Width of the outside container */
    display:flex;
    flex-direction: row;
    /* justify-content: center; */
    position: relative; /* 2026-09：給 .new-chapter-markers 的絕對定位當基準，不影響原本的 flex 排版 */
  }

/* 2026-09 新增：主時間軸上的「新章節」標記。myRange2（次時間軸）固定佔 10% 寬、
   myRange（主時間軸）固定佔 90% 寬（JS 也用同樣比例設定實際像素寬度），
   所以標記容器對齊到後面 90% 的區域，用百分比定位配合視窗縮放時自動跟著調整，
   不用另外在 resize 時重算像素。pointer-events:none 讓底下的滑桿還是能正常拖曳/點擊。 */
.new-chapter-markers {
  position: absolute;
  left: 10%;
  width: 90%;
  top: 0;
  height: 15px;
  pointer-events: none;
}

/* 2026-09 調整：使用者反饋標記常被滑桿把手自己擋住（兩者都畫在軌道中線上），
   改成浮在軌道「上方」、用一條小尾巴視覺連到軌道（像小旗子/圖釘），加大尺寸、
   加上呼吸燈式的縮放動畫，確保不會被把手蓋住、也更顯眼。 */
.new-chapter-mark {
  position: absolute;
  top: -11px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, #ff9a7a 0%, #e0483e 55%, #a4241c 100%);
  border: 2px solid #fff6e0;
  box-shadow: 0 0 6px rgba(224, 72, 62, 0.95);
  animation: newChapterPulse 1.6s ease-in-out infinite;
}

.new-chapter-mark::after {
  /* 小尾巴，視覺上把標記跟軌道連起來 */
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 9px;
  background: #a4241c;
  transform: translateX(-50%);
}

@keyframes newChapterPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 6px rgba(224, 72, 62, 0.95);
  }
  50% {
    transform: translateX(-50%) scale(1.25);
    box-shadow: 0 0 11px rgba(224, 72, 62, 1);
  }
}

#timeContainer {
  background: #e3e3e3;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
  



    

  /* The slider itself */
  .slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    width: 90%; 
    /* Full-width */
    height: 15px; /* Specified height */
    border-radius: 5px;  /* make it round */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;


  }

  .slider2 {
    -webkit-appearance: none;  /* Override default CSS styles */
    width: 10%; 
    /* Full-width */
    height: 15px; /* Specified height */
    border-radius: 5px;  /* make it round */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    display:inline
  }

  .slider3 {
    -webkit-appearance: none;  /* Override default CSS styles */
    width: 10%; /* Full-width */
    height: 15px; /* Specified height */
    border-radius: 5px;  /* make it round */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    display:inline
  }

  .slider4 {
    -webkit-appearance: none;  /* Override default CSS styles */
    width: 90%; /* Full-width */
    height: 15px; /* Specified height */
    border-radius: 5px;  /* make it round */
    background: #d3d3d300; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    display:inline
  }







  
  /* Mouse-over effects */
  .slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
  }

/* 2026-09 重新設計：把原本的純色圓點改成「銅製寶石指針」的樣子，
   呼應地圖羊皮紙+棕色邊框的視覺風格。主時間軸（年代）用琥珀色，
   次時間軸（章節順序）沿用原本的青綠色識別，但同樣做成有光澤感的寶石。
   滑鼠移上去會放大＋加深陰影，取代原本單純改透明度的效果，互動感更明確。 */
:root {
  --timeline-groove: linear-gradient(to bottom, #b08d57, #8a6a3c);
  --amber-thumb: radial-gradient(circle at 32% 28%, #ffe9b0 0%, #e8b74d 45%, #a9762a 85%, #7a541c 100%);
  --jade-thumb: radial-gradient(circle at 32% 28%, #baf5e3 0%, #29c4a0 45%, #0d8f78 85%, #075c4e 100%);
}

.slider,
.slider2,
.slider3,
.slider4 {
  background: linear-gradient(to bottom, #cbb182, #a68856);
  border: 1px solid #6e5225;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 26px; /* Set a specific slider handle width */
    height: 26px; /* Slider handle height */
    border-radius: 100%;
    background: var(--amber-thumb);
    border: 2px solid #fff6e0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    cursor: pointer; /* Cursor on hover */
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .slider:hover::-webkit-slider-thumb {
    transform: scale(1.18);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
  }

  .slider::-moz-range-thumb {
    width: 26px; /* Set a specific slider handle width */
    height: 26px; /* Slider handle height */
    border-radius: 50%;
    background: var(--amber-thumb);
    border: 2px solid #fff6e0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    cursor: pointer; /* Cursor on hover */
    transition: transform 0.15s ease;
  }

  /* Mouse-over effects */
.slider2:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider2::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  opacity: 0; /* make it disappear */
  appearance: none;
  width: 26px; /* Set a specific slider handle width */
  height: 26px; /* Slider handle height */
  border-radius: 50%;
  background: var(--jade-thumb);
  border: 2px solid #e8fff8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer; /* Cursor on hover */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.slider2::-moz-range-thumb {
  width: 26px; /* Set a specific slider handle width */
  height: 26px; /* Slider handle height */
  border-radius: 50%;
  background: var(--jade-thumb);
  border: 2px solid #e8fff8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer; /* Cursor on hover */
}

.slider3:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider3::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  opacity: 1; /* make it disappear */
  appearance: none;
  width: 26px; /* Set a specific slider handle width */
  height: 26px; /* Slider handle height */
  border-radius: 50%;
  background: var(--jade-thumb);
  border: 2px solid #e8fff8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer; /* Cursor on hover */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.slider3:hover::-webkit-slider-thumb {
  transform: scale(1.18);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
}

.slider3::-moz-range-thumb {
  width: 26px; /* Set a specific slider handle width */
  height: 26px; /* Slider handle height */
  border-radius: 50%;
  background: var(--jade-thumb);
  border: 2px solid #e8fff8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer; /* Cursor on hover */
}

.slider4:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider4::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  opacity: 0; /* make it disappear */
  appearance: none;
  width: 26px; /* Set a specific slider handle width */
  height: 26px; /* Slider handle height */
  border-radius: 50%;
  background: var(--jade-thumb);
  border: 2px solid #e8fff8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer; /* Cursor on hover */
}

.slider4::-moz-range-thumb {
  width: 26px; /* Set a specific slider handle width */
  height: 26px; /* Slider handle height */
  border-radius: 50%;
  background: var(--jade-thumb);
  border: 2px solid #e8fff8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer; /* Cursor on hover */
}