/* === 首頁專用 overlay === */
.timeup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.timeup-overlay.show {
  display: flex !important;
}

.timeup-card {
  background: #1f1f2a;
  border: 3px solid #66f7cf;
  border-radius: 18px;
  padding: 40px 60px;
  color: #fff;
  text-align: center;
  animation: popup-in 0.3s ease-out;
}

.timeup-title {
  font-size: clamp(16px, 2vw, 28px);
  margin-bottom: 20px;
  font-weight: 700;
  color: #66f7cf;
}

.itro-btn-area {
  display: flex;
  justify-content: center;
}
.btn-confirm {
    display: block;
    width: clamp(120px, 20vw, 140px);
    height: clamp(50px, 8vw, 70px);
    background: url("../img/quiz_result_btn_confirm.png") center center / contain no-repeat;
    border: none;
    color: rgb(0, 0, 0);
    font-weight: 700;
    font-size: clamp(16px, 2.8vw, 25px);
    cursor: pointer;
    letter-spacing: 2px;
    position: relative;
    bottom: clamp(8px, 2vw, 20px);
    right: clamp(8px, 2vw, 20px);
    transform: translate(18%, 96%);
    font-family: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    padding-bottom: 5px;
}

.btn-confirm:hover {
    transform: translate(18%, 92%);
    transition: transform 0.2s;
}
    .btn-confirm {
        position: relative;
        margin: 3% 0px;
        bottom: 0px;
        right: 0px;
        transform: none;
    }

    .btn-confirm.result {
      position: relative;
      margin: 3% 0px;
      bottom: 0px;
      right: 0px;
      transform: none;
    }
    
    .btn-confirm:hover {
        transform: translate(0%, -7%);
    }


@keyframes popup-in {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}