:root{
  --page-max: 1080px;
  --space: clamp(10px, 2vw, 22px);
  --board-radius: 18px;
  --cyan: #69f0e6;
  --yellow: #ffd236;
  --line: #27272a;
  --board-grad-top: rgba(33, 39, 66, .92);
  --board-grad-mid: rgba(66, 39, 84, .82);
  --board-grad-bot: rgba(28, 22, 64, .92);
  --rail-card-w: clamp(125px, 9vw, 134px);
  --rail-card-h: clamp(150px, 12vh, 190px);
  --rail-gutter: 16px;
}

html, body{margin: 0;}
body{
  font-family:"Noto Sans TC", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:#fff;
  background:
    url("../img/bg_drag.png") repeat center/auto,
    radial-gradient(120% 140% at 10% -10%, #9b8df1 0%, #8fa3ff 40%, #7456b4 100%);
}
.draggable {
  touch-action: none !important;
}
#rail {
  overflow: hidden;                /* 外層不要橫向滾動 */
}
#rail .cards-area {
  display: flex;
  justify-content: flex-start;     /* 不能置中 */
  align-items: stretch;
  gap: 10px;                          /* 避免奇怪的對齊偏移 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;   /* 有用 snap 的話 */
  scroll-padding-left: 0;
  direction: ltr;                  /* 避免 RTL 造成初始靠右 */
  overflow-anchor: none;           /* 圖片載入時避免「錨點」把起點推走 */
}

/* 圖片不要撐跳布局，避免初載偏移 */
#rail .cards-area img {
  display: block;
  height: auto;
  max-width: 100%;
}

.stage{
  width:min(var(--page-max), 96vw);
  margin: 1rem auto auto auto;
  padding: clamp(10px, 2vw, 18px);
  position: relative;
}

.m-timer{ display:none; }
.m-time-wrap{
  width: min(721px, 92vw);
  position: relative;
  display: flex;
  justify-content: left;
  align-items: center;
}
.m-time-text{
  position:absolute; left:8px; top:-2px;
  font-weight:900; font-size:14px; color:#0f1a16;
}
.m-time-bar{width:100%;height: 60px;display:block;}
.bar-bg{ fill:#0f1a16; opacity:.9; }
.bar-active{ fill: var(--yellow); }


.timer-desktop{
}
.clock-base{
  position: relative;
  width: 163px;
  height: 178px;
  background: url("../img/drag_clock.png") center/contain no-repeat;
  z-index: 10;
  display: flex;
  margin-top: 1rem;
}
.clock-base span{
  position:absolute;
  inset:0;
  display: flex;
  font-weight:900;
  letter-spacing:1px;
  color:#0f1a16;
  font-size: 1.5rem;
  color: #fff963;
  justify-content: center;
  align-items: center;
  top: 3px;
}
.clock-ring{
  position: relative;
  inset:0;
  transform: rotate(-90deg); 
  top: 6.5px;
  width: 85%;
  left: 13px;
  z-index: -1;
}
.ring-bg{
  fill: none;
  stroke: yellow;
  stroke-width: 9px;
}
.ring-active{
  fill: none;
  stroke: #000000;
  stroke-width: 12px;
  stroke-linecap: round;
  stroke-dasharray: 327;   
  stroke-dashoffset: 100;
}


.tri-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(12px, 2vw, 24px);
  margin: clamp(8px, 1.6vw, 14px) 0;
}

.zone{
  border-radius: 22px;
  border: 3px solid #34fcfa;
  box-shadow: 0 2px 0 rgba(0,0,0,.25) inset;
  position: relative;
  background: #050315c7;
}

.zone-title {
  position: absolute;
  top: -29px;
  left: 50%;                   
  transform: translateX(-50%); 
  display: flex;
  gap: 8px;
  padding: 5px 14px;
  background: #bff7ff;
  color: #102320;
  font-weight: 700;
  border-radius: 14px;
  border: 3px solid #0dcbd0;
  width: 45%;
  font-size: 1.75rem;
  justify-content: center;
}
.zone-title span{
  line-height: 2rem;
}

.zone-title.yellow{
  background: #fff29c;
  border-color: #fce234;
}
.zone-title.green{
  background: #9cff92;
  border-color: #34fc50;
}


.icon{width: 28px;height: 34px;object-fit:contain;}

.dropboard{
  min-height: clamp(340px, 39.5vh, 310px);
  padding: 2rem 0.75rem 1rem 0.75rem;
  display:flex;
  gap: 11px;
  flex-wrap:wrap;
  align-content:flex-start;
  border-radius: 20px;
}


.zone-distance {border-color: #fce234; background:#150303c7;}
.zone-shield   {border-color: #34fc50;  background:#03150ac7;}


.drop-card{
  width: 45%;
  background:#fff;
  border-radius:10px;
  padding:5px;
  color:#333;
  text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  position: relative;
  touch-action: none;
  /* -webkit-user-drag: none; */
  user-select: none; 
}
.drop-card img{ width:100%; object-fit:cover; border-radius:8px; }
.drop-card p{margin:.5em 0 0;font-weight:700;font-size: 12px;}

.drop-card img, 
.drop-card p, 
.drop-card span {
  pointer-events: none; /* 讓 pointerdown 落在卡片本體 */
}

.down-area{
  display: flex;
  justify-content: center;
  align-items: center;
}



.rail{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 5px;                       
  align-items: center;
  margin: 1rem 2rem 0 2rem;
}

.nav-btn {
  width: 40px;
  height: 40px;
  border: none;
  cursor: pointer;
  background: none;
  position: relative;
}

.nav-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
}

.nav-btn.next::before {
  width: 0;
  height: 0;
  width: 0;
  height: 0;
  width: 30px;
  height: 35px;
  background: radial-gradient(circle at center, #ffeb70 0%, #ffbb33 70%);
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%); 
  box-shadow: inset 0 0 8px rgb(255 255 255 / 90%);
  border-radius: 3px;
}

.nav-btn.prev::before {
  width: 30px;
  height: 35px;
  background: radial-gradient(circle at center, #ffeb70 0%, #ffbb33 70%);
  clip-path: polygon(100% 0%, 0% 50%, 100% 100%); 
  box-shadow: inset 0 0 8px rgb(255 255 255 / 90%);
  border-radius: 3px;
}

.rail-track{
  overflow-x: hidden;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  display:flex;
  gap: 12px;
  padding: 13px 0;
  background: #33333375;
  border-radius: 20px;
  z-index: 9999;
  border-right: 20px solid #33333300;
  border-left: 20px solid #33333300;
  
}
.rail-card{
  flex: 0 0 23%;
  scroll-snap-align: end;
  background:#fff;
  border-radius:16px;
  padding: 6px 10px;
  color:#333;
  text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  scroll-behavior: smooth;
}

.cards-area{
  display: flex;
  gap: 10px;
}

.rail-card img{width:100%; object-fit:cover;border-radius:10px;}
.rail-card p{margin: 0 0 0.5em 0;font-weight:700;font-size: 12px;}

.btn-confirm {
    display: block;
    width: clamp(120px, 20vw, 180px);
    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, 31px);
    cursor: pointer;
    letter-spacing: 2px;
    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-area{
  position: relative;
  right: 3%;
}

.tick {
    position: absolute;
    right: -18%;
    top: -4%;
    width: clamp(18px, 5.2vw, 79px);
    aspect-ratio: 0.5 / 0.2;
    background: url("../img/correct.png") center / contain no-repeat;
    z-index: 10;
}

.answer.tick {
    display: block;
}

.tick.error {
    background: url("../img/error.png") center / contain no-repeat;
}

@media (max-width: 1107px){
  .zone-title {font-size: 1.125rem;}

  .drop-card{
    width: 44%;
  }
}

@media (max-width: 939px){
  .drop-card  { width: 43%; }
  .clock-base {width: 142px;}
  .clock-ring{ top: 5px; left: 11px;}
  .rail{margin: 2rem 1rem 0 1rem;}
}


@media (max-width: 819px){
  .drop-card  { width: 42%; }
}

@media (max-width: 802px){
  .zone-title {font-size: 1rem;}
  .clock-base {width: 119px;}
  .nav-btn.prev::before, .nav-btn.next::before { width: 25px; height: 30px;}
  .cards-area { gap: 10px;}
  .rail-track { border-right: 10px solid #33333300; border-left: 10px solid #33333300;}
  .rail-card p {font-size: 13px;}
}

@media (max-width: 780px){
  body{
    background:
      url("../img/bg_drag_m.png") repeat center/auto,
      radial-gradient(120% 140% at 10% -10%, #9b8df1 0%, #8fa3ff 40%, #7456b4 100%);
    margin-bottom: 0.5rem;
  }
  
  .tri-grid{grid-template-columns: 1fr;gap: 38px;}
  .timer-desktop{ display:none; }
  .m-timer{ display:block; }
  .m-time-line{
    margin-top: 11px;
    position: absolute;
    left: 61px;
  }

  .m-time-bar{
    height: 55px;
  }

  .stage{
    margin: 0.25rem auto 5rem auto;
  }
  
  .rail-card{ flex-basis: 70%; }
  .cta-mobile{
    display:block;
    margin: 12px auto 6px;
    width: min(320px, 80vw);
    height: 56px;
    background: linear-gradient(#ffd978, #ffb62a);
    border: 3px solid #333; border-radius: 12px; color:#222;
    font-weight:900; font-size:18px;
  }
  .clock-base{
    background: url("../img/drag_clock_m.png") center/contain no-repeat; 
    height: 70px;
    margin-top: 0.25rem;
  }

  .clock-base span{
    font-size: 0.75rem;
  }

  .dropboard{
    min-height: clamp(82px, 0vh, 261px);
    padding: 2rem 0.3rem 0.5rem 0.3rem;
  }

  .drop-card{
    width: 19%;
  }

  .zone-title{
    width: 151px;
  }

  #mBar {
    transition: width .25s linear;
  }

  .down-area{
    flex-direction: column;
  }

  .rail-card{
    flex: 0 0 18%;
  }

  .rail{
    margin: 0;
  }

  .btn-area{
    position: absolute;
    bottom: 0%;
    right: 40%;
  }

  .drop-card p{
    font-size: 12px;
  }

  .rail-card p{
    font-size: 8px;
  }

  .tick{
    aspect-ratio: 1.5 / 2;
    right: -8%;
    top: -8.5%;
  }
}

@media (max-width: 530px){
 .rail-card{
    flex: 0 0 25%;
  }

  .tri-grid{
    gap: 30px;
  }

  .icon{
    width:20px;
    height: 30px;
  }

  .zone-title{
    padding: 0;
    top: -20px;
  }
}


@media (max-width: 480px){
  .m-time-bar{
    height: 45px;
  }

  .drop-card p{
    font-size: 10px;
  }
}


.cta-mobile{ display:none; }



.result-stage {
    margin: 0 10%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: -30px;
}

.result-title {
    width: clamp(180px, 28vw, 430px);
    height: clamp(50px, 8vw, 90px);
    background: url("../img/result_title.png") center center / contain no-repeat;
    text-indent: -9999px;
    margin: 0px;
    top: -9%;
    left: -8%;
    z-index: 10;
    position: absolute;
}


.result-board {
    background: linear-gradient(rgba(0, 0, 0, 0.58) 0%, rgba(2, 1, 2, 0.61) 50%, rgba(96, 62, 94, 0.92) 100%);
    border: 3px solid var(--yellow);
    border-radius: 16px;
    padding: 75px clamp(20px, 3vw, 50px) clamp(20px, 3vw, 50px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 20px;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 8px 20px;
    width: min(92vw, 1100px);
    height: clamp(323px, 40vh, 560px);
    position: relative;
    overflow: visible;
}

.grade {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.grade-title {
    position: absolute;
    left: 14%;
    top: -2%;
}

.grade-label {
    font-size: clamp(18px, 2vw, 28px);
    color: rgb(255, 255, 255);
    font-style: italic;
    font-weight: 700;
    letter-spacing: 5px;
}

.grade-icon {
    width: clamp(100px, 18vw, 225px);
    height: clamp(100px, 18vw, 225px);
}

.grade-icon.grade-b {
    background: url("../img/result_grade_b.png") center center / contain no-repeat;
}

.grade-icon.grade-a {
    background: url("../img/result_grade_a.png") center center / contain no-repeat;
}

.grade-icon.grade-s {
    background: url("../img/result_grade_s.png") center center / contain no-repeat;
}

.grade-text{
  color: #fff;
  margin: 0 10px 10px 10px;
  text-align: center;
  font-size: 1rem;
  /* background: rgb(255 220 0 / 16%); */
  padding: 10px;
  border-radius: 10px;
}

.stats {
    display: flex;
    flex-direction: column;
    gap: 88px;
    align-items: center;
    position: relative;
}

.zone.result{
 border: none;
}

.zone-title.result{
  background: none;
  border: none;
  color: #feff97;
  position: relative;
  bottom: 0;
  font-size: 1.5rem;
  top: 0;
  gap: 0;
  width: 100%;
}

.dropboard.result{
  padding: 1rem 0.75rem 0.5rem 0.75rem;
  min-height: clamp(389px, 39.5vh, 310px);
  justify-content: space-evenly;
  align-content: unset;
}

.drop-card.result{
  width: 42%;
}


.stat-item {
    background: rgba(255, 220, 0, 0.4);
    border-radius: 12px;
    padding: 12px 20px;
    justify-content: space-between;
    width: 50%;
    position: relative;
}

.stat-label {
    font-size: clamp(16px, 1.8vw, 24px);
    color: rgb(255, 255, 255);
    position: absolute;
    top: -27px;
    left: -30px;
    font-weight: 700;
    letter-spacing: 5px;
    font-style: italic;
}

.stat-value-area {
    display: flex;
    justify-content: center;
}

.stat-value {
    font-size: clamp(28px, 3vw, 52px);
    font-weight: 700;
    color: rgb(255, 255, 255);
}

.result-answer{
  background-color: rgb(205 178 0 / 70%);
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 20px;
  top: 15px;
  position: relative;
  justify-content: center;
  width: 70%;
}

.stat-label.result {
  position: relative;
  top: -7%;
  left: 0%;
  font-size: 1.5rem;
}

.btn-area.result{
  position: absolute;
  right: -1%;
  bottom: 4%;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


@media (max-width: 1470px) {
    .result-title {
        width: clamp(181px, 36vw, 442px);
        height: clamp(50px, 8vw, 99px);
    }

    .result-board {
        width: 90%;
        /* top: -10%; */
    }
}


@media (max-width: 1300px){
  .grade{
    margin: 0;
    justify-content: normal;
  }
  
  .drop-card.result{
    width: 41%;
  }

  .zone-title.result{
    font-size: 1.25rem;
  }

}


@media (max-width: 1142px){
    .grade {
      margin-top: 1.5rem;
    }

    .stats {
      gap: 50px;
    }

    .dropboard.result{
      padding: 0.5rem;
      touch-action: unset;
    }

    .drop-card.result p{
      font-size: 12px;
    }
}


@media (max-width: 1059px){
  .result-answer{
    padding: 10px;
  }

  .drop-card.result{
    width: 40%;
  }
}

@media (max-width: 967px){
  .grade{
    justify-content: space-around;
  }

  .result-title {
    width: clamp(259px, 46vw, 442px);
    height: clamp(104px, 13vw, 99px);
    top: -4%;
  }

  .result-board {
    grid-template-columns: auto;
    min-height: 690px;
    width: 76%;
  }

  .stat-label.result{
    top: -9%;
  }

  .tri-grid.result{
    margin-top: clamp(8px, 1.6vw, 14px);
  }

  .zone-title.result{
    padding: 10px;
  }

  .drop-card.result{
    width: 40%;
  }

  .btn-area.result{
    position: relative;
    justify-content: center;
  }

  .btn-confirm.result{
    transform: unset;
  }

  .result-stage{
    top: 10px;
  }
  
}

@media (max-width: 939px){
  .btn-area.result{bottom: -2%;}
}

@media (max-width: 780px){
  .result-title{
    top: -6%;
  }

  .result-board{
    margin-top: 10%;
    height: auto;
    padding: 10% 3% 4% 3%;
    min-height: 600px;
  }

  .zone.result{
    display: flex;
    flex-direction: column-reverse;
    box-shadow: none;
  }

  .drop-card.result{
    width: 18%;
  }

  .dropboard.result{
    min-height: clamp(87px, 9vh, 234px);
    gap: 7px;
  }

  .tri-grid.result{
    gap: 10px;
    margin-bottom: 1rem;
  }

  .result-stage{
    margin: 0% 2%;
    top: 10px;
    justify-content: flex-start;
  }

  .stat-label.result{
    top: -4%;
  }

  .btn-area.result{
    gap: 10px;
    position: relative;
    top: unset;
    left: unset;
  }

  .btn-confirm.result{
    transform: none;
  }

  .drop-card.result p{
    margin: auto;
    font-size: 10px;
  }

  .timeup-card{
    margin: 0 30px;
  }
}

@media (min-width: 781px){
  .rail-track{
    min-height: calc(var(--rail-card-h) + 12px); 
  }

  .cards-area{
    justify-content: center;
  }

  .rail-card{
    flex: 0 0 var(--rail-card-w);
    height: var(--rail-card-h);
  }

  .rail-card img{
    height: calc(var(--rail-card-h) - 56px); 
    object-fit: cover;
  }
}

.answer-overlay{
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 71%);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.overlay-close-result{
  background-color: unset;
  border: unset;
  position: absolute;
  font-weight: 800;
  top: 0;
  right: 0;
  padding: 10px 20px;
  font-size: 1.25rem;
  cursor: pointer;
}

.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;
}


.show-timeup .timeup-overlay .answer-overlay{
  display: flex;
}

/* 內容卡片 */
.timeup-card {
  background: #1f1f2a;
  border: 3px solid #66f7cf;
  border-radius: 18px;
  padding: 40px 60px;
  text-align: left;
  color: #fff;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
  animation: popup-in 0.3s ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeup-title {
  font-size: clamp(14px, 2vw, 32px);
  font-weight: 700;
  margin-bottom: 30px;
  color: #66f7cf;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.itro-btn-area{
  display: flex;
  gap: 20px;
}


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


/* 直接沿用現有 .btn-confirm 樣式 */
.timeup-card .btn-confirm {
  margin-top: 10px;
  position: relative;
  transform: unset;
  right: unset;
  bottom: unset;
  font-size: clamp(14px, 2vw, 20px);
}

@media (max-width: 960px){
  .timeup-card{
    margin: 0 10px;
    padding: 20px 20px;
  }

  .timeup-title{
    margin-bottom: 10px;
  }
}

.drag-ghost {
  position: fixed;
  left: 0; top: 0;
  transform: translate(-9999px, -9999px);
  z-index: 9999;
  width: 140px; 
  pointer-events: none;
  opacity: .95;
}

.rail-card {
  touch-action: none; 
}