/* 全局重置或常规样式可放在 app.css 里，这里主要针对 challenge 页面 */

/* 整体布局 */
body {
  margin: 0;
  padding: 0;
  background-color: var(--a--); /* 浅黄/奶白色背景 */
  color: var(--b--);             /* 默认文字颜色 */
  font-family: type;
}

h4{
  margin-block-start: 0.6em;
  margin-block-end: 0.6em;
}

/* 容器，限制宽度 + 居中 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: blur(0);
  transition: filter 0.3s ease;

}

.header{
  width: 100vw;
  display:flex;
  flex-direction: row;
  justify-content: flex-start; /* 或者默认值 */

}




.settingButton{
  margin-left: auto; /* 该元素会被推到最右边 */
  padding-right: 9vw;
  padding-top: 3vh;
  font-size: 3vh;
}
.fa-cog {
  transition: transform 0.3s ease;  /* 设置过渡效果 */
}

/* 鼠标悬停时，让齿轮旋转一圈 */
.fa-cog:hover {
  transform: rotate(180deg);
}
.glow-cog {
  color: var(--b--); /* 你想要的图标颜色 */
  text-shadow: 0 0 3px var(--c--) /* 外发光效果 */
}

/* 标题 */
.page-title {
  align-self: start;
  display: flex;
  flex-direction: row;
  margin-left: 7vw;
  margin-top: 2vh;
  font-size: 3vh;
  font-weight: 400 !important;
  margin-bottom: 0.5rem;
  /* 初始状态先给一个颜色 */
  color: var(--c--);
  text-shadow: 1px 1px 1px var(--b--);
  user-select: none;
}


/* 定义动画关键帧 */
@keyframes colorAnimation {
  0% {
    color: var(--c--);
    text-shadow: 1px 1px 1px var(--b--);
  }
  50% {
    color: var(--b--);
    text-shadow: 1px 1px 1px var(--c--);
  }
  100% {
    color: var(--c--);
    text-shadow: 1px 1px 1px var(--b--);
  }
}

@keyframes colorAnimation1 {
  0% {
    color: var(--b--);
    text-shadow: 1px 1px 1px var(--c--);
  }
  50% {
    color: var(--c--);
    text-shadow: 1px 1px 1px var(--b--);
  }
  100% {
    color: var(--b--);
    text-shadow: 1px 1px 1px var(--c--);
  }
}




/* 难度提示 */
.difficulty {
  align-self: start;
  margin-left: 7vw;
  font-size: 1.5vh;
  color: var(--c--);
  margin-bottom: 1vh;
  margin-top: 1vh;
  display: flex;
  flex-direction: row;
  text-transform: uppercase;
  align-items: center;
  justify-content:flex-start;
}

.gradingArea{
  position:absolute;
  height: 25vh;
  width: 86vw;
  margin-left: 1vw;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  pointer-events: none;
  opacity:0.3
}


#gradeDisplay {
  user-select: none;
  font-size: 8vh;
  transform: rotate(-10deg);
  display: none; /* 初始什么也不显示 */
}

/* S+ 等级 */
.grade-splus {
  color: #FFD700;
  text-shadow:
  0 0 15px  #FFD700,
  0 0 25px  #FFA500,
  0 0 35px  #FF8C00;
}

/* ---------------------------
   新增：S 等级（示例也使用金色系发光）
--------------------------- */
.grade-s {
  color: #FFC107; /* 或者任意接近金色的颜色 */
  text-shadow:
  0 0 20px  #ff0800,
  0 0 40px  #ffb700,
  0 0 60px  #ffff00;
}


.grade-a {
  color: #00FF00;
  text-shadow:
  0 0 20px  #00FF00,
  0 0 40px  #00FF00,
  0 0 60px  #00CC00;
}


.grade-b {
  color: #00BFFF;
  text-shadow:
  0 0 20px  #00BFFF,
  0 0 40px  #1E90FF,
  0 0 60px  #1E90FF;
}


.grade-c {
  color: #9400D3;
  text-shadow:
  0 0 20px  #9400D3,
  0 0 40px  #8A2BE2,
  0 0 60px  #8A2BE2;
}


.grade-d {
  color: #FF0000;
  text-shadow:
  0 0 20px  #FF0000,
  0 0 40px  #FF0000,
  0 0 60px  #DC143C;
}

/* ---------------------------
   新增：弹出(pop-up)动画
   - 0%：缩放为0，透明
   - 50%：稍微放大到1.2倍
   - 100%：回到1倍大小
--------------------------- */
@keyframes popUp {
  0% {
    transform: scale(0) rotate(-15deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(-15deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(-15deg);
    opacity: 1;
  }
}

/* 弹出动画类，duration可根据需要调整 */
.popUp {
  animation: popUp 0.3s ease-out forwards;
}

/* 输入区和按钮 */
.input-area {
  display: flex;
  gap: 10px;
}
.input-area input {
  padding: 5px;
  font-size: 16px;
}
.input-area button {
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
  background: #FFD700;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}
.input-area button:hover {
  background-color: #FFC300;
}

@keyframes glow {
  0%, 100% {
    text-shadow: 
      0 0 10px #FFD700,
      0 0 20px #FFD700,
      0 0 30px #FFA500,
      0 0 40px #FFA500,
      0 0 50px #FF8C00,
      0 0 60px #FF8C00;
  }
  50% {
    text-shadow: 
      0 0 20px #FFD700,
      0 0 40px #FFD700,
      0 0 60px #FFA500,
      0 0 80px #FFA500,
      0 0 100px #FF8C00,
      0 0 120px #FF8C00;
  }
}


/* measure-list：容器，内部由JS动态插入 .measure */
.measure-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 86vw;
}

/* 小节 (measure) 样式，可在JS里插入 <div class="measure"> */
.measure {
  box-shadow:  0 0 5px var(--c--);
  padding-top: 1vh;
  padding-bottom: 1vh;
  display: flex;
  justify-content: left;
  align-items: center;
  margin-top: 1vh;
  min-height:3vh;
  border-radius: 3vw;
  background-color: transparent;
  border: 0.2rem solid var(--b--);

  /* opacity: 0; */
}
.plus-measure{
  display: flex;
  justify-content: center;
  align-items: center;
  height:4.5vh;
  
}

.plus-icon{
  font-size: 3vh;
  font-weight: 900;
}

/* 拍号, 如 "4/4" */
.time-signature {
  font-size: 4vw;
  padding-left: 2vw;
  font-weight: bold;
  color:var(--b--);
  flex-shrink: 0;
  text-align: center;
  padding-right: 3vw;
  user-select: none;
}

/* 音符区域 */
.notes {
  display: flex;
  /* width: 80vw; */
  min-height:4.5vh;
  justify-content:space-around;
  align-items: center;
  font-family: akvoTest;
  font-size:9vw;
  user-select: none;
}

/* 音符 */
.note {
  color:var(--b--);
  display: inline-block;
}

/* 提示框 */
.tap-hint {
  width: 86vw;
  min-height: 30vh;
  margin-top: 2vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 1px solid var(--c--);

  color: var(--b--);
  font-size: 1.1rem;

  box-shadow: 0 0 5px var(--c--);

  user-select: none;
  /* transition: background-color 0.1s ease, transform 0.1s ease; */
  z-index: 10;
  opacity: 1;
}


.tap-hint.active {
  background-color: var(--c--);
  transform: scale(0.9);
}

.delayText{
  color: var(--b--);
  font-size: 0.8rem;
  text-align: center;
}

.delayDigit{
  font-size: 1rem;
  color: var(--c--);
}


@keyframes highlightBlink {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: var(--c--);
    transform: scale(0.95);
  }
}

@keyframes highlightShadowBlink{
  0%, 100% {
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 13px 10px var(--c--)
  }
}

.panel{
  box-shadow: 0px 0px .5vh var(--c--);
  margin-top: 2vh;
}

/* 播放和节拍控制区 */
.controls {
  width: 86vw;
  /* margin-top: 2vh; */
  background-color: var(--a--);
  border-bottom: 1px solid var(--a--);
  width: 86vw;
  height: 7vh;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.ctrl-btn {
  height: 7vh;
  width: 21.5vw;
  background-color: var(--a--);
  color: var(--b--);
  border: none;
  /* border-radius: 4px; */
  padding: 0.4rem 0.8rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ctrl-btn:hover {
  background-color: var(--c--);
  color:var(--a--)
}

.bpm-slider {
  font-size: 2vh;
  width: 86vw;
  height: 4vh;
  display: flex;
  background-color: var(--a--);
  justify-content: space-evenly;
  align-items: center;
  animation: leftfadein 1.2s forwards;
  color:var(--b--);

}


/* 让 bpm-slider 整体更美观一些 */
.bpm-slider {
  /* margin: 20px; */
  display: flex;
  align-items: center;
  gap: 10px; /* label、滑块和显示值之间的间距 */
  touch-action: none;
}

/* 为滑块增加一些默认宽度，去除默认外观 */
.bpm-slider input[type="range"] {
  -webkit-appearance: none; /* 移除 WebKit 默认外观 */
  background: transparent;  /* 移除背景 */
  width: 300px;             /* 你想要的滑块宽度，可以自行调整 */
  cursor: pointer;          /* 鼠标经过时显示小手 */
}

/* ————————————————————————
   1) Chrome/Safari/Edge (WebKit)
   ———————————————————————— */

/* 1.1 轨道 */
.bpm-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;               /* 轨道高度 */
  background: var(--c--);          /* 轨道颜色 */
  border-radius: 3px;        /* 圆角 */
  border: none;
}

/* 1.2 滑块 */
.bpm-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;  /* 移除默认滑块外观 */
  width: 16px;
  height: 16px;
  background: var(--b--);       /* 滑块主色（红色示例） */
  border-radius: 50%;        /* 圆形滑块 */
  border: 2px solid var(--a--);    /* 白色边框，给滑块一点层次 */
  box-shadow: 0 0 2px var(--c--);
  margin-top: -5px;          /* 让滑块在轨道上垂直居中 */
}

#bpmRange {
  width: 30vw; /* 滑块宽度 */
}

::-webkit-slider-runnable-track {
  background: var(--a--); 
}

::-webkit-slider-thumb {
  background-color: var(--a--) 
}

#bpmValue {
  display: inline-block; 
  /* 根据最大位数设置宽度, 如3位数，用3ch~4ch 都OK */
  width: 3ch;
  /* 居中或右对齐均可 */
  text-align: center;
}




/* 主要内容模糊时用 .blur */
.blur {
  filter: blur(4px);
  transition: filter 0.3s ease;
}

/* Modal 初始状态隐藏 */
.setting-modal {
  display: none;         /* 初始隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  align-items: center;
  justify-content: center;
}

/* Modal 显示时 */
.setting-modal.active {
  display: flex;         /* 改为 flex，才能让内容居中 */
}

/* 弹窗的内容区域 */
.setting-content {
  background: var(--a--);
  padding: 2rem;
  border-radius: 8px;
  width: 70vw;
  /* max-width: 80vw; */
  /* text-align: center; */
  box-shadow: 0 0 10px var(--c--);
  opacity: 0;       /* 默认透明，准备动画 */
  transform: translateY(-40px); /* 默认往上一点 */
  display: flex;
  flex-direction: column;
}

/* 当 modal 是 active 状态时，.setting-content 播放动画 */
.setting-modal.active .setting-content {
  animation: slideDown 0.3s ease forwards;
}

/* 自定义动画：从上往下滑入 + 淡入 */
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.setting-modal.closing .setting-content {
  animation: slideUp 0.3s ease forwards;
}

/* 定义 从下往上 的关键帧 */
@keyframes slideUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}

.choice {
  width: 200px auto; /* 你可以根据需要改变宽度 */
  margin: 10px auto;
}

/* 移除浏览器默认外观，方便自定义 */
.selector {
  /* 移除各浏览器自带的下拉箭头/默认样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* 基础样式 */
  width: 70vw;
  padding: 10px 14px;  
  font-size: 14px;
  color: var(--b--);
  border: 2px solid var(--b--);
  border-radius: 4px;

  /* 为了给“自定义箭头”留空间 */
  background: var(--a--);
  background-image: none; /* 移除默认的下拉箭头 */
  background-repeat: no-repeat;
  background-position: right 10px center;

  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: type;
}

/* 在悬停时，显示更明显的边框 */
.selector:hover {
  border-color: #888;
}

/* 聚焦时，让边框和阴影更突出 */
.selector:focus {
  outline: none; /* 移除焦点边框 */
  border-color: var(--c--);
  box-shadow: 0 0 4px rgba(51,153,255, 0.5);
}

/* 用父元素 + 伪元素来插入自定义箭头图标或小三角形 */
.choice {
  position: relative;
}

.choice::after {
  content: "▾";  /* 也可以换成其他 unicode 图标，或背景图 */
  position: absolute;
  top: 50%;
  right: 14px;    
  transform: translateY(-50%);
  pointer-events: none; /* 不影响点击 */
  color: #666;    
  font-size: 14px;
}

/* 如果想在悬停或聚焦时改变小三角形的颜色，也可以这样写 */
.selector:hover ~ ::after,
.selector:focus ~ ::after {
  color: #3399ff; 
}

.closeButton{
  margin-top: 1.5rem;
  background-color: var(--c--);
  /* height: 4rem; */
  padding-top: 2vh;
  padding-bottom: 2vh;
  color: var(--b--);
  border: 1px solid var(--b--);
  font-size: 1rem;
  font-weight:700;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
  font-family: type;
}

.aboutArea{
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-evenly;
}

a{
  color:var(--b--)
}

#git{
  font-size: 1.5rem;
}

#mail{
  font-size: 1.4rem;
}

#wechat{
  padding-top: 0.1rem;
  font-size: 1.3rem;
}

#cookieConsent {
  /* 固定定位在视口底部附近 */
  position: fixed;
  left: 50%;
  bottom: 1vh;

  /* 初始“隐藏”状态（往下移出可视区域 + 透明度0 + 不可点击） */
  transform: translate(-50%, 150%); 
  opacity: 0;
  pointer-events: none;

  /* 过渡动画：transform & opacity */
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;

  /* 其余样式保持不变，可根据你需要自行调整 */
  width: 78vw;
  z-index: 9999;
  background-color: var(--a--);
  border-top: 1px solid var(--c--);
  padding: 15px;
  box-shadow: 0 0px 5px var(--c--);
}

/* 当元素加上 .show 类时，回到可见位置（transform: translateY(0)）并变为不透明 */
#cookieConsent.show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

#cookieConsent p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--b--);
  display: inline-block;
}
#cookieConsent .cookie-buttons {
  display: inline-block;
  float: right;
}
#cookieConsent button {
  margin-left: 10px;
  background-color: var(--c--);
  color: var(--a--);
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
}
#cookieConsent button:hover {
  background-color: var(--b--)
}

.footer{
  width: 86vw;
  min-height: 5vh;
  margin-top: 2vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: var(--a--);
  /* border-radius: 8px; */
  color: var(--b--);
  font-size: 0.9rem;
  box-shadow: 0 0 5px var(--c--);
  text-shadow: 0 0 1px var(--c--);
}
.examNumber{
  color:var(--c--)
}
.examNumText{
  display: flex;
  flex-direction: row;
  padding-left: 4vw;
  padding-right: 4vw;
}

.tips{
  font-size: 0.7rem;
  padding-right: 3vw;
  /* 初始状态：全显 */
  opacity: 1;
  /* 给 opacity 添加过渡效果 */
  transition: opacity 0.6s ease;
}
.tips.hide {
  opacity: 0;
}



@media (min-width: 768px) and (max-width: 1024px) {
    /* 小节 (measure) 样式，可在JS里插入 <div class="measure"> */

    .page-title{
      font-size: 5vh;
    }
    .difficulty{
      font-size: 2vh;
    }
    .settingButton{
      font-size: 5vh;
      padding-top: 5vh;
    }
    .wide-display{
      display: flex;
    }
    
    .measure-list {
      align-self: start;
      width: 42vw;
      height: 75vh;
      justify-content: space-between;
    }
    .measure {
      margin-top: 2vh;
      min-height: 12vh;
      border-radius: 1.5vw;
      border: 0.2rem solid var(--b--);
    }

    /* 拍号, 如 "4/4" */
    .time-signature {
      font-size: 2vw;
    }

    /* 音符区域 */
    .notes {
      font-size:4.5vw;
    }
    .right-side{
      width: 42vw;
      margin-top: 2vh;
      margin-left: 2vw;
      border-radius: 1.5vw;
      border: 0.2rem solid var(--b--);
      display: flex;
      flex-direction: column;
      /* justify-content: space-between; */
      align-items: center;
      box-shadow: 0px 0px .5vh rgb(102, 102, 102);
    }
    .gradingArea{
      height: 34vh;
    }


    /* 播放和节拍控制区 */
    .controls {
      min-height: 10vh;
      width: 33vw;
      padding-top: 1vw;
      padding-bottom: 1vw;
      display: flex;

    }
    .bpm-slider{
      width: 33vw;
      padding-bottom: 3vh;
    }
    #bpmRange{
      width:20vw
    }
    .ctrl-btn{
      margin: 1vw;
      width: 4vw;
      font-size: 2vh;
      padding-top: 2vh;
      padding-bottom: 2vh;
    }
    .tap-hint{
      height: 30vh;
      color: var(--b--);
      font-size: 2vw;
      padding-top: 1vw;
      padding-bottom: 1vw;
      width: 33vw;
      box-shadow: 0 0 5px var(--c--)
    }
    .slide-in-right {
      animation: slideInLeft 0.5s ease forwards;
    }

    .selector{
      width: 42vw;
    }

    .setting-content {
      /* height: 80vh; */
      width: 42vw;
      justify-content: flex-start;
      overflow-y: auto
      /* align-items: flex-start; */
    }
    .closeButton{
      padding-top: 3vh;
      padding-bottom: 3vh;
    }

    .tips{
      font-size: 0.6rem;
    }

    .footer{
      width: 33vw;
      height: 10vh;
    }
    .delayText{
      font-size: 1.2rem;
    }
    
    .delayDigit{
      font-size: 2.2rem;
      color: var(--c--);
    }
  }

@media (min-width: 1024px) {
    /* 小节 (measure) 样式，可在JS里插入 <div class="measure"> */
    .wide-display{
      display: flex;
    }
    
    .measure-list {
      align-self: start;
      width: 42vw;
      height: 75vh;
      justify-content: space-between;
    }
    .measure {
      margin-top: 2vh;
      min-height: 12vh;
      border-radius: 1.5vw;
      border: 0.2rem solid var(--b--);
    }

    /* 拍号, 如 "4/4" */
    .time-signature {
      font-size: 2vw;
    }

    /* 音符区域 */
    .notes {
      font-size:4.5vw;
    }
    .right-side{
      width: 42vw;
      margin-top: 2vh;
      margin-left: 2vw;
      border-radius: 1.5vw;
      border: 0.2rem solid var(--b--);
      display: flex;
      flex-direction: column;
      /* justify-content: space-between; */
      align-items: center;
      box-shadow: 0px 0px .5vh rgb(102, 102, 102);
    }
    .gradingArea{
      height: 42vh;
    }


    /* 播放和节拍控制区 */
    .controls {
      min-height: 10vh;
      width: 33vw;
      padding-top: 1vw;
      padding-bottom: 1vw;
      display: flex;
    }
    .bpm-slider{
      width: 33vw;
    }
    #bpmRange{
      width:20vw
    }
    .ctrl-btn{
      margin: 1vw;
      width: 4vw;
    }
    .tap-hint{
      height: 35vh;
      color: var(--b--);
      font-size: 2vw;
      padding-top: 1vw;
      padding-bottom: 1vw;
      width: 33vw;
      box-shadow: 0 0 5px var(--c--)
    }
    .slide-in-right {
      animation: slideInLeft 0.5s ease forwards;
    }

    .selector{
      width: 42vw;
    }

    .setting-content {
      width: 42vw;
      justify-content: flex-start;
      /* align-items: flex-start; */
    }

    .footer{
      width: 33vw;
      height: 10vh;
    }

    .delayText{
      font-size: 1.6rem;
    }
    
    .delayDigit{
      font-size: 2.2rem;
      color: var(--c--);
    }
  }