/* 《五关》· 全局样式
 *
 * 核心是一个 480×852 的固定舞台，按窗口等比缩放并居中。
 * 舞台内部一律用设计稿坐标（480×852），不做任何响应式——
 * 像素画的版式一旦流动，所有对齐都会散。
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #08090c;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 舞台 ---------- */
#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 480px;
  height: 852px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #0b0d12;
}

/* ---------- 屏幕 ---------- */
.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.screen.on {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- 大地图 ---------- */
.map-busy {
  position: absolute;
  left: 0; right: 0; top: 50%;
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  color: #6f8a96;
  pointer-events: none;
}

.plate {
  animation: plateIn .5s cubic-bezier(.2, .8, .3, 1) both;
  position: absolute;
  width: 212px;
  height: 41px;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background: rgba(21, 36, 44, .94);
  border: 1px solid #8B6D2E;
  display: flex;
  align-items: center;
  padding: 0 8px 0 10px;
  cursor: pointer;
}
.plate.current {
  border: 1.5px solid #E8C462;
  box-shadow: 0 0 0 1px rgba(232, 196, 98, .18), 0 3px 10px rgba(0, 0, 0, .45);
}
.plate.locked {
  border-color: #46525A;
  cursor: default;
  opacity: .92;
}

.plate .no {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  margin-right: 7px;
  background: #8B6D2E;
  color: #0E1A20;
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.plate.current .no { background: #E8C462; }
.plate.locked .no { background: #46525A; }

.plate .meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.plate .name {
  display: block;
  font-size: 14px;
  color: #F4EAD2;
  letter-spacing: .5px;
  line-height: 1.05;
  white-space: nowrap;
}
.plate.locked .name { color: #7C8890; }
.plate.failed { border-color: #B8892E; }
.plate.failed .sub { color: #C79A46; }
.plate .sub {
  display: block;
  font-size: 8px;
  color: #8B6D2E;
  line-height: 1.2;
  letter-spacing: .3px;
}
.plate.locked .sub { color: #46525A; }

.plate .btn {
  flex: 0 0 auto;
  height: 23px;
  padding: 0 9px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 23px;
  letter-spacing: .5px;
}
.plate.current .btn { background: #E8C462; color: #0E1A20; font-weight: 700; }
.plate.done .btn { border: 1px solid #8B6D2E; color: #8B6D2E; }

/* 当前岛：一圈呼吸的光环（放在 ::after 上，免得和入场动画抢 transform） */
.plate.current::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 8px;
  border: 1px solid rgba(232, 196, 98, .6);
  pointer-events: none;
  animation: ringPulse 2.2s ease-in-out infinite;
}

/* 角色 */
.map-char {
  position: absolute;
  width: 48px;
  height: 68px;
  image-rendering: pixelated;
  pointer-events: none;
  animation: charBob 3.2s ease-in-out infinite;
}
.map-char-shadow {
  position: absolute;
  width: 26px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  pointer-events: none;
}

/* ---------- 待建屏 ---------- */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: #14171d;
  color: #6b7681;
  font-size: 13px;
  letter-spacing: 1px;
}
.placeholder b { color: #c8b98e; font-size: 17px; font-weight: 600; }

/* ---------- 调试条 ---------- */
#hud {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 99;
  font-size: 10px;
  color: #55606b;
  background: rgba(0, 0, 0, .5);
  padding: 3px 7px;
  border-radius: 4px;
  pointer-events: none;
}

/* ---------- 动效 ---------- */
@keyframes plateIn {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(10px); }
  to   { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
@keyframes ringPulse {
  0%, 100% { opacity: .22; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.014); }
}
@keyframes charBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ===================================================================
   关内三屏
   =================================================================== */

/* ---------- 演出 ---------- */
.scr-story { background: #000; }

.story-bg { position: absolute; inset: 0; background-size: 100% 100%; }
.story-black {
  position: absolute; inset: 0; z-index: 1;
  background: #000; opacity: 1;
  transition: opacity .4s ease;
}
.story-mapchar {
  position: absolute; z-index: 6;
  width: 48px; height: 68px;
  image-rendering: pixelated;
  animation: charBob 3.2s ease-in-out infinite;
}
.story-plates { position: absolute; inset: 0; z-index: 4; }
.story-mapchar-shadow {
  position: absolute; z-index: 5;
  width: 26px; height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
}

.story-banner {
  /* 冲锋过场不是全屏替换，而是中间一条横向切入 ——
     上下仍是本岛背景，场景不切，观感连贯。
     原图 960×640（3:2），480 宽正好 320 高，不裁。 */
  position: absolute;
  left: 0; top: 312px;
  width: 480px; height: 320px;
  object-fit: cover;
  z-index: 7;
  border-top: 2px solid rgba(16, 14, 10, .75);
  border-bottom: 2px solid rgba(16, 14, 10, .75);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
  animation: chargeIn .34s cubic-bezier(.2, .9, .3, 1) both;
}

@keyframes chargeIn {
  from { opacity: 0; transform: scaleY(.72); }
  to   { opacity: 1; transform: scaleY(1); }
}

.story-panel {
  z-index: 2;
  transition: opacity .25s;
  position: absolute;
  left: 36px; top: 356px; width: 408px; height: 272px;
  border-radius: 16px;
  background: rgba(40, 44, 38, .82);
  border: 3px solid rgba(20, 18, 14, .85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.story-ground {
  position: absolute;
  left: 22px; right: 22px; top: 216px;
  height: 2px;
  background: rgba(0, 0, 0, .22);
}
.story-me, .story-guide {
  position: absolute;
  will-change: left;
  transition: left .9s ease-out;
  top: 148px;
  width: 48px; height: 68px;
  image-rendering: pixelated;
}
.story-me { left: 122px; }
.story-guide { left: 250px; transform: scaleX(-1); }

/* 灵韵是漂浮的小精灵，不站在地上 —— 所以没有"脚踩地面"这回事 */
/* 灵韵：贴地悬停，像只跟着走的小狗，不是飘在空中的气球。
   原生 24×24，导出时已放大到 48×48，这里按 1:1 显示最清。
   地面线在面板 y=216，脚底留 10px，所以 top = 216 - 10 - 48 = 158。 */
.story-ling {
  position: absolute;
  will-change: left;
  transition: left .9s ease-out;
  top: 158px;
  left: 250px;
  width: 48px; height: 48px;
  image-rendering: pixelated;
  animation: lingFloat 2.6s ease-in-out infinite;
}
/* 跟随时转个身，和主角同向。只在跟随时镜像，走来时仍朝左。 */
.story-ling.side { transform: scaleX(-1); }

@keyframes lingFloat {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -4px; }
}

.dlg {
  position: absolute;
  z-index: 8;
  top: 26px;
  width: 208px;
  height: 132px;                 /* 定高：多出来的字宁可砍页，也别把版式顶乱 */
  padding: 9px 14px 12px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #F7F1E0;
  border: 3px solid #3A2A1E;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
  overflow: hidden;
}
.dlg.left { left: 24px; }
.dlg.right { left: 248px; }
/* 没在说话的那一侧压暗。
   不能用 opacity —— 半透明会把后面的岛景透出来，画面显得很脏。
   改成在框上盖一层淡黑：框本身仍然是不透明的，只是暗了一档。 */
.dlg::after {
  content: '';
  position: absolute;
  inset: 3px;                    /* 让开 3px 边框 */
  border-radius: 7px;
  background: rgba(36, 26, 20, .17);
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s;
}
.dlg.idle::after { opacity: 1; }

.dlg b {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #7A6A55;
  margin-bottom: 6px;
}
/* 两边都左对齐。右框原本右对齐，中文长短不一时参差不齐，读起来很累。 */
.dlg span {
  display: block;
  font-size: 17px;
  line-height: 1.55;
  color: #241A14;
  word-break: break-word;
}

/* 「点击继续」标志：16×16 原生 ×2 = 32 */
.tap-icon {
  position: absolute;
  z-index: 9;
  left: 224px; top: 786px;
  width: 32px; height: 32px;
  animation: iconBreathe 1.5s ease-in-out infinite;
}
.tap-icon i {
  position: absolute; inset: 2px;
  border: 2px solid #8A7440;
  border-radius: 8px;
}
.tap-icon i::after {
  content: '';
  position: absolute;
  left: 10px; top: 8px;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #E3BE63;
}
@keyframes iconBreathe {
  0%, 100% { opacity: .72; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* ---------- 题板 ---------- */
.scr-quiz { background-size: 100% 100%; }

.hint-box {
  position: absolute;
  left: 24px; top: 34px; width: 432px;
  min-height: 96px;
  /* 限高：卡片上边在 196，提示框 34 + 140 = 174，留 22px 余量。
     用 auto 而不是 hidden —— 真超了宁可滚动，也不要把字吃掉。 */
  max-height: 140px;
  overflow-y: auto;
  padding: 10px 16px 14px;
  border-radius: 12px;
  background: #F7F1E0;
  border: 3px solid #3A2A1E;
  box-sizing: border-box;
  z-index: 3;
}
.hint-box b {
  display: block;
  font-size: 12px; font-weight: 400; color: #7A6A55; margin-bottom: 6px;
}
.hint-box span { font-size: 16px; line-height: 1.5; color: #241A14; }

.qcard {
  position: absolute;
  /* 下沿钉死在 842（和辨析卡的「继续」对齐），上边往上抬到 196：
     236 + 606 = 196 + 646 = 842。多出来的高度全给选项区。 */
  left: 10px; top: 196px; width: 460px; height: 646px;
  border-radius: 18px;
  background: #F7F1E0;
  border: 3px solid #3A2A1E;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  overflow: hidden;
  /* 纵向流式：题干、选项、底栏依次排，谁长谁占位。
     以前是各块绝对定位，选项一换行就顶穿底栏。 */
  display: flex;
  flex-direction: column;
  padding: 42px 34px 0;
}
.qbar {
  position: absolute; left: 24px; right: 24px; top: 14px;
  height: 5px; border-radius: 3px; background: rgba(58, 42, 30, .13);
  overflow: hidden;
}
.qbar i { display: block; height: 100%; background: #B8892E; transition: width .3s; }

.qtrack {
  flex: 0 0 auto;
  margin-top: 9px;
  display: flex; align-items: center; gap: 7px;
}
.qdot {
  width: 10px; height: 10px; flex: 0 0 10px;
  background: rgba(58, 42, 30, .16);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.qdot.ok { background: #B8892E; }
.qdot.no { background: #5A4634; }
.qdot.cur { background: rgba(58, 42, 30, .42); }
/* 通过线：第 8 颗后面一道竖线，一眼看出还差几颗 */
.qdot.line { position: relative; margin-right: 9px; }
.qdot.line::after {
  content: '';
  position: absolute;
  right: -8px; top: -4px; bottom: -4px;
  width: 1px;
  background: #B8892E;
}

.qhead {
  flex: 0 0 auto;
  margin-top: 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #241A14;
}
.qno {
  width: 19px; height: 19px; flex: 0 0 19px;
  background: #3A2A1E; color: #F7F1E0;
  font-size: 11px; line-height: 19px; text-align: center;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.qtype {
  font-size: 11px;
  border-radius: 3px;
  padding: 2px 6px;
  letter-spacing: .5px;
}
/* 三种题型三个色 —— 玩家一眼知道这题能不能多选 */
.qtype.single { background: #E3EDF1; color: #2F6273; }
.qtype.multi  { background: #C4552F; color: #FFF7EC; font-weight: 700; }
.qtype.judge  { background: #EFE4F3; color: #6A4A7A; }
.qcount { margin-left: auto; font-size: 13px; color: #7A6A55; }

.qstem {
  flex: 0 0 auto;
  margin-top: 16px;
  font-size: 19px; line-height: 1.6; color: #241A14;
}

.qopts {
  flex: 1 1 auto;
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.qopt {
  position: relative;
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  min-height: 56px; height: auto;      /* 关键：不锁死高度 */
  padding: 9px 12px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #FDF8EC;
  border: 2px solid rgba(58, 42, 30, .27);
  font-size: 18px; line-height: 1.45; color: #241A14;
  text-align: left; font-family: inherit;
  cursor: pointer;
}
.qopt span { flex: 1 1 auto; }
.qopt i {
  width: 30px; height: 30px; flex: 0 0 30px;
  background: #3A2A1E; color: #F7F1E0;
  font-size: 16px; font-style: normal; line-height: 30px; text-align: center;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
/* ?test=1：正确选项左侧一条绿杠。选中时换成金底，绿杠仍在，一眼看出选对没 */
.qopt.ans { background: #EAF4EE; }
.qopt.ans::before {
  content: '';
  position: absolute;
  left: 3px; top: 3px; bottom: 3px;
  width: 5px;
  border-radius: 3px;
  background: #2E8B57;
}
.qtest {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #2E8B57;
  color: #FFF;
}

.qopt.on {
  background: #F0E2BE;
  border: 3px solid #B8892E;
  padding: 8px 11px;                   /* 边框粗了 1px，内边距补回来 */
}
.qopt.on i { background: #B8892E; color: #241A14; }

/* 选项溢出时，底部渐隐 + 一句提示。
   光靠加高解决不了 —— 题干 5 行 + 4 个三行选项，怎么加都装不下。
   必须让"下面还有"看得见，否则玩家不知道有 D。 */
.qmore {
  position: absolute;
  left: 34px; right: 34px;
  bottom: 70px;                       /* 正好贴在选项区下沿 */
  height: 36px;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  box-sizing: border-box;
  background: linear-gradient(rgba(247, 241, 224, 0), #F7F1E0 68%);
  font-size: 12px;
  color: #8A7A62;
  pointer-events: none;
}
.qcard.more .qmore { display: flex; }

.qfoot {
  flex: 0 0 auto;
  position: relative;
  height: 50px;
  margin: 8px 0 12px;
  display: flex; align-items: center;
}
.qok {
  width: 152px; height: 50px;
  border-radius: 10px;
  border: 2px solid rgba(58, 42, 30, .17);
  background: #EDE6D4;
  color: #7A6A55;
  font-size: 19px; font-family: inherit;
  cursor: default;
}
.qok.ready {
  background: #B8892E;
  border-color: #B8892E;
  color: #241A14;
  cursor: pointer;
}

.qorb {
  position: absolute; right: 4px; top: -13px;
  width: 48px; height: 48px;
  cursor: pointer;
}
.orbimg {
  display: block; width: 48px; height: 48px;
  image-rendering: pixelated;
  animation: charBob 3.2s ease-in-out infinite;
}
.orbtip {
  position: absolute;
  right: 54px; top: 14px;
  white-space: nowrap;
  font-size: 13px;
  color: #7A6A55;
}
.orbtip::after {
  content: '';
  position: absolute; right: -9px; top: 5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #7A6A55;
}

/* ---------- 辨析卡 ---------- */
.scr-verdict { background-size: 100% 100%; }
.scr-verdict::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(6, 6, 8, .72);
}

.vpaper {
  position: absolute;
  left: 24px; top: 56px; width: 432px; height: 786px;
  background: #F7F1E0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
  box-sizing: border-box;
  /* 头固定、身滚动、脚固定。
     辨析内容长度不可控（法条天生长），所以中间必须是可滚的，
     但滚动条只是安全阀 —— 正常内容靠字数预算保证一屏读完。 */
  display: flex;
  flex-direction: column;
  padding: 28px 0 0;
  overflow: hidden;
}
.vhead { flex: 0 0 auto; display: flex; align-items: baseline; margin: 0 34px; }
.vt { font-size: 23px; letter-spacing: 4px; color: #241A14; }
.vp { margin-left: auto; font-size: 12px; color: #7A6A55; }
.vrule {
  flex: 0 0 auto;
  margin: 12px 34px 0;
  border-top: 2px solid #BC2723;
  border-bottom: 1px solid rgba(188, 39, 35, .45);
  padding-bottom: 3px;
}

.vbody {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 34px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.vans { position: relative; padding-left: 20px; margin-top: 20px; }
.vans b {
  display: block; font-size: 12px; font-weight: 400; color: #7A6A55;
}
.vans span {
  display: block; margin-top: 4px;
  font-size: 17px; line-height: 1.45; color: #241A14;
}
.vans em { font-style: normal; color: #BC2723; margin-right: 10px; }
.vans span.dim { color: #7A6A55; }
.vans span.dim em { color: #7A6A55; }

.vk { position: absolute; left: 0; top: 2px; width: 11px; height: 11px; }
.vk.ok::before, .vk.ok::after { content: ''; position: absolute; background: #BC2723; }
.vk.ok::before { left: 0; top: 6px; width: 5px; height: 2px; transform: rotate(40deg); }
.vk.ok::after  { left: 3px; top: 3px; width: 9px; height: 2px; transform: rotate(-45deg); }
.vk.no::before, .vk.no::after {
  content: ''; position: absolute; left: 0; top: 5px; width: 11px; height: 2px;
  background: #7A6A55;
}
.vk.no::before { transform: rotate(45deg); }
.vk.no::after  { transform: rotate(-45deg); }

/* 判断是这张卡的结论，用朱红、比正文大一档 */
.vjudge {
  margin: 22px 0 2px;
  padding-top: 16px;
  border-top: 2px solid #EAE2CC;
  font-size: 17px;
  line-height: 1.6;
  color: #BC2723;
}
.vsec b { font-size: 12px; font-weight: 400; color: #BC2723; }
.vsec p { margin-top: 8px; font-size: 16px; line-height: 1.75; color: #443528; }

.vlaw {
  margin: 22px 0 6px; padding-left: 16px;
  border-left: 3px solid rgba(188, 39, 35, .7);
}
.vlaw b { font-size: 12px; font-weight: 400; color: #BC2723; }
.vlaw .line { margin-top: 8px; }
.vlaw .src {
  font-size: 13px; color: #443528;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vlaw .loc { font-size: 12px; color: #7A6A55; }
.vlaw .kind {
  margin-top: 6px;
  font-size: 12px; line-height: 1.6; color: #8A8072;
}
.vlaw .txt { margin-top: 8px; font-size: 14px; line-height: 1.7; color: #443528; }

.vfoot {
  flex: 0 0 auto;
  /* 和题板的「确认」对齐：同一个横坐标、同一条底边 —— 连点两下不用换位置 */
  margin: 0 34px 12px;
  padding-top: 14px;
  border-top: 2px solid #EAE2CC;      /* 页脚线：给滚动一个可见的边界 */
  display: flex; align-items: center;
}
.vnext {
  width: 152px; height: 50px;
  border: 2px solid #241A14; border-radius: 4px;
  background: #F7F1E0; color: #241A14;
  font-size: 17px; font-family: inherit; cursor: pointer;
}
.vseal {
  margin-left: auto;
  width: 48px; height: 48px;
  background: rgba(188, 39, 35, .92);
  border: 2px solid #fff; border-radius: 5px;
  color: #fff; font-style: normal; font-size: 24px;
  line-height: 44px; text-align: center;
  box-sizing: border-box;
}

/* ===================================================================
   捏人
   =================================================================== */
.scr-creator {
  background: linear-gradient(#FDF8EC, #EDE3CB);
}

.chead {
  position: absolute; left: 34px; right: 34px; top: 18px;
  display: flex; align-items: center;
}
.ct { font-size: 20px; color: #241A14; }
.crnd {
  margin-left: auto;
  width: 74px; height: 34px;
  border-radius: 7px;
  background: #FDF8EC; border: 2px solid #7A6A55; color: #7A6A55;
  font-size: 13px; font-family: inherit; cursor: pointer;
}

.cprev { position: absolute; left: 192px; top: 40px; width: 96px; height: 144px; }
/* 144 = (34 + 2 留空) × 4，和 char.js 的 padTop=2 对上 */
.cpimg { width: 96px; height: 144px; image-rendering: pixelated; }

.ctabs {
  position: absolute; left: 0; right: 0; top: 196px;
  display: flex; justify-content: center; gap: 8px;
}
.ctab {
  width: 76px; height: 48px;
  border-radius: 8px;
  background: #FDF8EC; border: 2px solid #3A2A1E; color: #241A14;
  font-size: 15px; font-family: inherit; cursor: pointer;
}
.ctab.on {
  background: #F0E2BE;
  border: 3px solid #B8892E;
}

.cgrid {
  position: absolute; left: 34px; right: 34px; top: 258px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 14px;
  justify-items: center;
}
.ccard {
  position: relative;
  width: 128px; height: 118px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: #FDF8EC;
  border: 2px solid rgba(58, 42, 30, .27);
  cursor: pointer; padding: 0;
  font-family: inherit;
}
.ccard img { width: 72px; height: 108px; image-rendering: pixelated; }
.ccard .cname {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 3px;
  font-size: 14px; color: #7A6A55; text-align: center;
}
.ccard.on {
  background: #F0E2BE;
  border: 3px solid #B8892E;
}
.ccard.on .cname { color: #241A14; }

/* 饰品：格子矮一档，2 倍角色，一屏能放四排 */
.cgrid.acc { gap: 20px 12px; }
.cgrid.acc .ccard { width: 116px; height: 76px; }
.cgrid.acc .ccard img { width: 48px; height: 72px; }

.cmore {
  grid-column: 1 / -1;
  width: 100%; height: 42px;
  margin-top: 4px;
  border-radius: 8px;
  background: #FDF8EC; border: 2px solid rgba(58, 42, 30, .27); color: #7A6A55;
  font-size: 14px; font-family: inherit; cursor: pointer;
}

.cfoot {
  position: absolute; left: 34px; right: 34px; top: 730px;
  display: flex; gap: 14px;
}
.cnick-tip {
  position: absolute; left: 34px; top: 704px;
  font-size: 12px; color: #7A6A55;
  letter-spacing: .5px;
}
.cnick {
  width: 282px; height: 44px;
  padding: 0 14px;
  border-radius: 7px;
  border: 2px solid #3A2A1E; background: #FDF8EC;
  font-size: 14px; color: #241A14;
  font-family: inherit; outline: none;
  box-sizing: border-box;
}
.cgo {
  width: 116px; height: 44px;
  border-radius: 8px; border: none;
  background: #B8892E; color: #241A14;
  font-size: 17px; font-family: inherit; cursor: pointer;
}
.cnote {
  position: absolute; left: 0; right: 0; top: 790px;
  text-align: center;
  font-size: 10px; color: #7A6A55;
}
.cnote2 { top: 808px; color: #9A8E7C; }

/* ===================================================================
   关卡战绩卡
   =================================================================== */
.scr-result { background-size: 100% 100%; }

.rwrap {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 46px;
  box-sizing: border-box;
  text-align: center;
}

.rname { font-size: 26px; letter-spacing: 3px; color: #F4EAD2; }
.rsub  { margin-top: 8px; font-size: 13px; letter-spacing: 1px; color: rgba(244, 234, 210, .55); }

.rfig {
  display: block; margin: 12px 0 0;
  width: 144px; height: 204px;
  image-rendering: pixelated;
}

.rnick { margin-top: 4px; font-size: 17px; color: rgba(244, 234, 210, .82); }
.rnum  { font-size: 56px; line-height: 1.15; letter-spacing: 2px; color: #F4EAD2; }
.rnum.low { color: rgba(244, 234, 210, .78); }
.rgap { margin-top: 6px; font-size: 15px; color: #E8B85E; letter-spacing: .5px; }
.rlabel { font-size: 13px; color: rgba(244, 234, 210, .58); }
.rmeta  { margin-top: 10px; font-size: 13px; color: rgba(244, 234, 210, .66); }

.rquote { margin-top: 4px; font-size: 18px; line-height: 1.55; color: #F4EAD2; }
.rquote.first { margin-top: 22px; }

.rseals { display: flex; justify-content: center; gap: 14px; margin-top: 24px; }
.rseal {
  width: 36px; height: 36px; line-height: 36px;
  font-style: normal; font-size: 16px;
  color: rgba(244, 234, 210, .85);
  background: rgba(244, 234, 210, .20);
  /* 菱形用 clip-path，不用 rotate —— 转了连字一起转 */
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.rseal.on { color: #12160F; font-weight: 700; }

.rtip { margin-top: 10px; font-size: 13px; color: rgba(244, 234, 210, .72); }

.rfoot {
  position: absolute; left: 34px; right: 34px; top: 706px;
  display: flex; gap: 14px;
}
.rbtn {
  flex: 1 1 0; height: 52px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0);
  border: 2px solid rgba(244, 234, 210, .5);
  color: #F4EAD2;
  font-size: 16px; font-family: inherit; cursor: pointer;
}
.rbtn.main {
  background: #F4EAD2; border-color: #F4EAD2; color: #1A1A16; font-weight: 600;
}

.rbrand {
  position: absolute; left: 0; right: 0; top: 786px;
  font-size: 12px; color: rgba(244, 234, 210, .55);
}

/* toast */
#toast {
  position: absolute; left: 50%; bottom: 96px;
  transform: translateX(-50%) translateY(8px);
  padding: 8px 16px;
  border-radius: 18px;
  background: rgba(16, 18, 22, .9);
  color: #F4EAD2; font-size: 13px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===================================================================
   终章
   =================================================================== */
.scr-finale { background: #000; }

.fin-page {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.fin-line {
  margin-top: -60px;
  font-size: 20px;
  letter-spacing: 1px;
  color: #F2EADD;
  text-align: center;
  max-width: 380px;
  line-height: 1.9;
}
.fin-tick {
  position: absolute;
  left: 0; right: 0; bottom: 40px;
  text-align: center;
  font-size: 15px;
  color: #E8C462;
  animation: finBlink 1.6s ease-in-out infinite;
}
@keyframes finBlink {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

.fin-title {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  letter-spacing: 14px;
  text-indent: 14px;
  color: #F2EADD;
}

.fin-end {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  letter-spacing: 18px;
  text-indent: 18px;
  color: #E8C462;
  animation: finFade 1.2s ease both;
}
@keyframes finFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- 写一句话 ---- */
.fin-paper {
  position: absolute; inset: 0;
  background: #F7F1E0;
  /* display:none → block 时动画会重放，不用额外复位。
     纸先慢慢浮上来，字再跟上 —— 两段错开才有"一张纸压下来"的分量。 */
  animation: finPaperIn 1.6s cubic-bezier(.22, .68, .28, 1) both;
}
@keyframes finPaperIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 纸落定之后，字才浮出来 */
.fin-q, .fin-fields, .fin-ok, .fin-hint {
  animation: finTextIn 1s ease .55s both;
}
@keyframes finTextIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fin-q {
  /* 21px + 368 宽时差两个像素就换行，会甩出一个孤零零的「？」。
     缩到 20px、两侧各让 4px，留出 20 多像素余量，换字体也不会翻。 */
  position: absolute; left: 52px; right: 52px; top: 120px;
  font-size: 20px; line-height: 1.6; color: #241A14;
  letter-spacing: .5px;
}
/* 横线和题干左端对齐 —— 一个 52 一个 56 会差出 4px */
.fin-fields { position: absolute; left: 52px; right: 52px; top: 214px; }
.fin-rules i {
  display: block; height: 34px;
  border-bottom: 1px solid #CDBD9E;
}
.fin-input {
  position: absolute; left: 0; right: 0; top: 0;
  width: 100%; height: 34px;
  padding: 0 4px; box-sizing: border-box;
  background: transparent; border: 0; outline: none; resize: none;
  font-family: inherit; font-size: 18px; line-height: 34px;
  color: #241A14;
}
.fin-ok {
  /* 不能用 left:50% + translateX(-50%) 居中 ——
     淡入动画的 transform 会把它覆盖掉，按钮会往右偏半个身位。
     用 left/right + margin:auto 居中，和 transform 无关。 */
  position: absolute;
  left: 0; right: 0; margin: 0 auto;
  top: 700px;
  width: 240px; height: 52px;
  border: 0; border-radius: 8px;
  background: #3A2A1E; color: #F7F1E0;
  font-size: 17px; font-family: inherit;
  cursor: pointer;
}
.fin-hint {
  position: absolute; left: 0; right: 0; top: 782px;
  text-align: center;
  font-size: 12px; color: #9A8E7C;
}

/* ---- 终章的怪题 ---- */
.fqcard {
  position: absolute; inset: 0;
  /* 顶部 26~158 留给对话框（和关内演出同一个位置），题目从 190 起 */
  padding: 190px 40px 0;
  box-sizing: border-box;
}
.fqbar {
  position: absolute; left: 40px; right: 40px; top: 168px;
  height: 4px; border-radius: 2px; background: rgba(242, 234, 221, .16);
  overflow: hidden;
}
.fqbar i { display: block; height: 100%; width: 100%; background: #E8C462; transition: width .1s linear; }
.fqclock {
  position: absolute; right: 40px; top: 178px;
  font-size: 14px; color: #C9BCA6; letter-spacing: 1px;
}
.fqstem {
  margin-top: 14px;
  color: #F2EADD;
  font-size: 18px; line-height: 1.75;
  margin-bottom: 22px;
}
.fqbody { display: flex; flex-direction: column; gap: 10px; }
.fqopt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; min-height: 52px; box-sizing: border-box;
  border-radius: 10px;
  background: rgba(242, 234, 221, .06);
  border: 2px solid rgba(242, 234, 221, .22);
  color: #F2EADD; font-size: 16px; line-height: 1.45;
  text-align: left; font-family: inherit; cursor: pointer;
}
.fqopt i { flex: 0 0 26px; font-style: normal; color: #C9BCA6; }
.fqopt span { flex: 1 1 auto; }
.fqopt.on { background: rgba(232, 196, 98, .18); border-color: #E8C462; }

.fqblank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.fqblank .fqtxt { color: #F2EADD; font-size: 18px; line-height: 1.9; }
.fqin {
  width: 150px; padding: 4px 8px;
  background: transparent;
  border: 0; border-bottom: 1px solid #8A7A62;
  color: #E8C462; font-size: 17px; font-family: inherit;
  outline: none;
  cursor: default;
}
.fqta {
  width: 100%; height: 210px;
  padding: 12px; box-sizing: border-box;
  background: rgba(242, 234, 221, .05);
  border: 1px solid rgba(242, 234, 221, .18);
  border-radius: 8px;
  color: #E8C462; font-size: 14px; line-height: 1.7;
  font-family: inherit; resize: none; outline: none;
  cursor: default;
  user-select: none;
}
.fqorb.urgent { animation: charBob 1.2s ease-in-out infinite; }
.fqorb {
  position: absolute; right: 26px; bottom: 26px;
  width: 48px; height: 48px; image-rendering: pixelated;
  cursor: pointer;
  animation: charBob 3.2s ease-in-out infinite;
}
.fqorbtip {
  position: absolute; right: 84px; bottom: 42px;
  font-size: 12px; color: #C9BCA6;
}

/* ===================================================================
   姓名与学号
   =================================================================== */
.scr-enroll {
  background: linear-gradient(#FDF8EC, #EFE2C6);
}

.enr-title {
  position: absolute; left: 40px; right: 40px; top: 120px;
  font-size: 22px; line-height: 1.5; color: #241A14;
  letter-spacing: 1px;
  text-align: center;
}
.enr-sub {
  position: absolute; left: 40px; right: 40px; top: 196px;
  font-size: 13px; color: #8A7A62; text-align: center;
}

.enr-field {
  position: absolute; left: 44px; right: 44px;
  display: flex; align-items: center;
  height: 56px;
  border-bottom: 2px solid #C9B79A;
  box-sizing: border-box;
}
/* nth-of-type 数的是**同类**元素：两个 label 是第 1、第 2 个 label，
   不是页面上的第 3、第 4 个元素。写成 3/4 会一条都不匹配，于是两栏重叠。 */
.enr-field:nth-of-type(1) { top: 258px; }
.enr-field:nth-of-type(2) { top: 330px; }
.enr-label {
  flex: 0 0 48px;
  font-size: 16px; color: #7A6A55;
}
.enr-input {
  flex: 1 1 auto;
  border: 0; outline: none; background: transparent;
  font-size: 20px; color: #241A14; font-family: inherit;
  letter-spacing: 1px;
}
.enr-input::placeholder { color: #C0B39B; }

.enr-rule {
  position: absolute; left: 44px; top: 420px;
  border: 0; background: transparent; padding: 0;
  font-size: 14px; color: #8B6D2E;
  font-family: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

.enr-next {
  position: absolute; left: 0; right: 0; margin: 0 auto;
  top: 700px;
  width: 240px; height: 52px;
  border: 0; border-radius: 8px;
  background: #3A2A1E; color: #F7F1E0;
  font-size: 17px; font-family: inherit; cursor: pointer;
}
/* ---- 规则弹窗 ---- */
.enr-mask {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(12, 14, 18, .6);
  display: flex; align-items: center; justify-content: center;
}
.enr-card {
  width: 380px;
  padding: 26px 26px 20px;
  border-radius: 12px;
  background: #F7F1E0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  box-sizing: border-box;
}
.enr-card b {
  display: block;
  font-size: 17px; color: #241A14;
  margin-bottom: 14px;
  letter-spacing: 1px;
}
.enr-card p {
  margin: 0 0 10px;
  font-size: 14px; line-height: 1.7; color: #443528;
}
.enr-card em { font-style: normal; color: #B8892E; font-weight: 700; }
.enr-close {
  display: block;
  margin: 8px auto 0;
  width: 160px; height: 44px;
  border: 0; border-radius: 8px;
  background: #3A2A1E; color: #F7F1E0;
  font-size: 15px; font-family: inherit; cursor: pointer;
}

/* ===================================================================
   证书
   =================================================================== */
.scr-cert { background: #1A1A16; }

.cert-box {
  position: absolute; left: 14px; right: 14px; top: 30px;
  display: flex; align-items: center; justify-content: center;
}
.cert-img {
  max-width: 100%; max-height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  /* 长按保存靠的是原生图片菜单，别拦掉 */
  -webkit-touch-callout: default;
}
.cert-lock {
  color: #C9BCA6; font-size: 16px; line-height: 2; text-align: center;
}
.cert-tip {
  position: absolute; left: 0; right: 0; top: 452px;
  text-align: center;
  font-size: 12px; color: #9A8E7C;
}
.cert-back {
  position: absolute; left: 0; right: 0; margin: 0 auto;
  bottom: 44px;
  width: 220px; height: 48px;
  border: 2px solid rgba(242, 234, 221, .55);
  border-radius: 8px;
  background: transparent; color: #F2EADD;
  font-size: 15px; font-family: inherit; cursor: pointer;
}

/* 大地图上的证书入口 */
.map-cert {
  position: absolute; left: 0; right: 0; margin: 0 auto;
  top: 30px;
  width: 180px; height: 44px;
  border: 2px solid #E8C462; border-radius: 8px;
  background: rgba(20, 16, 10, .72);
  color: #E8C462;
  font-size: 15px; font-family: inherit; cursor: pointer;
  z-index: 12;
}

/* 大地图上的排行榜入口（常驻，和证书按钮错开） */
.map-rank {
  position: absolute; right: 18px;
  top: 30px;
  width: 104px; height: 44px;
  border: 2px solid rgba(232, 196, 98, .5); border-radius: 8px;
  background: rgba(20, 16, 10, .72);
  color: #E8C462;
  font-size: 14px; font-family: inherit; cursor: pointer;
  z-index: 12;
}

/* 战绩卡上的名次行（服务端回话之前是空的） */
.rrank {
  margin-top: 8px; min-height: 18px;
  font-size: 13px; color: #E8C462; text-align: center;
}

/* ===================================================================
   排行榜
   =================================================================== */
.scr-rank { background: #0E0C09; color: #F4EAD2; }

.rk-head { position: absolute; left: 0; right: 0; top: 42px; text-align: center; }
.rk-title { font-size: 26px; letter-spacing: 6px; color: #E8C462; }
.rk-sub { margin-top: 10px; font-size: 12px; color: rgba(244, 234, 210, .58); }

.rk-list {
  position: absolute; left: 26px; right: 26px;
  top: 134px; bottom: 116px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.rk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 6px; font-size: 14px;
  border-bottom: 1px solid rgba(244, 234, 210, .08);
}
.rk-no {
  width: 36px; text-align: right; flex: none;
  color: #8A7C63; font-style: normal;
  font-variant-numeric: tabular-nums;
}
.rk-nick { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-pts {
  width: 70px; text-align: right; flex: none; font-style: normal;
  color: #E8C462; font-variant-numeric: tabular-nums;
}
.rk-row.me { background: rgba(232, 196, 98, .12); border-radius: 6px; }
.rk-row.me .rk-no, .rk-row.me .rk-pts { color: #F4EAD2; font-weight: 700; }

.rk-empty {
  padding: 46px 12px; text-align: center;
  color: rgba(244, 234, 210, .58); font-size: 14px; line-height: 1.9;
}
.rk-mine {
  position: absolute; left: 26px; right: 26px; bottom: 106px;
  text-align: center; font-size: 13px; color: #E8C462; min-height: 18px;
}
.rk-back {
  position: absolute; left: 0; right: 0; margin: 0 auto;
  bottom: 44px;
  width: 220px; height: 48px;
  border: 2px solid rgba(242, 234, 221, .55); border-radius: 8px;
  background: transparent; color: #F2EADD;
  font-size: 15px; font-family: inherit; cursor: pointer;
}

/* ===================================================================
   封面（转场动画的容器）
   =================================================================== */
.scr-cover { background: #000; }

.scr-cover .cover-stage {
  position: absolute; inset: 0;
  width: 480px; height: 852px;
}

/* 转场结束后盖一层黑，再切到下一页 */
.cover-fade {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.cover-fade.on { opacity: 1; }

/* 审核模式横幅 */
#reviewBanner {
  position: absolute; right: 10px; top: 8px;
  z-index: 999;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(196, 85, 47, .92);
  color: #FFF7EC;
  font-size: 12px;
  letter-spacing: 1px;
  pointer-events: none;
}