/* ============================================================
 * Flanker 任务页面样式
 * ------------------------------------------------------------
 * 黑底白字、内容居中，与 PsychoPy 版保持一致
 * （对应 PsychoPy 版 BG_COLOR=black / FG_COLOR=white）。
 *
 * 箭头 / 文字大小不写死在这里，而是用 CSS 变量：
 *   --arrow-size-vh  箭头字号（默认 13vh，运行时被 config.js 的 arrowSizeVh 覆盖）
 *   --text-size-vh   指导语字号（默认 5vh，对应 PsychoPy 版 TEXT_HEIGHT=0.05）
 * 这样"改外观只改 config.js"的约定在网页版同样成立。
 * ============================================================ */

:root {
  --arrow-size-vh: 13vh;
  --text-size-vh: 5vh;
  --bg-color: #000000;   /* 背景色（PsychoPy 版 BG_COLOR） */
  --fg-color: #ffffff;   /* 箭头 / 文字颜色（PsychoPy 版 FG_COLOR） */
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg-color);
  color: var(--fg-color);
  /* 触摸设备上防止下拉刷新 / 橡皮筋效果干扰实验 */
  overscroll-behavior: none;
}

/* jsPsych 主容器：继承黑底白字，铺满窗口 */
.jspsych-display-element {
  background: var(--bg-color);
  color: var(--fg-color);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC",
    "Source Han Sans SC", "Helvetica Neue", sans-serif;
  width: 100%;
  max-width: 100%;
}

/* ---------- 箭头刺激：一行 5 个箭头，水平居中 ---------- */
.flanker-arrows {
  font-size: clamp(44px, var(--arrow-size-vh), 170px);
  font-weight: 700;
  /* 5 个箭头之间留一点间距，视觉上接近 PsychoPy 版的等宽字形效果 */
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap; /* 保证 5 个箭头始终在同一行 */
  user-select: none;
}

/* ---------- 注视点 "+"（仅 config.js 打开 showFixation 时出现） ---------- */
.flanker-fixation {
  font-size: calc(clamp(44px, var(--arrow-size-vh), 170px) * 0.6);
  font-weight: 700;
}

/* ---------- 练习阶段对错反馈（仅 showFeedback=true 时出现） ---------- */
.flanker-feedback {
  font-size: var(--text-size-vh);
}

.flanker-feedback .flanker-rt {
  font-size: calc(var(--text-size-vh) * 0.7);
  opacity: 0.75;
}

/* ---------- 指导语 / 知情同意 / 结束页 ---------- */
.end-page {
  text-align: center;
  line-height: 2;
  font-size: clamp(17px, var(--text-size-vh), 30px);
  max-width: 46em;
  margin: 0 auto;
  padding: 0 1.2em;
}

.end-page h2 {
  font-size: calc(clamp(17px, var(--text-size-vh), 30px) * 1.25);
  margin-bottom: 0.6em;
}

/* 指导语里展示的箭头示例（如 >>>>> / <<><<） */
.arrows-demo {
  font-size: clamp(30px, calc(var(--arrow-size-vh) * 0.55), 90px);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0.5em 0;
  white-space: nowrap;
}

/* 指导语里提示按键的小标签 */
.key-hint {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 0 0.5em;
  margin: 0 0.15em;
  font-weight: 700;
}

/* jsPsych 指令页 / 按钮页的按钮放大，方便儿童点击 */
.jspsych-display-element .jspsych-btn {
  font-size: clamp(17px, var(--text-size-vh), 28px);
  padding: 0.45em 1.6em;
  margin: 0.3em;
  border-radius: 8px;
  cursor: pointer;
}

/* ---------- 手机 / 平板触摸按钮 ---------- */
/* 默认隐藏；只有 body.touch（触屏设备，由 timeline.js 检测添加）时才显示 */
.touch-pad {
  display: none;
  margin-top: 4vh;
  gap: 8vw;
}

body.touch .touch-pad {
  display: flex;
  justify-content: center;
}

.touch-btn {
  font-size: 6vh;
  padding: 2vh 9vw;
  border: 2px solid #fff;
  border-radius: 14px;
  background: transparent;
  color: #fff;
  touch-action: manipulation; /* 去掉移动端点击延迟 */
  cursor: pointer;
}

.touch-btn:active {
  background: #fff;
  color: #000;
}

/* ---------- 数据提交结果提示（timeline.js 动态替换页面内容） ---------- */
.submit-hint {
  opacity: 0.8;
  font-size: calc(clamp(17px, var(--text-size-vh), 30px) * 0.78);
}