/* =========================================================
   质量安全知识挑战 · 卡通漫画风 v2
   1. 设计令牌（:root 全站引用，换肤只改这里）
   ========================================================= */
:root {
  /* 橙系 */
  --c-orange:#F36B21; --c-orange-deep:#D8540F; --c-orange-soft:#FFE7D3;
  /* 红系 */
  --c-red:#E82E20; --c-red-deep:#C01F12; --c-red-soft:#FDE6E2;
  /* 黄系 */
  --c-yellow:#FFC52F; --c-yellow-deep:#E8A800; --c-yellow-soft:#FFF1C2;
  /* 藏青 */
  --c-navy:#292766; --c-navy-deep:#1B1850; --c-navy-soft:#D9D6EC;
  /* 墨棕（漫画主描边 / 主文字，暖，非纯黑） */
  --c-ink:#2D241F; --c-ink-soft:#5A4A3E;
  /* 暖描线 */
  --c-line:#D8A55C; --c-line-deep:#B9843F;
  /* 背景 / 纸面 */
  --c-bg:#FFF6D8; --c-bg-hero:#FFFDF4; --c-surface:#FFFDF4; --c-surface-alt:#FFF9E6;
  --c-paper:#FFFDF4;
  /* 文字 */
  --c-text:#2D241F; --c-text-2:#5A4A3E; --c-text-3:#9C8A74;
  /* 语义色 */
  --c-success:#178447; --c-success-deep:#0F6B38; --c-success-soft:#DCF2E3;
  --c-danger:#D92D20; --c-danger-deep:#B71B10; --c-danger-soft:#FBE3E0;
  --c-warning-soft:#FFF1C2;
  /* 锁定态 */
  --c-locked:#C9BBA8; --c-locked-bg:#F3E9D6; --c-locked-line:#D8A55C;
  /* 进度轨道 */
  --c-progress-track:#F0E2C4;
  /* 勋章 */
  --c-medal:#FFC52F; --c-medal-deep:#E8A800; --c-medal-ring:#2D241F;
  --c-medal-star:#E82E20; --c-medal-ribbon:#E82E20;
  /* 遮罩 */
  --c-scrim:rgba(45,36,31,.55);
  /* on-* 文字反色 */
  --on-cream:#2D241F; --on-paper:#2D241F; --on-orange:#FFFDF4; --on-red:#FFFDF4;
  --on-yellow:#2D241F; --on-navy:#FFFDF4; --on-success:#FFFDF4; --on-danger:#FFFDF4;
  /* 渐变 */
  --grad-hero:linear-gradient(180deg,#FFFDF4 0%,#FFF0BE 100%);
  --grad-orange:linear-gradient(135deg,#FF8A3D,#F36B21 60%,#D8540F);
  --grad-red:linear-gradient(135deg,#FF5A4D,#E82E20 60%,#C01F12);
  --grad-yellow:linear-gradient(135deg,#FFD95C,#FFC52F 60%,#E8A800);
  --grad-navy:linear-gradient(135deg,#3B3780,#292766 60%,#1B1850);
  --grad-progress:linear-gradient(90deg,#FFC52F,#F36B21);
  --grad-medal:linear-gradient(135deg,#FFE08A,#FFC52F 55%,#E8A800);
  /* 描边宽度阶梯 */
  --bd-1:1px; --bd-2:2px; --bd-3:3px; --bd-4:4px; --bd-6:6px;
  /* 圆角 */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  /* 硬阴影令牌（0 模糊，实色偏移） */
  --shadow-hard-sm:0 3px 0 var(--c-ink);
  --shadow-hard:0 5px 0 var(--c-ink);
  --shadow-hard-press:0 2px 0 var(--c-ink);
  --shadow-card:7px 7px 0 var(--c-yellow);
  --shadow-card-ink:6px 6px 0 var(--c-ink);
  --shadow-modal:0 12px 0 var(--c-ink);
  --shadow-float:0 8px 0 var(--c-navy);
  --shadow-pop:0 6px 0 var(--c-ink);
  /* 排版（纯系统字体，零外链） */
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --fs-display:30px; --fs-h1:24px; --fs-h2:20px; --fs-h3:17px; --fs-body:15px; --fs-small:13px; --fs-micro:11px;
  --fw-body:600; --fw-h:800; --fw-display:900;
  /* 间距 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  /* 层级 */
  --z-base:0; --z-drop:100; --z-sticky:200; --z-modal:300; --z-toast:400; --z-confetti:500;
  /* 动效 */
  --dur-fast:.15s; --dur-base:.2s; --dur-slow:.32s; --dur-pop:.45s; --dur-bounce:.5s;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
}

/* =========================================================
   2. 基础重置与版式
   ========================================================= */
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; margin:0; }

/* 关键兜底：作者样式（如 .modal{display:flex}）会盖掉浏览器对 [hidden] 的默认
   display:none，导致所有弹层在加载时同屏叠显（转盘、结算、提示全部罩在页面上，
   封面被压在底下）。必须用 !important 强制生效 —— 这是唯一可靠写法。 */
[hidden]{ display:none !important; }

body {
  font-family:var(--font-sans);
  color:var(--c-text);
  background:var(--c-bg);
  font-size:var(--fs-body); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0; }
input { font-family:inherit; }
img, svg { display:block; }
ul { margin:0; padding:0; list-style:none; }

.t-display{font-size:var(--fs-display);font-weight:var(--fw-display);line-height:1.2;letter-spacing:.5px;}
.t-h1{font-size:var(--fs-h1);font-weight:var(--fw-h);line-height:1.25;}
.t-h2{font-size:var(--fs-h2);font-weight:var(--fw-h);line-height:1.3;}
.t-h3{font-size:var(--fs-h3);font-weight:700;line-height:1.35;}
.t-body{font-size:var(--fs-body);font-weight:var(--fw-body);line-height:1.55;}
.t-small{font-size:var(--fs-small);font-weight:600;}
.t-micro{font-size:var(--fs-micro);font-weight:700;letter-spacing:.4px;}

/* 漫画描边字 */
.comic-title{
  font-weight:900; color:var(--c-paper);
  -webkit-text-stroke:2.5px var(--c-ink);
  paint-order:stroke fill;
  text-shadow:3px 3px 0 var(--c-red-deep);
}
.comic-sub{
  font-weight:800; color:var(--c-navy);
  -webkit-text-stroke:1.5px var(--c-ink);
  paint-order:stroke fill;
  text-shadow:2px 2px 0 var(--c-yellow);
}
@supports not ((-webkit-text-stroke:1px) or (text-stroke:1px)){
  .comic-title,.comic-sub{ -webkit-text-stroke:0; }
  .comic-title{
    text-shadow:-2px -2px 0 var(--c-ink),2px -2px 0 var(--c-ink),
      -2px 2px 0 var(--c-ink),2px 2px 0 var(--c-ink),0 3px 0 var(--c-red-deep);
  }
  .comic-sub{
    text-shadow:-1.5px -1.5px 0 var(--c-ink),1.5px -1.5px 0 var(--c-ink),
      -1.5px 1.5px 0 var(--c-ink),1.5px 1.5px 0 var(--c-ink),2px 2px 0 var(--c-yellow);
  }
}

/* =========================================================
   3. App 容器与屏幕切换
   ========================================================= */
.app{
  position:relative; width:100%; max-width:480px; margin:0 auto;
  height:100vh; height:100dvh; min-height:100vh;
  background:var(--c-bg); overflow:hidden;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.screen{
  position:absolute; inset:0; display:none; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.screen.active{ display:flex; animation:screenIn var(--dur-slow) var(--ease); }
@keyframes screenIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* =========================================================
   4. 通用组件
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:48px; padding:0 var(--sp-6);
  font-size:16px; font-weight:800; color:var(--on-orange);
  background:var(--grad-orange);
  border:var(--bd-3) solid var(--c-ink); border-radius:var(--r-pill);
  box-shadow:var(--shadow-hard);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  width:100%;
}
.btn:active{ transform:translateY(3px); box-shadow:var(--shadow-hard-press); }
.btn[disabled]{ opacity:.7; pointer-events:none; background:var(--c-locked-bg); color:var(--c-locked); border-color:var(--c-locked-line); box-shadow:none; }
.btn-arrow{ clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%); padding-right:var(--sp-8); }

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 var(--sp-6);
  font-size:15px; font-weight:800; color:var(--c-ink);
  background:var(--c-surface); border:var(--bd-3) solid var(--c-ink);
  border-radius:var(--r-pill); box-shadow:var(--shadow-hard);
  transition:transform var(--dur-fast) var(--ease);
  width:100%;
}
.btn-secondary:active{ transform:translateY(3px); box-shadow:var(--shadow-hard-press); }

.card{
  background:var(--c-surface);
  border:var(--bd-4) solid var(--c-ink);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  box-shadow:var(--shadow-card);
}
.dash-sep{ border-top:var(--bd-2) dashed var(--c-line); margin:var(--sp-4) 0; }

.medal{
  width:72px; height:72px; border-radius:50%;
  background:var(--grad-medal);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-hard-sm);
  border:var(--bd-3) solid var(--c-ink);
  flex:0 0 auto;
}
.medal svg{ width:38px; height:38px; }

.topbar{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-3);
  position:sticky; top:0; z-index:5; background:var(--c-bg);
}
.topbar .title{ flex:1; text-align:center; color:var(--c-text); }
.topbar .spacer,.quiz-head .spacer{ width:44px; flex:0 0 auto; }
.back{
  width:44px;height:44px;border-radius:50%;
  background:var(--c-surface); border:var(--bd-3) solid var(--c-ink);
  display:flex;align-items:center;justify-content:center; color:var(--c-ink);
  flex:0 0 auto; box-shadow:var(--shadow-hard-sm);
}
.back svg{ width:22px; height:22px; }
.back:active{ transform:translateY(2px); box-shadow:var(--shadow-hard-press); }

/* =========================================================
   5. 封面
   ========================================================= */
#screen-cover{
  /* 图按宽度 100% 自然铺满（不缩放变形），左右不会有留白，
     因此背景只作兜底：上移后底部露出的一小条用图内草地同色衔接。
     实测 cover-new.webp 1391×3014 → 390 宽对应 845 高，与 844 屏高几乎相等。 */
  background:#4E8F23;
  justify-content:flex-start;
  overflow:hidden;
}
/* 注意：不要在这里写 position:relative —— #screen-cover 是 ID 选择器，
   会盖掉 .screen 的 position:absolute，导致封面屏塌成内容高度、背景图只露出一条。 */

/* 主视觉：整幅插画按原比例正常铺满，完整不裁切。

   构图实测（cover-new.webp 1391×3014）：标题在 15%~30%，人物 65%~85%，
   其余是天空与底部草地 —— 人物脚底在 86%，86%~100% 是纯草地，按钮放这里。

   关键：底部操作区必须脱离文档流（absolute 浮在图上），
   否则 .cover-stage 只分到约 699px，插画会被压掉底部一大截。

   高度用百分比（% 相对 .cover-stage 自身高度，= 视口高）：
   主机型 390×844 下 width:100% 自然高 845 ≈ 屏高，几乎不露背景；
   矮屏（如 375×667）自然高 812 会超出屏高，用 height:100% 拉回完整显示，
   此时左右会有少量空隙（由草地色背景兜底），换取人物不被裁掉。 */
.cover-stage{
  flex:1; min-height:0; position:relative; z-index:1;
  display:flex; align-items:flex-start; justify-content:center;
  overflow:hidden;
}
.cover-art{
  display:block; width:100%; height:auto;
  /* 整体上移 3%：把标题往屏幕上缘推，脚底落到屏高约 83%，
     按钮与规则条正好落在人物脚下的草地上。上移溢出顶部的是纯色天空，无信息损失。 */
  transform:translateY(-3%);
}
@media (max-height:740px){
  /* 矮屏：按高度适配，优先保证整幅画面与人物完整，左右空隙由背景兜底 */
  .cover-art{ width:auto; height:100%; transform:translateY(-2%); }
}
/* 兼容：若误放文字元素，统一隐藏，避免与图内标题重复 */
.cover-deco,.cover-badge,.cover-title,.comic-sub,.cover-sub,.cover-note{ display:none !important; }

/* 开始按钮：绝对定位在图内标题下方、人物头顶上方。
   图内构图（cover-new.webp 1391×3014）：标题 15%~30%、人物 55%~85%、脚底 86%。
   整体上移 3% 后标题占屏高 12%~27%，人物约自 52% 起 —— 按钮锚在 33% 处
   恰好落在标题与人物之间的天空区域，不遮标题也不压人物。
   用百分比纵向定位：插画按屏宽/屏高等比缩放，图内构图比例随之不变，
   百分比锚点在各种屏型下都能保持「标题下、人物头上」的相对位置。 */
.cover-foot{
  position:absolute; left:0; right:0;
  top:33%;
  z-index:2;
  padding:0 var(--sp-6);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
}

/* 规则速览条已移除：完整规则改在「填写资料」页下方展示（.rules-card） */

/* 通关提示文字：深色底片保证在草地背景上可读 */
.cover-best{
  margin:0 auto; padding:5px 14px; width:max-content; max-width:100%;
  text-align:center; font-size:13px; font-weight:800; color:#fff;
  background:rgba(23,64,143,.72); border-radius:999px;
}
.cover-best[hidden]{ display:none !important; }

/* 封面「开始闯关」按钮：更大更醒目，浮于图底部 */
/* 封面主按钮：明黄实色「长方形」按钮（无描边、无半透明）。
   演进：① .btn-arrow 的 clip-path 切箭头 → border/box-shadow 被一起裁掉（丑的根因，已移除）；
   ② 实色橙 + 深墨描边；③ 半透明毛玻璃（观感偏弱，弃用）；④ 深藏青实色；⑤ 现版明黄。
   配色：明黄（--c-yellow #FFC52F）呼应画面里安全帽/警示标识的黄色，
   在浅蓝天空背景上是补色对比，最抓眼；明黄底必须配深墨字（--c-ink），
   白字在黄底上几乎不可读。
   长方形（14px 小圆角）+ 无描边，靠柔和暖色投影 + 顶部内高光体现层次。 */
.btn-cover-start{
  min-height:56px; padding:0 var(--sp-7);
  font-size:19px; font-weight:900; letter-spacing:3px;
  color:var(--c-ink);
  background:linear-gradient(180deg,#FFDE6B 0%,var(--c-yellow) 55%,var(--c-yellow-deep) 100%);
  border:none;
  border-radius:14px;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  box-shadow:
    0 8px 18px rgba(120,80,0,.34),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.12);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn-cover-start:active{
  transform:translateY(3px);
  box-shadow:
    0 4px 10px rgba(120,80,0,.28),
    inset 0 1px 0 rgba(255,255,255,.45);
}

/* =========================================================
   6. 资料表单
   ========================================================= */
/* 卡片垂直居中：内容不足一屏时落在视觉中心，不再贴顶留大片空白；
   键盘弹起视口变小后 .screen 仍可正常滚动，不影响输入。 */
.form-body{
  padding:0 var(--sp-4) var(--sp-8);
  flex:1; display:flex; flex-direction:column; justify-content:flex-start;
}
.form-card{ margin-top:var(--sp-2); }

/* 资料页活动规则：完整规则在开始答题前展示 */
.rules-card{ margin-top:var(--sp-4); text-align:left; }
.rules-title{
  margin:0 0 var(--sp-2); font-size:17px; font-weight:900; color:var(--c-text);
}
.rules-sec{ margin:var(--sp-3) 0 var(--sp-1); font-size:13px; font-weight:900; color:var(--c-orange-deep); }
.rules-list{
  margin:0; padding-left:18px;
  font-size:12px; line-height:1.7; color:var(--c-text-2);
}
.rules-list li{ margin-bottom:2px; }
.form-eyebrow{
  display:inline-block; background:var(--c-orange-soft); color:var(--c-orange-deep);
  border:var(--bd-2) solid var(--c-line); border-radius:var(--r-pill);
  padding:var(--sp-1) var(--sp-3);
}
.form-title{ margin:var(--sp-3) 0 var(--sp-2); }
.form-desc{ color:var(--c-text-2); margin:0 0 var(--sp-5); }

.field-label{ display:block; font-size:var(--fs-small); font-weight:800; color:var(--c-text); margin-bottom:var(--sp-2); }
.field-label__hint{ font-weight:600; color:var(--c-text-3); }
.text-field{
  position:relative; display:flex; align-items:center;
  background:var(--c-surface-alt); border:var(--bd-3) solid var(--c-ink);
  border-radius:var(--r-md); padding:0 var(--sp-4);
  min-height:52px; box-shadow:var(--shadow-hard-sm);
}
.text-field:focus-within{ border-color:var(--c-orange); background:var(--c-surface); }
.text-field input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-size:16px; font-weight:600; color:var(--c-text); min-height:48px;
}
.text-field input::placeholder{ color:var(--c-text-3); font-weight:600; }
.text-field__count{ font-size:12px; font-weight:700; color:var(--c-text-3); flex:0 0 auto; }
.field-error{ min-height:18px; margin:var(--sp-2) 0 var(--sp-4); font-size:12px; font-weight:700; color:var(--c-danger-deep); }
.field-error:empty{ min-height:0; margin-bottom:var(--sp-2); }
.form-card .btn{ margin-top:var(--sp-2); }

/* =========================================================
   7. 关卡地图
   ========================================================= */
.map-header{ margin:0 var(--sp-4) var(--sp-2); }
.map-stats{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.map-stats .stat{ display:flex; flex-direction:column; gap:2px; align-items:center; flex:1; }
.map-stats .stat .v{ font-size:24px; font-weight:900; color:var(--c-text); }
.map-stats .stat .v.ember{ color:var(--c-orange-deep); }
.map-stats .stat .k{ font-size:12px; color:var(--c-text-3); font-weight:700; }
.map-stats .divider{ width:2px; height:32px; background:var(--c-line); flex:0 0 auto; }
.map-progress-wrap{ margin-top:var(--sp-4); }
.map-progress-label{ display:flex; justify-content:space-between; font-size:12px; color:var(--c-text-2); margin-bottom:var(--sp-2); font-weight:700; }
.track{ height:10px; background:var(--c-progress-track); border:var(--bd-2) solid var(--c-ink); border-radius:var(--r-pill); overflow:hidden; }
.track .fill{ height:100%; background:var(--grad-progress); border-radius:var(--r-pill); width:0; transition:width var(--dur-slow) var(--ease); }

.map-body{
  padding:var(--sp-3) var(--sp-4) var(--sp-2);
  flex:1; min-height:0;
  display:flex; flex-direction:column;
}
/* 地图画布：以 map.png 为底，关卡节点按百分比绝对定位叠加在对应平台上。
   map.png 为 1050×1400（比例 0.75），三个平台圆心在图内的相对位置：
     工伤认定 ≈ (44.8%, 18.9%)   工伤保险 ≈ (25.7%, 39.6%)   工伤预防 ≈ (50.5%, 59.3%)
   节点坐标写成百分比而非像素，换机型时仍落在同一平台上。 */
.map-canvas{
  position:relative; width:100%; flex:0 0 auto;
  border:var(--bd-3) solid var(--c-ink); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-card-ink);
  background:#8FD3F0;
}
.map-art{ display:block; width:100%; height:auto; }
.map-nodes{ position:absolute; inset:0; }

/* 关卡节点：圆形徽章（序号 / 图标）+ 下方信息牌 */
.map-node{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:120px; z-index:2;
}
.map-node .knob{
  position:relative;
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-surface); color:var(--c-ink);
  border:var(--bd-4) solid var(--c-ink);
  box-shadow:0 5px 0 var(--c-ink),0 0 0 5px rgba(255,253,244,.85);
}
.map-node .knob svg{ width:30px; height:30px; }
.map-node .knob .seq{
  position:absolute; top:-6px; left:-6px;
  min-width:24px; height:24px; padding:0 5px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; color:var(--on-yellow);
  background:var(--c-yellow); border:var(--bd-2) solid var(--c-ink);
}
/* 信息牌：关卡名 + 本关得分 + 星级
   底图 map.png 自带同名的白色大字标签，信息牌刻意盖在其上（内容重复，遮住不影响理解），
   因此底色用较高不透明度确保牌内文字清晰、牌外底图仍可辨认。 */
.map-node .plate{
  width:100%; padding:5px 6px 6px; border-radius:var(--r-sm);
  background:rgba(255,253,244,.97);
  border:var(--bd-2) solid var(--c-ink);
  box-shadow:0 3px 0 rgba(45,36,31,.85);
  text-align:center;
}
.map-node .plate .nm{
  display:block; font-size:12px; font-weight:800; color:var(--c-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.map-node .plate .sc{
  display:block; font-size:11px; font-weight:800; color:var(--c-orange-deep); margin-top:1px;
}
.map-node .plate .stars{ display:flex; gap:1px; justify-content:center; margin-top:2px; }
.map-node .plate .stars svg{ width:11px; height:11px; }

.map-node:active .knob{ transform:translateY(3px); box-shadow:0 2px 0 var(--c-ink),0 0 0 5px rgba(255,253,244,.85); }

.map-node.done .knob{ background:var(--c-success); color:var(--on-success); }
.map-node.current .knob{ background:var(--grad-orange); color:var(--on-orange); animation:sway 1.8s var(--ease) infinite; }
.map-node.locked .knob{ color:var(--c-locked); background:var(--c-locked-bg); }
.map-node.locked .plate{ opacity:.9; }
.map-node.locked .plate .nm{ color:var(--c-text-2); }
.map-node.locked .plate .sc{ color:var(--c-text-3); }
@keyframes sway{
  0%,100%{transform:rotate(-4deg) translateY(0);}
  50%{transform:rotate(4deg) translateY(-3px);}
}
.star-dot{ width:12px; height:12px; }
.map-tip{ text-align:center; color:var(--c-text-3); margin:var(--sp-3) 0 0; }
.map-foot{ padding:var(--sp-3) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom)); }
.map-locked-tip{ text-align:center; color:var(--c-text-3); margin:var(--sp-2) 0 0; }
.map-locked-tip b{ color:var(--c-orange-deep); }

/* =========================================================
   8. 答题页
   ========================================================= */
.quiz-top{ padding:var(--sp-4) var(--sp-4) var(--sp-2); position:sticky; top:0; z-index:5; background:var(--c-bg); }
.quiz-head{ display:flex; align-items:center; gap:var(--sp-3); }
.quiz-head-text{ flex:1; min-width:0; }
.quiz-head-text .lv{ display:block; color:var(--c-orange-deep); }
.quiz-head-text .pos{ display:block; color:var(--c-text-3); margin-top:2px; }

/* 倒计时：常态黄色警示牌，剩余 20 秒内转红并轻微跳动，制造紧迫感 */
.quiz-timer{
  flex:0 0 auto; display:flex; align-items:baseline; gap:3px;
  padding:6px 11px; border-radius:var(--r-pill);
  background:var(--c-yellow-soft); border:var(--bd-3) solid var(--c-ink);
  box-shadow:var(--shadow-hard-sm);
}
.quiz-timer .t-label,.quiz-timer .t-unit{ color:var(--c-ink-soft); }
.quiz-timer .t-value{ color:var(--c-orange-deep); font-variant-numeric:tabular-nums; }
.quiz-timer.is-urgent{ background:var(--c-danger-soft); border-color:var(--c-danger); animation:timerBeat 1s var(--ease) infinite; }
.quiz-timer.is-urgent .t-value{ color:var(--c-danger-deep); }
.quiz-timer.is-urgent .t-label,.quiz-timer.is-urgent .t-unit{ color:var(--c-danger-deep); }
@keyframes timerBeat{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
@media (prefers-reduced-motion:reduce){ .quiz-timer.is-urgent{ animation:none; } }

.quiz-dots{ display:flex; gap:var(--sp-2); margin-top:var(--sp-3); flex-wrap:wrap; }
.quiz-dots .d{ width:10px;height:10px;border-radius:50%;background:var(--c-surface-alt);border:2px solid var(--c-line); }
.quiz-dots .d.on{ background:var(--c-orange); border-color:var(--c-ink); }
.quiz-dots .d.passed{ background:var(--c-navy); border-color:var(--c-ink); }

/* 得分条：本关得分 + 三关总分 */
.quiz-scorebar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  margin-top:var(--sp-3); padding:7px var(--sp-3);
  background:var(--c-surface); border:var(--bd-2) solid var(--c-line); border-radius:var(--r-pill);
  font-size:12px; font-weight:700; color:var(--c-text-2);
}
.quiz-scorebar b{ color:var(--c-orange-deep); font-size:14px; font-weight:900; font-variant-numeric:tabular-nums; }

.quiz-body{ padding:var(--sp-2) var(--sp-4) var(--sp-8); flex:1; }
.q-card{ padding:var(--sp-5); }
/* 题型 + 分值标签 */
.q-meta{ display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.q-type,.q-score{
  padding:3px 10px; border-radius:var(--r-pill);
  font-size:11px; font-weight:800;
  border:var(--bd-2) solid var(--c-ink);
}
.q-type{ background:var(--c-navy); color:var(--on-navy); }
.q-type.multi{ background:var(--c-red); color:var(--on-red); }
.q-type.judge{ background:var(--c-success); color:var(--on-success); }
.q-score{ background:var(--c-yellow); color:var(--on-yellow); }
.q-figure{ margin:0 0 var(--sp-4); border:var(--bd-3) solid var(--c-ink); border-radius:var(--r-md); overflow:hidden; background:var(--c-surface-alt); }
.q-figure img{ width:100%; height:auto; }
.q-text{ margin:0; }
.options{ display:flex; flex-direction:column; gap:var(--sp-3); }
.option{
  position:relative; display:flex; align-items:flex-start; gap:var(--sp-3);
  min-height:52px; padding:var(--sp-3) var(--sp-4);
  text-align:left; font-size:15px; font-weight:600; line-height:1.45;
  background:var(--c-surface-alt); color:var(--c-text);
  border:var(--bd-3) solid var(--c-ink); border-radius:var(--r-md);
  box-shadow:var(--shadow-hard-sm);
  animation:option-pop var(--dur-pop) var(--ease-bounce) both;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-base) var(--ease);
}
.option .badge{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900; color:var(--c-paper);
  background:var(--c-ink); margin-top:1px;
}
.option .text{ flex:1; min-width:0; }
.option:active{ transform:translateY(2px); }
/* 多选「已勾选待确认」态：与已判定的 .selected/.correct/.wrong 区分开，
   底部再加一个「多选」角标，让用户清楚还有确认动作没做。 */
.option.picked{ border-color:var(--c-orange); background:var(--c-orange-soft); }
.option.picked .badge{ background:var(--c-orange); }
.option.picked::after{
  content:"已选"; position:absolute; top:-9px; right:-6px;
  padding:1px 7px; border-radius:var(--r-pill);
  font-size:10px; font-weight:800; color:var(--on-orange);
  background:var(--c-orange); border:var(--bd-2) solid var(--c-ink);
}
.option.selected{ border-color:var(--c-orange); background:var(--c-orange-soft); }
.option.correct{ border-color:var(--c-success); background:var(--c-success-soft); }
.option.wrong{ border-color:var(--c-danger); background:var(--c-danger-soft); }
.option[disabled]{ pointer-events:none; opacity:.92; }
.option .stamp{
  position:absolute; top:-10px; right:-10px; width:34px; height:34px; border-radius:50%;
  display:none; place-items:center; font-weight:900; font-size:20px; color:var(--c-paper);
  border:var(--bd-3) solid var(--c-ink); transform:rotate(-12deg); box-shadow:var(--shadow-hard-sm);
}
.option.correct .stamp{ display:grid; background:var(--c-success); }
.option.wrong .stamp{ display:grid; background:var(--c-danger); }
@keyframes option-pop{
  0%{opacity:0; transform:scale(.76) rotate(-3deg);}
  60%{opacity:1; transform:scale(1.04) rotate(2deg);}
  100%{opacity:1; transform:scale(1) rotate(0);}
}
.analysis{
  margin-top:var(--sp-4); padding:var(--sp-4);
  background:var(--c-surface); border:var(--bd-3) dashed var(--c-line); border-radius:var(--r-md);
}
.analysis-tag{
  display:inline-block; background:var(--c-navy); color:var(--on-navy);
  border-radius:var(--r-pill); padding:2px var(--sp-3); margin-bottom:var(--sp-2);
}
.analysis-text{ margin:0; color:var(--c-text-2); }
.quiz-nav{ display:flex; gap:var(--sp-3); margin-top:var(--sp-5); }
.quiz-hint{ text-align:center; color:var(--c-text-3); margin:var(--sp-4) 0 0; }

/* =========================================================
   9. 弹层 / 转盘 / Toast / 彩带
   ========================================================= */
.scrim{ position:fixed; inset:0; background:var(--c-scrim); z-index:var(--z-modal); }
.modal{ position:fixed; inset:0; z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; padding:var(--sp-5); }
.modal-card{
  position:relative; width:100%; max-width:360px;
  background:var(--c-surface); border:var(--bd-6) solid var(--c-orange);
  border-radius:var(--r-xl); box-shadow:var(--shadow-modal);
  padding:var(--sp-6) var(--sp-5) var(--sp-5); text-align:center;
  max-height:88vh; overflow-y:auto;
  animation:completion-pop var(--dur-bounce) var(--ease-bounce) both;
}
@keyframes completion-pop{
  0%{opacity:0; transform:translateY(24px) scale(.9);}
  70%{opacity:1; transform:translateY(-6px) scale(1.03);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
.modal-close{
  position:absolute; top:var(--sp-2); right:var(--sp-2);
  width:36px; height:36px; border-radius:50%;
  background:var(--c-surface-alt); border:var(--bd-2) solid var(--c-ink);
  display:flex; align-items:center; justify-content:center; color:var(--c-ink);
}
.modal-close svg{ width:18px; height:18px; }
.bubble-wrap{ margin-bottom:var(--sp-4); }
.bubble{
  display:inline-block; background:var(--c-red); color:var(--c-paper);
  border:var(--bd-3) solid var(--c-ink); border-radius:var(--r-lg);
  padding:var(--sp-2) var(--sp-5); box-shadow:var(--shadow-card-ink);
  -webkit-text-stroke:2px var(--c-ink); paint-order:stroke fill;
  text-shadow:2px 2px 0 var(--c-red-deep); position:relative;
  font-size:22px; font-weight:900;
}
.bubble.fail{ background:var(--c-navy); text-shadow:2px 2px 0 var(--c-yellow); }
.medal-wrap{ display:flex; justify-content:center; margin:var(--sp-2) 0 var(--sp-4); }
.result-line{ margin:0 0 var(--sp-1); }
.result-sub{ margin:0 0 var(--sp-5); color:var(--c-text-2); }
.modal-actions{ display:flex; flex-direction:column; gap:var(--sp-3); }

/* 抽奖结果弹层：每次转完在转盘之上弹出，明确告知本次结果 */
.prize-card{ max-width:300px; }
.prize-emoji{
  font-size:56px; line-height:1;
  margin-bottom:var(--sp-3);
  animation:prize-pop var(--dur-bounce) var(--ease-bounce) both;
}
@keyframes prize-pop{
  0%{ transform:scale(.3) rotate(-14deg); opacity:0; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}
.prize-name{
  margin:var(--sp-2) 0;
  color:var(--c-red-deep);
  -webkit-text-stroke:1.5px var(--c-ink); paint-order:stroke fill;
}
.prize-tip{ color:var(--c-text-2); margin-bottom:var(--sp-5); }

/* ===== 屏幕 5 · 中奖详情页 ===== */
#screen-prize{ justify-content:flex-start; }
.prize-page{
  width:100%; padding:var(--sp-6) var(--sp-5) var(--sp-6);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  text-align:center; overflow-y:auto;
}
.prize-page .prize-emoji{ font-size:64px; line-height:1; }
.prize-headline{
  font-size:26px; color:var(--c-red);
  -webkit-text-stroke:2px var(--c-ink); paint-order:stroke fill;
  text-shadow:2px 2px 0 var(--c-red-deep);
}
.prize-page .prize-sub{ color:var(--c-text-2); }
.prize-card-big{
  width:100%; text-align:left;
  display:flex; flex-direction:column; gap:var(--sp-3);
  background:var(--c-surface);
}
.pc-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); }
.pc-k{ color:var(--c-text-3); flex:none; }
.pc-v{ text-align:right; word-break:break-all; }
.pc-row .pc-v.t-h2{ color:var(--c-red-deep); }
.prize-note{ text-align:left; background:var(--c-surface-alt); }
.prize-foot{ width:100%; margin-top:var(--sp-2); }

/* 最终成绩卡：仅三关全部交卷后展示，承载总分 / 星级 / 称号 / 抽奖门槛 */
.result-final{
  margin:0 0 var(--sp-5); padding:var(--sp-4);
  background:var(--c-surface-alt);
  border:var(--bd-3) solid var(--c-ink); border-radius:var(--r-lg);
  box-shadow:var(--shadow-hard-sm);
}
.result-final[hidden]{ display:none !important; }
.rf-row{ display:flex; align-items:center; justify-content:space-around; gap:var(--sp-3); }
.rf-cell{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; }
.rf-cell .rf-v{ color:var(--c-orange-deep); font-variant-numeric:tabular-nums; }
.rf-cell .rf-k{ color:var(--c-text-3); }
.rf-title{
  margin-top:var(--sp-3); padding:6px; border-radius:var(--r-pill);
  text-align:center; font-size:16px; font-weight:900; color:var(--on-yellow);
  background:var(--grad-yellow); border:var(--bd-3) solid var(--c-ink);
  box-shadow:var(--shadow-hard-sm);
}
.rf-lottery{ margin:var(--sp-3) 0 0; text-align:center; color:var(--c-text-2); }
.rf-lottery.ok{ color:var(--c-success-deep); font-weight:800; }
.rf-lottery.no{ color:var(--c-text-3); }

.lottery-card .lottery-title{ margin:0 0 var(--sp-4); }
.wheel-stage{
  position:relative; width:min(78vw,320px); aspect-ratio:1/1; margin:0 auto var(--sp-4);
}
.wheel-pointer{
  position:absolute; left:50%; top:-6px; transform:translateX(-50%);
  width:0; height:0; z-index:3;
  border-left:14px solid transparent; border-right:14px solid transparent;
  border-top:24px solid var(--c-red);
  filter:drop-shadow(0 2px 0 var(--c-ink));
}
.wheel-rotor{
  position:absolute; inset:0; border-radius:50%;
  /* 这里刻意不加 border / box-shadow：转子整体带 transform:rotate，
     描边与硬阴影会跟着一起转，看起来像「外圈黑环不是固定圆」且转动时很突兀。
     固定外框改由 .wheel-stage::after 承担（不参与旋转）。 */
  overflow:hidden;
}
/* 固定外框：转盘的圆形边界。
   必须挂在不旋转的 .wheel-stage 上——挂在 .wheel-rotor 上会跟着盘面转，
   转动时外圈「不是固定圆」，观感突兀。
   同时它还是可读性必需：白色扇区（#FFFDF4）与弹层卡片背景同色，
   没有这圈边界时白扇区会「隐形」，转盘看起来像几片花瓣散落在白底上。 */
.wheel-stage::after{
  content:""; position:absolute; inset:0; z-index:4;
  border-radius:50%; pointer-events:none;
  border:5px solid var(--c-ink);
  box-shadow:0 6px 0 rgba(45,36,31,.22);
}
.wheel-rotor.is-spinning{ transition:transform 5s cubic-bezier(.17,.67,.28,1); }
.wheel-face{ position:absolute; inset:0; border-radius:50%; }
/* 扇区文字单元：占满整个转盘后旋转，使内部文字沿圆周分布。
   与项目 work-injury-quiz（26-9-15）保持一致的实现。 */
.wheel-cell{
  position:absolute; inset:0;
  transform-origin:50% 50%;
}
/* 扇区文字：固定在单元顶部居中，随单元旋转后自然落在扇区外圈。
   关键点——label【不做反向旋转】：若反向抵消扇区角度，文字会被强行摆平，
   在 45° 斜扇区里反而与格子走向错位；跟随扇区旋转后文字沿切线分布，
   与扇形走向一致，这才是大转盘的常规观感。
   top 取贴近外缘的固定值（约 0.15R 外圈带），8 格 45° 间隔下相邻文字弦距
   约 87px，15px 字号最长 5 字（约 75px）不会互相压叠。 */
.wheel-label{
  position:absolute; top:22px; left:50%;
  color:var(--c-ink);
  font-size:15px; font-weight:900;
  white-space:nowrap;
  transform:translateX(-50%);
}
.wheel-label.is-cash{ color:var(--c-red-deep); }
.wheel-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:78px; height:78px; border-radius:50%; z-index:2;
  background:var(--grad-red); color:var(--on-red);
  border:var(--bd-4) solid var(--c-ink); box-shadow:var(--shadow-hard-sm);
  font-size:17px; font-weight:900;
}
/* 呼吸光圈：白色圆环从按钮边缘向外扩散消散，与封面「开始闯关」按钮呼应。
   放在 ::after 上做 scale 动画，不占用 box-shadow，按压/禁用态互不干扰。 */
.wheel-center::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:3px solid rgba(255,255,255,.8);
  animation:centerRing 2.2s ease-out infinite;
  pointer-events:none;
}
@keyframes centerRing{
  0%   { transform:scale(.92); opacity:.9; }
  70%  { transform:scale(1.28); opacity:0; }
  100% { transform:scale(1.28); opacity:0; }
}
.wheel-center[disabled]::after{ animation:none; opacity:0; }
.wheel-center:active{ transform:translate(-50%,calc(-50% + 3px)); box-shadow:var(--shadow-hard-press); }
.wheel-center[disabled]{ background:var(--c-locked-bg); color:var(--c-locked); border-color:var(--c-locked-line); }
.lottery-hint{ color:var(--c-text-2); margin:0 0 var(--sp-2); }
.lottery-remaining{ margin:0 0 var(--sp-2); color:var(--c-orange-deep); }
.lottery-result{ min-height:22px; margin:0; color:var(--c-navy); font-weight:800; }

.toast{
  position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom));
  transform:translate(-50%,12px); z-index:var(--z-toast);
  max-width:76vw; padding:var(--sp-3) var(--sp-5);
  background:var(--c-surface); color:var(--c-text);
  border:var(--bd-3) solid var(--c-ink); border-radius:var(--r-pill);
  box-shadow:var(--shadow-float); font-size:14px; font-weight:700;
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

.confetti-layer{ position:fixed; inset:0; pointer-events:none; z-index:var(--z-confetti); overflow:hidden; }
.confetti{
  position:absolute; width:10px; height:14px; background:var(--c-yellow);
  border:2px solid var(--c-ink); animation:confetti 1.2s var(--ease) forwards;
}
.confetti.r{ background:var(--c-red); }
.confetti.o{ background:var(--c-orange); }
.confetti.n{ background:var(--c-navy); }
@keyframes confetti{
  0%{ transform:translateY(-10px) rotate(0); opacity:1; }
  100%{ transform:translateY(420px) rotate(320deg); opacity:0; }
}

/* =========================================================
   10. 降级与响应式
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .btn:active{ transform:translateY(2px); }
  .wheel-rotor.is-spinning{ transition:none; }
}
@media (min-width:640px){
  :root{ --fs-display:34px; }
  .app{ box-shadow:var(--shadow-card-ink); }
}