/* ===== 抢答大屏样式（嵌入抢答管理页左侧导航「答题大屏」栏目的大号卡片内） ===== */
/* 大号卡片：包住整个大屏页面，卡片内边距留出白框，舞台蓝色背景填满内容区 */
.screen-card { padding: 10px; margin-bottom: 20px; }
/* 舞台高度由 screen.js screenFitStage 按实际位置计算（撑满剩余视口）；此处仅作加载兜底 */
.screen-stage {
  position: relative;
  height: calc(100vh - 240px);   /* 兜底值：加载瞬间 JS 尚未写入内联高度时避免过高闪烁 */
  min-height: 240px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  transition: background 0.3s;
}
body.fs-screen .screen-stage { height: 100vh; }

/* ===== 大屏全屏（元素全屏：铺满屏幕，无导航栏，无滚动） ===== */
.screen-stage:fullscreen {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
/* 全屏时隐藏设置按钮，只保留全屏/退出按钮 */
body.fs-screen #screen-settings-btn2 { display: none; }
/* 全屏时隐藏吸顶导航与独立页签导航 */
body.fs-screen .topbar { display: none; }
body.fs-screen .pagenav { display: none; }
/* 大屏内的判分弹窗（答题不全/选择被抽查人）：抬到时间到(9500)/判分(9999)浮层之上，避免被遮暗 */
.screen-stage .modal-mask { z-index: 10000; }

/* 鼠标移动时才显示的控制按钮（右上角，静止 2.5 秒自动隐藏） */
.screen-ctrls {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 60;
  display: flex;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.screen-ctrls.show { opacity: 1; visibility: visible; }
.screen-full-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.25s, transform 0.15s;
  user-select: none;
  /* 点击辉光色（btn-glowburst 用） */
  --glow: rgba(165,180,252,0.6);
}
.screen-full-btn:hover {
  background: rgba(0,0,0,0.6);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.55),
              0 0 9px rgba(255,255,255,0.3),
              0 0 18px rgba(165,180,252,0.35);
  transform: scale(1.12);   /* 悬浮放大 */
}
.screen-full-btn:active { transform: scale(0.9); }
/* 设置齿轮：悬浮放大 + 旋转 */
#screen-settings-btn2 { transition: background 0.2s, box-shadow 0.25s, transform 0.28s cubic-bezier(0.34, 1.4, 0.5, 1); }
#screen-settings-btn2:hover { transform: scale(1.18) rotate(90deg); }
#screen-settings-btn2:active { transform: scale(0.92) rotate(90deg); }

.screen-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;   /* 全区间统一，配合占比渐变缩放保证断点两侧连续 */
}
.question-card {
  width: 90%;
  max-width: 900px;
  max-height: 100%;
  overflow: hidden;
  border-radius: 14px;
  padding: 32px 40px;
  transform: scale(var(--scr-scale));   /* 大屏内容等比例缩放（窗口/浏览器缩放自适应） */
  transform-origin: center center;
  text-align: var(--q-align);   /* 题目/答案水平对齐（跟随设置） */
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  cursor: pointer;
  user-select: none;
}
/* ===== 大屏字体/缩放变量（由设置面板实时写入，见 screen.js screenApplyStyle） ===== */
#screen-stage {
  --scr-scale: 1;                       /* 内容整体等比例缩放倍率 */
  --q-align: left;                      /* 题目/答案水平对齐 */
  --q-ff: inherit; --q-fs: 26px; --q-ls: 0px;  --q-lh: 1.5;   /* 题目：字体/字号/字间距/行距 */
  --a-ff: inherit; --a-fs: 20px; --a-ls: 0px;  --a-lh: 1.6;   /* 答案：字体/字号/字间距/行距 */
}
/* 类别徽章：顶部居中，flex 布局使其不受题目对齐方式（--q-align）影响 */
.q-category {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
/* 有类别徽章时，悬浮的题型标签与徽章同排展示，与题目间距可在设置中调整（--cat-gap） */
.q-category ~ .q-title {
  margin-top: var(--cat-gap, 12px);
}
.q-category span {
  display: inline-block;
  background: var(--cat-bg, rgba(255, 255, 255, 0.14));
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 5px 20px;
  font-size: calc(var(--cat-fs, 17px) * var(--fscale, 1));
  font-weight: 600;
  letter-spacing: var(--cat-ls, 3px);
  color: var(--cat-color, rgba(255, 255, 255, 0.92));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.q-type-label {
  position: absolute;        /* 固定在题目卡片左上角，不随对齐方式变化 */
  top: 32px;
  left: 40px;
  padding: 4px 14px;
  border-radius: 6px;
  font-size: calc(15px * var(--fscale, 1));   /* 窄窗口字号联动缩小 */
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.q-title {
  font-family: var(--q-ff);
  font-size: calc(var(--q-fs) * var(--fscale, 1));   /* 窄窗口字号联动缩小 */
  letter-spacing: var(--q-ls);
  line-height: var(--q-lh);
  font-weight: 600;
  margin-top: 58px;          /* 避让左上角悬浮的题型标签（标签盒高实测约48px + 10px 间距） */
  margin-bottom: 22px;
  color: var(--q-color, #fff);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.q-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;   /* 居中模式下由 text-align 控制文字，选项盒宽度自适应不拉伸 */
}
.q-option {
  padding: 12px 18px;
  border-radius: 8px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: calc(18px * var(--fscale, 1));   /* 窄窗口字号联动缩小 */
  border: 1px solid rgba(255,255,255,0.3);
}
.q-answer {
  display: none;
  margin-top: 22px;
  padding: 16px 20px;
  border-radius: 10px;
  background: rgba(76,175,80,0.85);
  color: var(--a-color, #fff);
  white-space: pre-line;   /* 答案内换行符正常显示为换行 */
  font-family: var(--a-ff);
  font-size: calc(var(--a-fs) * var(--fscale, 1));   /* 窄窗口字号联动缩小 */
  letter-spacing: var(--a-ls);
  line-height: var(--a-lh);
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.q-answer.show { display: block; animation: fadeIn 0.3s; }

/* 底部操作按钮：悬浮于舞台底部，不占布局空间（题目卡片在整页正中，不被按钮顶上去）
   八个按钮整体随窗口宽度等比缩放：--fb-scale = max(--fscale, 0.75)（fscale 为大屏字号系数，
   由 screen.js 写在 #screen-stage 上，0.75 下限防窄窗口过小）。字号驱动、内边距 em 联动，
   高/宽/字号/内边距/图标同一系数 → 任何窗口宽度下同倍率；放不下时整行换行而非压扁单个按钮 */
.screen-footer {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  padding: 0 calc(30px * var(--fb-scale, 1));
  display: flex;
  justify-content: center;
  gap: calc(14px * var(--fb-scale, 1));
  flex-wrap: wrap;
  z-index: 50;
  /* --fb-scale 由 screen.js 直写在 #screen-stage 上（继承至此）：max(var()) 链式自定义属性
     在 Chromium 不随祖先变量失效重算，改由 JS 计算好纯数值写入 */
}
.screen-footer .btn {
  flex: 0 0 auto;                    /* 不许 flex 压缩单个按钮 */
  padding: 0.6667em 2em;            /* 原 10px 26px 按当前字号 em 联动；左右加宽给旁置符号留位 */
  font-size: calc(15px * var(--fb-scale, 1));
  border-width: 1px;
  border-style: solid;
  border-color: transparent;         /* 八按钮统一 1px 边框占位，高度一致（否则 btn-default 独有边框高出 2px） */
}
.screen-footer .btn.btn-default { border-color: #e2e8f0; }
/* 符号旁置：⚡✅◐❌⬆ 等图标绝对定位钉在按钮左内边距区，不参与文字居中量算；按钮内容以文字本体居中 */
.screen-footer .btn .b-sym {
  position: absolute;
  left: 0.75em;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.screen-footer .btn .b-txt { display: inline-block; }
.screen-race-ctrls {
  display: flex;
  flex-wrap: wrap;                   /* 窄屏整组换行，不横向溢出 stage（320px 档曾溢出 31px） */
  gap: calc(14px * var(--fb-scale, 1));
  padding-left: calc(18px * var(--fb-scale, 1));
  margin-left: calc(4px * var(--fb-scale, 1));
  border-left: 1px solid rgba(255,255,255,0.35);
}

/* ===== 窄屏（手机）适配：仅紧凑间距；宽度规则（90%/900px 上限）、字号、body 内边距与桌面统一，
       由 --scr-scale 占比渐变缩放保证断点两侧连续，避免拖动窗口时卡片留白/字号突变 ===== */
@media (max-width: 768px) {
  .question-card {
    padding: 18px 16px;
    border-radius: 10px;
  }
  .q-type-label { top: 18px; left: 16px; font-size: calc(13px * var(--fscale, 1)); padding: 3px 10px; }
  /* 类别标签下移，避开左上角悬浮的题型标签（窄卡片时两者会撞在同一行） */
  .q-category { margin-top: 28px; }
  /* 底部预留按钮区高度，题目卡垂直居中时不会被悬浮按钮压住 */
  .screen-body { padding: 12px 12px 100px; }
  .q-title { margin-top: 44px; margin-bottom: 12px; }
  .q-options { gap: 8px; }
  .q-option { padding: 9px 12px; }
  .q-answer { padding: 12px 14px; margin-top: 14px; }
  /* 底部按钮不再窄屏硬切尺寸：--fscale 连续缩放已覆盖所有宽度（断点两侧无跳变） */
}