/*
 * 樣式原始檔:px 一律以 375 設計稿寬度為基準,
 * 由 postcss-px-to-viewport-8-plugin 轉成 cqw(基準 = #app 容器寬)。
 * 建置:npm run build:css → public/assets/app.css
 * cqh / % / em 不轉換,垂直定位用 cqh(基準 = #app 高)以對齊背景圖。
 */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* 底色與背景圖上下緣同色:手機回彈/網址列收合露出的區域才不會出現色塊。
   放在 html 層(canvas 背景)才能覆蓋 iOS 回彈區;
   background-color 實色是 Safari 回彈區的保底色。
   上半對齊圖頂 #55b8b5,下半依畫面切換(JS 設 html[data-screen]) */
html {
  background: #55b8b5 linear-gradient(#55b8b5 0%, #55b8b5 50%, #3aa193 50%, #3aa193 100%);
}
html[data-screen="start"] {
  background: #55b8b5 linear-gradient(#55b8b5 0%, #55b8b5 50%, #ceebea 50%, #ceebea 100%);
}
body {
  font-family: "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  display: flex;
  justify-content: center;
}
/* 手機直式畫面,桌機置中限寬(px 保留,不做 cqw 轉換)。
   高度依背景圖 1125:2435 比例撐開,比視窗高時整頁滾動 */
#app {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1125 / 2435;
  min-height: 100dvh;
  container-type: size;
}
.screen {
  position: absolute;
  inset: 0;
  /* 背景與版面用同一套比例,直接拉滿避免裁掉 Logo 或風景 */
  background-size: 100% 100%;
  background-position: center;
  display: none;
  flex-direction: column;
  /* 選項切圖含光暈出血,會超出畫面左右緣一點點,裁掉避免橫向捲動 */
  overflow: hidden;
}
.screen.active { display: flex; }

/* ---------- Loading ---------- */
#screen-loading {
  background-image: linear-gradient(#55b8b5 0%, #3aa193 100%);
  align-items: center;
  justify-content: center;
}
.loading-box { text-align: center; color: #fff; }
#loading-text {
  font-size: 4.5333cqw;
  letter-spacing: 0.35em;
  text-indent: 0.35em; /* 抵銷最後一字的字距,維持置中 */
  font-weight: 500;
  text-shadow: 0 0 2.6667cqw rgba(255, 255, 255, 0.5);
}
#loading-bar {
  width: 48cqw;
  height: 2.1333cqw;
  border-radius: 1.0667cqw;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  margin: 4.8cqw auto 0;
}
#loading-fill {
  height: 100%;
  width: 0%;
  border-radius: 1.0667cqw;
  background: #fff;
  box-shadow: 0 0 2.6667cqw rgba(255, 255, 255, 0.9);
  transition: width 0.25s ease;
}

/* ---------- 首頁 ---------- */
#screen-start { background-image: url(main.webp); }
#btn-start {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  width: 58%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
#btn-start img, #btn-restart img { width: 100%; display: block; }
#btn-start:active, #btn-restart:active { transform: translateX(-50%) scale(0.96); }

/* ---------- 答題頁 ---------- */
#screen-quiz { background-image: url(qbg.webp); }
#score {
  position: absolute;
  top: max(3.2cqw, env(safe-area-inset-top));
  right: 5.3333cqw;
  color: #fff;
  font-weight: 300;
  font-size: 8.5333cqw;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: 0 0 3.2cqw rgba(255, 255, 255, 0.35);
}
#score .unit { font-size: 0.42em; margin-left: 0.5333cqw; }
/* 題目固定佔 13cqh~32.6cqh 區域(依 layout 截圖量測),選項永遠從 40cqh 開始;
   字級全題目統一,塞不下時由 JS fitQuestionText() 縮小保底 */
#question {
  margin: 13cqh 7% 0;
  height: 19.6cqh;
  white-space: pre-line;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 5.0933cqw;
  line-height: 1.38;
  letter-spacing: 0.05em;
  text-align: center;
  text-shadow: 0 0 3.7333cqw rgba(120, 190, 200, 0.9);
  font-weight: 500;
}
/* 選項切圖畫布寬 1179 = 整個畫面寬(1:1 對應,設計指定按鈕含光暈為 1077),
   卡片本體佔 x 113~1065 → 左右留 113/1179 = 9.584%、寬 80.75%;
   垂直依 layout 設計稿:卡 A 頂 40.74cqh(題目區至 32.6cqh 止,margin-top 8.1cqh)、
   卡距(pitch)25.05cqh − 卡高 16.19cqh = gap 8.87cqh */
#options {
  display: flex;
  flex-direction: column;
  gap: 8.87cqh;
  margin: 8.1cqh 9.584% 0;
}
/* 每張切圖 1179x800,卡片本體佔 x 113~1065(952 寬)、y 243~656(413 高),
   其餘是徽章(頂 y=117)與光暈出血。
   .opt 盒 = 卡片本體(點擊範圍),圖片依上述比例外擴定位,
   讓卡片精準落在盒內:寬 1179/952、左 -113/952、上 -243/413 */
.opt {
  position: relative;
  border: none;
  cursor: pointer;
  padding: 0;
  background: transparent;
  aspect-ratio: 952 / 413;
  -webkit-tap-highlight-color: transparent;
}
.opt .st {
  position: absolute;
  width: 123.845%;
  left: -11.869%;
  top: -58.838%;
  height: auto;
  display: none;
  pointer-events: none;
}
.opt .st-base { display: block; }
/* hover / 按壓:米色(_hov 切圖);點擊後不停留,直接揭曉 */
@media (hover: hover) {
  .opt.enabled:hover .st-base { display: none; }
  .opt.enabled:hover .st-hov { display: block; }
}
/* 按住(pointerdown)的即時反饋:JS 加 .pressing,行為等同桌機 hover */
.opt.enabled:active .st-base, .opt.enabled.pressing .st-base { display: none; }
.opt.enabled:active .st-hov, .opt.enabled.pressing .st-hov { display: block; }
/* 揭曉:正解顯示橘 O、未選的錯誤選項顯示藍 X(各自的 _ans 切圖) */
.opt.reveal-ans .st-base { display: none; }
.opt.reveal-ans .st-ans { display: block; }
/* 揭曉:選到錯誤答案顯示粉紅 X(_err 切圖) */
.opt.reveal-err .st-base { display: none; }
.opt.reveal-err .st-err { display: block; }

/* ---------- 結算頁 ---------- */
#screen-result { background-image: url(result.webp); }
#final-score {
  position: absolute;
  top: 32%;
  width: 100%;
  text-align: center;
  color: #fff;
  font-weight: 200;
  font-size: 28cqw;
  line-height: 1;
  text-shadow: 0 0 4.2667cqw rgba(255, 255, 255, 0.3);
}
#final-score .unit { font-size: 0.28em; font-weight: 400; margin-left: 1.0667cqw; }
#btn-restart {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translateX(-50%);
  width: 52%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}