/* 中英文混合的最佳實踐 */
body {
  padding: 0;
  margin: 0;
  font-family: "Noto Sans TC", /* Google 思源黑體 */ "PingFang TC",
    /* Apple 蘋方 */ "Microsoft JhengHei", /* 微軟正黑體 */ "Helvetica Neue",
    /* 英文後備 */ Arial, sans-serif;
  overflow: hidden;
}
/* 防止文字選取和 context menu */
.no-context-menu,
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-touch-callout: none; /* iOS Safari 特有 */
  -webkit-tap-highlight-color: transparent; /* 移除點擊高亮 */

  touch-action: manipulation; /* 只允許滾動和縮放 */
}

.container {
  position: absolute;
  margin: 0 auto;
  width: 16vh;
  height: 16vh;
  perspective: 100vh;
  left: calc(50% - 8vh);
  top: calc(50% - 8vh);
}

.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.carousel div {
  transform-style: preserve-3d;
}

.item {
  display: flex;
  position: absolute;
  background: #000;
  width: 16vh;
  height: 16vh;
  line-height: 3vh;
  font-size: 1.2rem;
  color: #fff;
  border-radius: .5rem;
  transition: transform 1s;
  border: 2px solid #fff;
  align-items: flex-end; /* 底部對齊 */
  justify-content: center; /* 水平置中 */
  user-select: none;
}

.singer-next,
.singer-prev {
  top: 70%;
}
.singer-next {
  right: 10em;
}
.singer-prev {
  left: 10em;
}
.singer-back-to {
  right: 6em;
  bottom: 6em;
}

.img-cont {
  position: absolute;
}
.img-btn {
  position: absolute;
  background-size: cover;
  left: -3vh;
  top: -3vh;
  width: 6vh;
  height: 6vh;
}
.img-btn-big {
  position: absolute;
  background-size: cover;
  left: -4.2vh;
  top: -4.2vh;
  width: 8.4vh;
  height: 8.4vh;
}
.img-left-btn {
  background-image: url("../svg/箭頭左.svg");
}
.img-left-btn:active {
  background-image: url("../svg/箭頭左d.svg");
}
.img-right-btn {
  background-image: url("../svg/箭頭右.svg");
}
.img-right-btn:active {
  background-image: url("../svg/箭頭右d.svg");
}
.img-up-btn {
  background-image: url("../svg/箭頭上.svg");
}
.img-up-btn:active {
  background-image: url("../svg/箭頭上d.svg");
}
.img-down-btn {
  background-image: url("../svg/箭頭下.svg");
}
.img-down-btn:active {
  background-image: url("../svg/箭頭下d.svg");
}
.img-back-to {
  background-image: url("../svg/回選單.svg");
}
.img-back-to:active {
  background-image: url("../svg/回選單d.svg");
}
/* *** title bar images *** */
.img-big-singers {
  position: absolute;
  /* background-image: url("../svg/部落大歌星.svg"); */
  left: -15vh;
  top: -6vh;
  width: 30vh;
  height: 12vh;
}
.big-singer {
  left: 50%;
  top: 25%;
}
/* *** 地球唱片 *** */
.img-earth-man {
  position: absolute;
  background-image: url("../svg/地球人.svg");
  /* background-image: url("../png/earth421x492.png"); */
  background-size: cover;
  left: -12vh;
  top: -16vh;
  width: 24vh;
  height: 28vh;
}
.earth-01 {
  pointer-events: none;
  left: 50%;
  top: 0;
}
.earth-02 {
  pointer-events: none;
  left: 50%;
  top: 100%;
}
.earth-02d {
  left: 50%;
  top: calc(100% + 6vh);
}
/* ******* */

.custom-scrollbar {
  display: flex;
  /* margin: 2rem 1rem 1rem 1rem; */
  box-sizing: border-box;
  width: 98%;
  height: 90vh;
  overflow: auto;
  border: none;
  padding: 10px;
  font-size: 1.2rem;
}
.content {
  margin: 0 auto;
  width: 32vh;
}
/* 滾動條整體樣式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 3px; /* 垂直滾動條寬度 */
  height: 3px; /* 水平滾動條高度 */
}

/* 滾動條軌道 */
.custom-scrollbar::-webkit-scrollbar-track {
  background: #ddd; /* 軌道顏色 */
}

/* 滾動條滑塊 */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #666; /* 漸變色 */
}

/* 滑塊懸停效果 */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #666;
  cursor: pointer;
}