:root{
  --paper:#F4ECD8;
  --paper-card:#FBF6EA;
  --paper-deep:#EFE3C8;
  --ink:#2B2B2B;
  --ink-soft:#7A6F5D;
  --seal:#9E2B25;
  --seal-soft:#B5462F;
  --jade:#3E5C5C;
  --gold:#B08D57;
  --line:#E0D4B8;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
  font-size:16px;
  line-height:1.7;
}
.kai{ font-family:"STKaiti","KaiTi","Kaiti SC","Noto Serif SC",serif; }

.app{
  max-width:600px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}

.view{ padding:16px 16px 0; }

/* 卡片 */
.card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 4px 14px rgba(120,90,40,0.06);
}

/* 轮次完成提示条 */
.banner{
  margin:0 0 14px; padding:12px 16px;
  background:linear-gradient(135deg,var(--seal),var(--seal-soft));
  color:#FCF6EA; border-radius:12px;
  font-size:14px; letter-spacing:1px; line-height:1.5;
  box-shadow:0 6px 14px rgba(158,43,37,0.25);
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }

/* 顶栏 */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 6px 14px;
}
.brand-mini{ font-size:20px; color:var(--ink); letter-spacing:3px; }
.stat{ font-size:13px; color:var(--ink-soft); white-space:nowrap; }
.stat-sep{ margin:0 8px; color:var(--line); }
.stat-item{ color:var(--seal); }

/* 设置卡：难度 + 跳至条文 */
.setup{ padding:14px 16px; margin-bottom:14px; }
.setup-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.setup-title{ font-size:16px; color:var(--ink); }
.setup-pct{ font-size:13px; color:var(--seal); }

.levels{ display:flex; gap:6px; }
.lv{
  flex:1; height:42px; line-height:42px; text-align:center;
  font-size:16px; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  cursor:pointer; user-select:none;
}
.lv.on{
  color:#FCF6EA; background:linear-gradient(135deg,var(--seal),var(--seal-soft));
  border-color:transparent; font-weight:600;
  box-shadow:0 4px 10px rgba(158,43,37,0.22);
}

.setup-divider{ height:1px; background:var(--line); margin:14px 0; }
.jump-inline{ display:flex; align-items:center; gap:10px; }
.jump-label{ font-size:15px; color:var(--ink); white-space:nowrap; }
.jump-input{
  flex:1; min-width:0; height:42px; padding:0 12px;
  font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:10px; outline:none;
}
.jump-input:focus{ border-color:var(--jade); }
.jump-go{ flex:0 0 auto; width:76px; height:42px; line-height:40px; }

/* 条文卡片（主体） */
.passage-card{ padding:20px 20px 22px; margin-bottom:14px; }
.pc-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.pc-id{ font-size:16px; color:var(--gold); letter-spacing:1px; }
.pc-progress{ font-size:13px; color:var(--ink-soft); }

.passage{
  font-size:23px; line-height:2.25; color:var(--ink);
  letter-spacing:1px; word-break:break-word;
}
.ch{ display:inline; }

.blank{
  display:inline-block;
  width:27px; height:36px;
  margin:0 2px; padding:0;
  text-align:center; vertical-align:middle;
  font-family:inherit; font-size:23px; line-height:36px;
  color:var(--seal);
  border:none; border-bottom:2px solid var(--seal);
  background:transparent; outline:none;
}
.blank:focus{ border-bottom-color:var(--jade); }
.blank.revealed{ color:var(--jade); border-bottom:2px dashed var(--jade); }
.blank.ok{ color:var(--jade); border-bottom:2px solid var(--jade); }
.blank.locked{ background:rgba(62,92,92,0.08); border-radius:4px; cursor:default; }
.blank.no{ color:var(--seal); border-bottom:2px solid var(--seal); }
/* 提示过的空：提交后算错误，保留朱砂色 + 虚线下划线，与答错区分 */
.blank.no.revealed{ border-bottom:2px dashed var(--seal); }

.trad{
  margin-top:14px; padding-top:12px;
  border-top:1px dashed var(--line);
  font-size:18px; line-height:1.9; color:var(--ink-soft);
}

/* 结果（单行版式：r-row 与 r-score 左右分列） */
.result{
  padding:14px 18px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:space-between;
}
.r-row{ display:flex; align-items:center; flex-wrap:wrap; }
.r-ic{ width:28px; height:28px; margin-right:10px; flex:0 0 auto; }
.r-text{ font-size:15px; color:var(--ink); white-space:nowrap; }
.r-text .hl{ color:var(--seal); font-weight:600; }
.r-score{ font-size:20px; color:var(--seal); letter-spacing:2px; white-space:nowrap; }
/* 提示标签：与「正确 / 准确率」拉开间距，中间加一条淡竖线分隔 */
.r-hint{
  margin-left:14px;
  padding-left:20px;
  border-left:1px solid var(--line);
  font-size:13px; color:var(--ink-soft); white-space:nowrap;
}
.r-hint .hl-warn{ color:var(--seal); font-weight:600; }
@media (max-width:360px){
  .r-hint{ margin-left:8px; padding-left:12px; }
}

/* 操作按钮（底部四按钮一排：提示 / 繁体对照 / 提交判分 / 下一条） */
.actions{ display:flex; gap:10px; margin-bottom:18px; }
.act{
  flex:1; height:54px; font-size:16px;
  padding:0; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none; font-family:inherit;
  transition:transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
.act:active{ transform:translateY(1px); }
.btn-primary{
  background:linear-gradient(135deg,var(--seal),var(--seal-soft));
  color:#FCF6EA; letter-spacing:3px;
  box-shadow:0 6px 14px rgba(158,43,37,0.25);
}
.btn-ghost{
  background:var(--paper-deep); color:var(--seal);
  border:1px solid var(--line); letter-spacing:1px;
}
/* 下一条：主操作，提交前禁用置灰 */
.btn-next{ flex-direction:column; gap:2px; padding:5px 0; }
.btn-next .next-ic{ width:18px; height:18px; margin:0; }
.next-txt{ letter-spacing:2px; font-size:16px; line-height:1.1; }
.next-sub{ font-size:11px; color:rgba(252,246,234,0.9); letter-spacing:1px; line-height:1; }
.act:disabled{
  opacity:.4; box-shadow:none; cursor:default; transform:none;
}

/* 右侧悬浮提示按钮 */
.fab-hint{
  position:fixed;
  right:14px; top:50%;
  transform:translateY(-50%);
  z-index:40;
  width:58px; height:58px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,var(--seal),var(--seal-soft));
  color:#FCF6EA;
  font-family:inherit; font-size:16px; letter-spacing:2px;
  box-shadow:0 6px 16px rgba(158,43,37,0.35);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.fab-hint:active{ transform:translateY(-50%) scale(0.93); }
.fab-hint:disabled{
  opacity:.35; box-shadow:none; cursor:default;
}
@media (max-width:360px){
  .fab-hint{ right:10px; width:52px; height:52px; font-size:15px; }
}
/* 未答题（焦点不在填空上）时隐藏 */
.fab-hint.hidden{ display:none; }

/* 我的进度 */
.me-card{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; margin-bottom:14px;
  background:linear-gradient(135deg,#FBF6EA,#F0E2C6);
  border:1px solid var(--gold);
}
.me-rank-num{ font-size:22px; color:var(--seal); letter-spacing:1px; }
.me-rank-sub{ display:block; font-size:13px; color:var(--ink-soft); margin-top:4px; }
.me-score{ text-align:right; }
.me-score-num{ font-size:34px; color:var(--seal); font-weight:600; }
.me-score-unit{ font-size:13px; color:var(--ink-soft); margin-left:4px; }

.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.stat-tile{ padding:16px; text-align:center; }
.st-num{ display:block; font-size:26px; color:var(--seal); }
.st-label{ display:block; font-size:13px; color:var(--ink-soft); margin-top:4px; }

.cover-card{ padding:16px 18px; margin-bottom:18px; }
.cv-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.cv-title{ font-size:16px; color:var(--ink); }
.cv-sub{ font-size:13px; color:var(--ink-soft); }
.cv-bar{ height:10px; background:var(--paper-deep); border-radius:6px; overflow:hidden; }
.cv-fill{ height:100%; width:0; background:linear-gradient(135deg,var(--jade),var(--gold)); transition:width .3s; }

.reset{ width:100%; margin-top:4px; }

/* 底部导航 */
.tabbar{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; justify-content:center;
  background:var(--paper-deep);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  z-index:10;
}
.tab{
  width:280px; max-width:50%;
  display:flex; flex-direction:column; align-items:center;
  padding:8px 0 6px;
  color:var(--ink-soft); font-size:12px;
  background:transparent; border:none; cursor:pointer;
  position:relative; font-family:inherit;
}
.tab.active{ color:var(--seal); }
.tab.active::before{
  content:""; position:absolute; top:0; left:35%; right:35%;
  height:3px; border-radius:2px; background:var(--seal);
}
.tab .icon-book,.tab .icon-rank{ width:24px; height:24px; margin-bottom:2px; }

/* 内联 SVG 图标（与小程序 icon.wxss 同源，非 Emoji） */
.icon-book{width:24px;height:24px;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzMTJDIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgNSBDOSAzIDUgMyA0IDQgVjE5IEM1IDE4IDkgMTggMTIgMjAgQzE1IDE4IDE5IDE4IDIwIDE5IFY0IEMxOSAzIDE1IDMgMTIgNSBaIi8+PHBhdGggZD0iTTEyIDUgVjIwIi8+PC9zdmc+") no-repeat center/100% 100%;display:inline-block;vertical-align:middle;}
.icon-rank{width:24px;height:24px;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzMTJDIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOCA0IEgxNiBWOCBBNCA0IDAgMCAxIDggOCBaIi8+PHBhdGggZD0iTTggNiBINSBWOCBBMyAzIDAgMCAwIDggMTEiLz48cGF0aCBkPSJNMTYgNiBIMTkgVjggQTMgMyAwIDAgMSAxNiAxMSIvPjxwYXRoIGQ9Ik0xMiAxMiBWMTUiLz48cGF0aCBkPSJNOSAxOSBIMTUiLz48cGF0aCBkPSJNMTAgMTUgSDE0IFYxOSBIMTAgWiIvPjwvc3ZnPg==") no-repeat center/100% 100%;display:inline-block;vertical-align:middle;}
.icon-hint{width:24px;height:24px;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzMTJDIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSAxOCBITTE1Ii8+PHBhdGggZD0iTTEwIDIxIEgxNCIvPjxwYXRoIGQ9Ik0xMiAzIGE2IDYgMCAwIDEgNCAxMCBjLTEgMSAtMSAyIC0xIDMgSC05IGMwIC0xIDAgLTIgLTEgLTMgYTYgNiAwIDAgMSA0IC0xMCBaIi8+PC9zdmc+") no-repeat center/100% 100%;display:inline-block;vertical-align:middle;}
.icon-dice{width:24px;height:24px;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzMTJDIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSI0IiB5PSI0IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHJ4PSIzIi8+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iOSIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iOSIgY3k9IjE1IiByPSIxLjMiLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxLjMiLz48L3N2Zz4=") no-repeat center/100% 100%;display:inline-block;vertical-align:middle;}
.icon-check{width:28px;height:28px;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOUEyQjI1IiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI5Ii8+PHBhdGggZD0iTTggMTIgTDExIDE1IEwxNiA5Ii8+PC9zdmc+") no-repeat center/100% 100%;display:inline-block;vertical-align:middle;}
.icon-next{width:24px;height:24px;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzMTJDIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik01IDEyIEgxOSIvPjxwYXRoIGQ9Ik0xMyA2IEwxOSAxMiBMMTMgMTgiLz48L3N2Zz4=") no-repeat center/100% 100%;display:inline-block;vertical-align:middle;}