/* LawLearn · 手机优先
 * 设计前提：主要在手机上玩，竖屏、单手、拇指落在屏幕下半部。
 * 所有可点区域 ≥ 48px 高；不留 hover 依赖；不靠放大缩小。
 */
:root{
  color-scheme: dark;
  --bg:#0d1013; --panel:#151a1f; --line:#232a31;
  --ink:#e8e6e0; --dim:#8b949e; --ok:#3fb950; --bad:#f85149; --accent:#d29922;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100dvh; background:var(--bg); color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.7; overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; touch-action:manipulation; user-select:none}

/* 顶部固定：标题 + 进度 + 关卡点阵，滚动时不丢进度 */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(13,16,19,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
}
.topbar .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.topbar h1{margin:0; font-size:18px; letter-spacing:.5px; flex:0 0 auto}
.row-right{display:flex; align-items:center; gap:8px; min-width:0}
.small{font-size:12px; color:var(--dim); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar{height:5px; background:#1b2127; border-radius:99px; overflow:hidden; margin:8px 0 10px}
#barFill{height:100%; width:0; background:linear-gradient(90deg,#2f81f7,var(--accent)); transition:width .35s}

/* 顶栏里的小按钮：随时能查全部法条 */
.mini{
  flex:0 0 auto; min-height:44px; padding:6px 12px; border-radius:12px;
  background:#1b2127; border:1px solid var(--line); color:#79c0ff;
  font-size:13px; cursor:pointer;
}
.mini:active{background:#232a31}

/* 关卡点阵：一行横向滚动，不换行——吸顶头部永远只占两行高度 */
.levels{
  display:flex; gap:6px; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:1px 0 2px; margin:0 -14px; padding-left:14px; padding-right:14px;
}
.levels::-webkit-scrollbar{display:none}
.dot{
  flex:0 0 auto; min-width:40px; height:40px; border-radius:12px;
  border:1px solid var(--line); background:var(--panel); color:var(--dim);
  font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.dot:active{transform:scale(.94)}
.dot.done{background:#10331a; border-color:#1f6f34; color:#7ee787}
.dot.locked{opacity:.4}
.dot.current{border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 2px rgba(210,153,34,.18)}

main{max-width:560px; margin:0 auto; padding:16px 14px calc(24px + env(safe-area-inset-bottom))}

.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px}
.card h2{margin:10px 0 12px; font-size:18px; line-height:1.45}
.meta{display:flex; gap:8px}
.tag{font-size:12px; padding:2px 9px; border-radius:99px; background:#1f6feb22; color:#79c0ff; border:1px solid #1f6feb44}
.tag.dim{background:#232a31; color:var(--dim); border-color:var(--line)}
.scene{margin:0 0 14px; color:#cfd6dd; background:#0f141a; border-left:3px solid var(--accent); padding:12px 14px; border-radius:0 10px 10px 0}

/* 选项：竖排大按钮，拇指能够到 */
.options{display:grid; gap:10px}
.opt{
  width:100%; min-height:56px; text-align:left; padding:14px 16px;
  border-radius:14px; background:#0f141a; border:1px solid var(--line); color:var(--ink);
  font-size:16px; line-height:1.6; cursor:pointer; transition:background .15s, border-color .15s;
}
.opt:active{background:#121a22}
.opt.ok{border-color:var(--ok); background:#0f2417}
.opt.bad{border-color:var(--bad); background:#2a1214}
.opt:disabled{cursor:default}
.opt .ix{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-right:8px; border-radius:6px; background:#1b2127; color:var(--dim); font-size:13px; vertical-align:1px}

.feedback{margin-top:14px; padding:12px 14px; border-radius:12px; font-size:15px}
.feedback.ok{background:#0f2417; border:1px solid #1f6f34}
.feedback.bad{background:#2a1214; border:1px solid #6b2226}
.feedback b{display:block; margin-bottom:4px; color:var(--accent)}
.lesson{margin-top:8px; color:#cfd6dd}

/* 主按钮：整宽、够高、落在拇指区 */
.primary{
  margin-top:16px; width:100%; min-height:52px; border-radius:14px; cursor:pointer;
  background:linear-gradient(90deg,#1f6feb,#2f81f7); color:#fff; border:0;
  font-size:17px; font-weight:600;
}
.primary:active{filter:brightness(.92)}

/* ---------- 法条原文 ---------- */
.lawbox{margin-top:18px; border-top:1px solid var(--line); padding-top:12px}
.lawbox-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:13px; color:var(--dim); margin-bottom:8px}
.lawlist{display:grid; gap:8px}

.lawitem{border:1px solid var(--line); border-radius:12px; background:#0f141a; overflow:hidden}
.lawhead{
  width:100%; min-height:48px; display:flex; align-items:center; gap:8px;
  padding:12px 14px; background:none; border:0; color:var(--ink);
  font-size:15px; text-align:left; cursor:pointer;
}
.lawhead:active,.lawhead.open{background:#121a22}
.lawname{
  flex:0 0 auto; font-size:12px; padding:2px 8px; border-radius:99px;
  background:#1f6feb1f; color:#79c0ff; border:1px solid #1f6feb44;
}
.lawart{flex:1 1 auto; font-size:14px; color:var(--ink); min-width:0}
.lawhint{flex:0 0 auto; font-size:12px; color:var(--dim)}
.lawbody{padding:0 14px 14px}
.lawtext{margin:0 0 9px; font-size:14px; line-height:1.8; color:#cfd6dd}
.lawtext:last-child{margin-bottom:0}
.lawtldr{margin:0 0 10px; font-size:14px; color:var(--accent); line-height:1.7}
.lawnote{margin:10px 0 0; font-size:13px; color:var(--dim); line-height:1.7}

/* 全部法条：底部抽屉 */
.lawmodal{display:none; position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.62); overscroll-behavior:contain}
.lawmodal.show{display:flex; align-items:flex-end; justify-content:center}
.lawmodal-panel{
  width:100%; max-width:560px; max-height:86dvh;
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-bottom:0;
  border-radius:18px 18px 0 0; box-shadow:0 -10px 34px rgba(0,0,0,.55);
}
.lawmodal-head{display:flex; align-items:center; gap:10px; padding:14px 14px 12px; border-bottom:1px solid var(--line)}
.lawmodal-head b{font-size:16px}
.lawmodal-head .small{margin-left:auto}
.lawmodal-head .ghost{min-height:40px; padding:6px 12px}
.lawmodal-body{
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:12px 14px calc(20px + env(safe-area-inset-bottom));
  display:grid; gap:8px; align-content:start;
}
.lawgroup{font-size:13px; color:var(--dim); margin:8px 0 0}

footer{margin-top:22px; text-align:center}
.foot-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.ghost{
  min-height:44px; padding:10px 16px; border-radius:12px; cursor:pointer;
  background:none; border:1px solid var(--line); color:var(--dim); font-size:14px;
}
.ghost:active{background:#151a1f}
.foot-note{margin:12px 0 0; font-size:12px; color:#6f7883; line-height:1.6}

.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(24px + env(safe-area-inset-bottom));
  background:#232a31; border:1px solid #3a4550; color:var(--ink);
  padding:10px 16px; border-radius:12px; font-size:14px;
  opacity:0; transition:.25s; pointer-events:none; z-index:50;
}
.toast.show{opacity:1}

@media (min-width:600px){
  .topbar{padding:16px 20px 12px}
  .card{padding:22px}
  .dot{min-width:44px; height:44px}
  .lawmodal-panel{max-height:80dvh; border-radius:18px; margin-bottom:24px; border-bottom:1px solid var(--line)}
}