@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ===== General ===== */
.q-title-text{ white-space: pre-line; } /* 讓純文字的 \n 也會換行 */

body { background: #eee; }
.quiz-card { max-width: 400px; position: relative; min-height: 80vh; border:0; }
.option-btn { text-align: left; }           /* 兼容舊按鈕 */
.option-btn[disabled] { opacity: .85; }

.fade-slide-enter { animation: fadeSlideIn .22s ease-out both; }
.fade-slide-leave { animation: fadeSlideOut .18s ease-in both; }
@keyframes fadeSlideIn { from {opacity:0; transform: translateY(8px);} to {opacity:1; transform: translateY(0);} }
@keyframes fadeSlideOut { from {opacity:1; transform: translateY(0);} to {opacity:0; transform: translateY(-6px);} }

/* 題圖：置中、16:9、適應各裝置 */
.q-image{
  display: block;
  margin: .25rem auto 0;
  width: 100%;
  max-width: 720px;
  height: auto;
  object-fit: cover;
  border-radius: .5rem;
}/*aspect-ratio: 16/9;*/
#q-title-lead { text-align: center; }
#q-title-text { text-align: left; }

/* 隱藏 .btn-toggle 裡的原生 radio，保留可用性 */
.btn-toggle input[type="radio"]{
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* 手機：卡片四邊貼齊 & 撐到底 */
@media (max-width: 576px){
  #main.container { padding: 0 !important; }
  .quiz-card.card{
    margin: 0 !important;
    width: 100vw;
    max-width: 100vw;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .quiz-card.card > .card-body{
    min-height: 100svh;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* footer 僅桌機顯示 */
@media (max-width: 991.98px){
  body > footer { display: none !important; }
}

/* ===== Font weight utils ===== */
.fwt100{font-weight:100;}
.fwt200{font-weight:200;}
.fwt300{font-weight:300;}
.fwt400{font-weight:400;}
.fwt500{font-weight:500;}
.fwt600{font-weight:600;}
.fwt700{font-weight:700;}
.fwt800{font-weight:800;}
.fwt900{font-weight:900;}

.fs10{font-size: 10px !important;}
.fs12{font-size: 12px !important;}
.fs13{font-size: 13px !important;}
.fs14{font-size: 14px !important;}
.fs15{font-size: 15px !important;}
.fs16{font-size: 16px !important;}
.fs18{font-size: 18px !important;}
.fs19{font-size: 19px !important;}
.fs20{font-size: 20px !important;}
.fs22{font-size: 22px !important;}
.fs24{font-size: 24px !important;}
.fs26{font-size: 26px !important;}
.fs28{font-size: 28px !important;}
.fs30{font-size: 30px !important;}
.fs32{font-size: 32px !important;}
.fs34{font-size: 34px !important;}
.fs36{font-size: 36px !important;}
.fs38{font-size: 38px !important;}
.fs40{font-size: 40px !important;}
.fs42{font-size: 42px !important;}
.fs44{font-size: 44px !important;}
.fs46{font-size: 46px !important;}
.fs48{font-size: 48px !important;}

/* ===== Quiz Base ===== */
.quiz-q { margin-bottom: 28px; }
.quiz-lead { color:#6b7280; font-size:.95rem; margin-bottom:6px; }
.quiz-title { font-size:1.125rem; line-height:1.5; margin:0 0 14px; }

/* 預設直向排列；加 .cols-2 才切雙欄 */
.quiz-options{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ===== Option Card（綠底陰影：桌機 hover，兩端 active） ===== */
:root{
  --ink: #111;
  --accent: #c2f202;
  --stroke: 2.5px;
  --shadow-x: 7px;            /* 右 7px */
  --shadow-y: 7px;            /* 下 7px */
  --shadow-x-active: 7px;
  --shadow-y-active: 7px;
}

.quiz-option{
  display: block;
  width: 100%;
  max-width: 520px;
  text-align: center;
  border: var(--stroke) solid var(--ink);
  border-radius: 25px;
  border-top-right-radius: 0;
  padding: 14px 16px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  min-height: 100px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease, transform .05s ease;
  /* 注意：不對 box-shadow 做 transition，確保「按下瞬間」立即出現 */
  margin-bottom: 10px;
}

/* 桌機：滑過顯示黑底＋草綠底卡（右7、下7） */
@media (hover: hover) and (pointer: fine) {
  .quiz-option:hover,
  .quiz-option:focus-visible{
    background: #111;
    color: #fff !important;
    box-shadow:
      var(--shadow-x) var(--shadow-y) 0 0                 var(--accent),
      var(--shadow-x) var(--shadow-y) 0 var(--stroke)     var(--ink);
  }
}

/* 任何裝置：按下瞬間出現綠色底卡（右7、下7） */
.quiz-option:active{
  background: #111;
  color: #fff !important;
  transform: translateY(1px);
  box-shadow:
    var(--shadow-x-active) var(--shadow-y-active) 0 0             var(--accent),
    var(--shadow-x-active) var(--shadow-y-active) 0 var(--stroke) var(--ink);
}

/* 行動／粗指標：關閉 hover 殘留（保留 :active 效果） */
@media (hover: none), (pointer: coarse) {
  .quiz-option,
  .quiz-option:hover,
  .quiz-option:focus,
  .quiz-option:focus-visible{
    background: #fff;
    color: #111;
    box-shadow: none;
    transform: none;
    outline: none;
  }
  /* 不覆蓋 :active，保留上面的按壓回饋 */
}

/* 已選 */
.quiz-option.is-selected{
  border-color:#111;
  background:#eff6ff;
  box-shadow:0 2px 12px rgba(59,130,246,.15);
}

/* 禁用 */
.quiz-option.is-disabled{ opacity:.55; cursor:not-allowed; }

/* ===== Typography ===== */
.opt-big{
  display:block;
  font-size:1.1rem;
  line-height:1.55;
  font-weight:600;
  letter-spacing:.5px;
  word-break:break-word;
}
.opt-big + .opt-big { margin-top: 2px; }

.opt-small{
  display:block;
  margin-top:4px;
  font-size:.95rem;
  line-height:1.05;
  word-break:break-word;
}

/* 桌機開雙欄（有 .cols-2 才生效） */
@media (min-width: 992px){
  .quiz-options.cols-2{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 12px;
  }
}

/* 行動版：字級與間距更友善 */
@media (max-width: 575.98px){
  .opt-big{ font-size:1.2rem; line-height:1.4; }
  .quiz-option{
    padding:16px 18px;
    max-width:100%;
  }
}

/* ===== Result helpers ===== */
#r-image{ max-width: 720px; }

/* FAQ 箭頭旋轉 */
#faq-grid button[data-bs-toggle="collapse"] i{ transition: transform .2s ease; }
#faq-grid button[aria-expanded="true"] i{ transform: rotate(180deg); }

/* iOS 點按高亮＆觸控優化 */
.quiz-option{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* 關閉 scroll anchoring；回頂不延遲 */
html, body { overflow-anchor: none; scroll-behavior: auto !important; }

/* iOS 固定視窗／容器捲動（只在手機啟用） */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    html, body { height: 100%; overflow: hidden; }
    #main {
      position: fixed;
      inset: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      background: #f7f8fa;
    }
  }
}

/* ===== 賽車格紋（封面關閉、題目/結果置底） ===== */
:root{
  --checker-size: 30px;
  --checker-height: var(--checker-size);
  --checker-dark: #000;
  --checker-light: #fff;
}

.quiz-card{ position: relative; overflow: hidden; }

/* 預設：置頂條帶 */
.quiz-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: var(--checker-height);
  background:
    conic-gradient(var(--checker-dark) 25%, var(--checker-light) 0 50%, var(--checker-dark) 0 75%, var(--checker-light) 0)
    0 0 / var(--checker-size) var(--checker-size);
  pointer-events:none;
}



/* 題目/結果：改置底，並關閉置頂 */
#profile.quiz-card::before,
#quiz.quiz-card::before,
#result.quiz-card::before{ display:none !important; }
#profile.quiz-card::after,
#quiz.quiz-card::after,
#result.quiz-card::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--checker-height);
  background:
    conic-gradient(var(--checker-dark) 25%, var(--checker-light) 0 50%, var(--checker-dark) 0 75%, var(--checker-light) 0)
    0 0 / var(--checker-size) var(--checker-size);
  pointer-events:none;
}

/* 個資頁：保留頂部條帶所需的內距（封面關掉、個資保留） */
#profile.quiz-card > .card-body{}
#quiz.quiz-card > .card-body,
#result.quiz-card > .card-body{
  padding-bottom: calc(var(--checker-height) + 1rem) !important;
}

/* 提升棋格銳利度（可選） */
@supports (image-rendering: pixelated){
  .quiz-card::before,
  #quiz.quiz-card::after,
  #result.quiz-card::after{
    image-rendering: pixelated;
  }
}

/* 行動裝置棋格大小（可選） */
@media (max-width: 576px){
  :root{ --checker-size: 30px; }
}

/* 快速關閉棋格：在 section 加 .no-checker 即可 */
.no-checker.quiz-card::before,
.no-checker.quiz-card::after{ display:none !important; }

/* ===== Fonts / misc ===== */
.ffnoto{font-family: "Noto Sans TC", serif !important;}
.ffnoto-serif{font-family: "Noto Serif TC", serif !important;}
.ffpoppin{font-family: "Poppins", sans-serif !important;}
.ffmont{font-family: "Montserrat", sans-serif !important;}

.bg-form{border-radius:20px;background:#842aff;}
.form-lighten{  width:18%; right:3%; top:-45px; }
.form-hint{color: #321066;}
.form-shadow{ border-radius:0 !important; box-shadow:3px 3px 2px rgba(42, 8, 86, .75) !important; }

.btn-light:focus{ opacity:0.95; background:#fff; }
.btn-light:hover{ opacity:0.95; background:#fff; }
.btn-light:checked+.btn, .btn.active, .btn.show{ background-color: #c2f202; }

.bg-title{
  background:url('img/quiz/bg-title.svg') no-repeat;
  background-size: 100% auto;
  background-position:-2px 2px;
  letter-spacing:4px;
}
.q-title-text{ line-height:32px; letter-spacing: .5px; }

/* SVG 題圖補丁 */
.q-image.is-svg{
  object-fit: contain !important;
  aspect-ratio: auto !important;
  border-radius: 0;
  background: transparent;
}
.q-image-svg{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: auto;
}

/* 角標 Banner（若使用） */
@media screen and (min-width: 1441px){
  .banner-bottom{width:95%; bottom:0; right: 0;}
  .banner-logo{width:32%; top:65vh; left: 20px;}
}

@media screen and (min-width: 561px) and (max-width: 1440px){
  .banner-bottom{width:95%; bottom:0; right: 0;}
  .banner-logo{width:32%; top:75vh; left: 20px;}
}

@media screen and (max-width: 560px){
  .banner-bottom{width:88%; bottom:0; right: 0;}
  .banner-logo{width:37%; top:73vh; left: 15px;}
}


/* --- 強制所有裝置（含手機）按下瞬間有黑底＋7px 綠底黑框 --- */
.quiz-option:active,
.quiz-option:active:focus {
  background: #111 !important;
  color: #fff !important;
  box-shadow:
    7px 7px 0 0           var(--accent, #c2f202) !important,
    7px 7px 0 var(--stroke, 2.5px) var(--ink, #111) !important;
  transform: translateY(1px) !important;
  outline: none !important;
}


.btn-purple{ 
  background:#7b36ff;
  font-size: 18px;
}
.btn-purple:hover{ background:#6537d3;}

.tree1{width: 11%; left:3.5%; top:-52px; z-index: 0;}
.tree2{width: 11%; right:3.5%; top:-52px;z-index: 0;}
.wheel{width: 13%; right:-3%; bottom:-40px;z-index: 0;}
.lightening{width: 8%; left:-3%; bottom:-42px;z-index: 0;}


@media screen and (max-width: 560px){
  .btn-purple{ font-size: 1rem;}
  .tree1{width: 11%; left:3.5%; top:-40px; z-index: 0;}
  .tree2{width: 11%; right:3.5%; top:-40px; z-index: 0;}

}


.bg-race{
  background-color: #ffffff;
opacity: 1;
background-image:  repeating-linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000), repeating-linear-gradient(45deg, #000000 25%, #ffffff 25%, #ffffff 75%, #000000 75%, #000000);
background-position: 0 100%, 12px calc(100% - 12px);

background-size: 24px 24px;
}

#raffle-standalone .accordion{ border:2.5px solid #111; border-radius:7.5px; }
#raffle-standalone .accordion .accordion-item{ border:0.95px solid #111;  }

/* 讓抽獎區 accordion 的標題內容置中 */
#raffle-accordion .accordion-button {
  justify-content: center;    /* 水平置中 */
  text-align: center;
  position: relative;
}

/* 包住文字的容器（確保置中不被箭頭擠歪） */
#raffle-accordion .accordion-button span.accordion-title {
  flex: 1;
  text-align: center;
}

/* 改成實心三角形箭頭 */
#raffle-accordion .accordion-button::after {
  flex-shrink: 0;
  width: 0;
  height: 0;
  margin-left: 0.5em;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid currentColor; /* 實心三角形（往下） */
  content: "";
  transition: transform 0.2s ease;
  position: absolute;
  right: 0.7rem; /* 固定在右側 */
  top: 50%;
  transform: translateY(-50%);
}

/* 展開時箭頭旋轉（往上） */
#raffle-accordion .accordion-button:not(.collapsed)::after {
  transform: translateY(-50%) rotate(180deg);
}

/* FAQ 列表：每列按鈕 */
#faq-list .faq-item{
  display: grid;
  grid-template-columns: auto auto 1fr; /* [縮圖][編號][文字] */
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border: none; /* list-group-flush 無分隔線 */
  text-align: left;
  background: transparent;
}

/* 題目縮圖（可選） */
#faq-list .faq-thumb{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
}

/* 黑底白字編號（01~16）*/
.faq-no{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: .6em;
  background: #111;
  color: #fff;
  font-weight: 800;
  font-family: "Montserrat", system-ui, -apple-system, "Noto Sans TC", sans-serif;
  letter-spacing: .5px;
  line-height: 1;
}

/* 題目文字 */
#faq-list .faq-title{
  font-weight: 600;
  line-height: 1.35;
  color: inherit;
}

/* Modal 內的答案圖片（若有） */
.faq-answer-img{
  margin: 0 0 .75rem;
}
.faq-answer-img img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* 手機微調尺寸 */
@media (max-width: 576px){
  #faq-list .faq-thumb{ width: 56px; height: 56px; }
  .faq-no{ width: 2em; height: 2em; font-size: .95rem; }
}