/* quiz.css — v5.0.0 题目页（矢量级还原）
   = CSS底色 + 场景插画(透明WebP) + CSS站点标签 + CSS题干
   + 一体化选项图(卡片与文字，保留手绘贝塞尔形状)
   + 返回箭头(透明PNG) + CSS文字
   卡片用 AI 源精确提取的 WebP，保留设计稿原始手绘形状/颜色/阴影。 */

#screen-quiz {
  background: var(--q-bg, #cae6f9); /* JS 设每页底色，渐变页用 background-image */
  padding: 0;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* —— 场景插画层（透明PNG，满屏铺，渐入）—— */
.quiz-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center top;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.03);
}
#screen-quiz.show .quiz-scene {
  animation: bgReveal 0.6s ease forwards;
}
@keyframes bgReveal {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: scale(1); }
}

/* —— 站点标签（CSS，右上角，还原原稿：白底圆角框 + 第N站小字 + 站名大字）——
   原稿框 bbox(614,145,857,238) = x68.2%-95.2% y9.1%-14.9%
   '第一站' size20.8pt=1.30cqh color#b5b5b6 ；'检票口' size42.6pt=2.66cqh color#000 */
.q-station-wrap {
  position: absolute;
  top: 9.1%;
  right: 4.8%;
  z-index: 3;
  width: 27%;          /* 框宽 (857-614)/900 */
  height: 5.8%;        /* 框高 (238-145)/1600 */
  background: #ffffff;
  border: 0.18cqh solid #000;
  border-radius: 1.2cqh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.3cqh 0.8cqh rgba(0,0,0,0.08);
  opacity: 0;
}
#screen-quiz.show .q-station-wrap { animation: fadeIn 0.5s ease 0.35s forwards; }
/* 右上角三个灰点（模拟界面控件） */
.q-station-wrap::before {
  content: "";
  position: absolute;
  top: 0.6cqh;
  right: 0.8cqw;
  width: 0.7cqw;
  height: 0.7cqw;
  border-radius: 50%;
  background: #999;
  box-shadow: -1.3cqw 0 0 #999, -2.6cqw 0 0 #999;
}
.q-station-num {
  font-family: var(--font-body);
  font-size: 1.30cqh;
  font-weight: 500;
  color: #b5b5b6;
  letter-spacing: 0.05em;
  line-height: 1;
}
.q-station-name {
  font-family: var(--font-wdch), var(--font-title);
  font-size: 2.66cqh;
  color: #000000;
  letter-spacing: 0.04em;
  margin-top: 0.2cqh;
  line-height: 1;
}

/* —— 引导语 + 题干（CSS，顶部，原稿用 Xiaolai 体）——
   scenario origin(78,295) size44.1pt=2.76cqh ；title origin(73,374) size53.5pt=3.34cqh
   均为品牌橙 #ea5514 */
.q-text-area {
  position: absolute;
  top: 17%;
  left: 8%;
  right: 8%;
  z-index: 3;
  opacity: 0;
}
#screen-quiz[data-question="7"] .q-text-area {
  top: 16.5%;
  left: 38%;
  right: 8%;
}
#screen-quiz.show .q-text-area { animation: fadeIn 0.5s ease 0.45s forwards; }
.q-scenario {
  font-family: var(--font-xiaolai), var(--font-body);
  font-size: 2.76cqh;
  color: #ea5514;
  line-height: 1.25;
  margin: 0 0 0.5cqh;
}
.q-title {
  font-family: var(--font-xiaolai), var(--font-title);
  font-size: 3.34cqh;
  font-weight: 400;
  color: #ea5514;
  line-height: 1.2;
  margin: 0;
}

@keyframes fadeIn { to { opacity: 1; } }

/* —— 选项卡片区（绝对定位，与原稿同坐标）—— */
.quiz-cards {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}

/* 单个选项：一体化图片（卡片形状+文字合成在一张PNG里）。
   整体按原稿坐标百分比定位 + 按容器比例缩放，任何分辨率下文字都不溢出卡片。 */
.opt {
  position: absolute;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: filter 0.18s ease, transform 0.18s ease;
  overflow: visible;
}
#screen-quiz.show .opt {
  animation: optIn 0.45s ease forwards;
}
@keyframes optIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 选项图片：铺满按钮区域，保持原稿宽高比 */
.opt-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  transition: filter 0.18s ease;
}
/* 选中态：轻微放大 + 橙色光晕（不破坏一体化图片） */
.opt.selected {
  transform: scale(1.03);
  z-index: 5;
}
.opt.selected .opt-img {
  filter: drop-shadow(0 0 6px rgba(232, 85, 19, 0.7)) brightness(1.05);
}
.opt:active {
  transform: scale(0.99);
}

/* —— 返回上一站（独立箭头图片 + CSS文字，左下角）——
   原稿: '返回上一站' origin(120,1492) size30pt=1.88cqh color#231815 BangFont */
.quiz-back {
  position: absolute;
  left: 8%;
  bottom: calc(6% + var(--stage-safe-bottom));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  font-family: var(--font-title);
  font-size: 1.88cqh;
  font-weight: 500;
  color: #231815;
  background: none;
  border: none;
  padding: 0.5cqh 0.4cqw;
  cursor: pointer;
  opacity: 0;
  animation: fadeIn 0.4s ease 0.7s forwards;
}
.quiz-back img {
  width: 2.9cqw;
  height: auto;
  object-fit: contain;
}
.quiz-back:active { transform: scale(0.94); }