/* 寻宝任务卡 · 家长端
配色和排版直接沿用 design.html（已在真机比例下验证过），只加了真机需要的东西：
安全区、44px 触摸目标、太阳底下的对比度。 */
:root{
--red:#8C3A24; --red-d:#6E2C1B; --red-t:#F5E9E3;
--blue:#2D5C8C; --blue-t:#E6EDF4;
--stone:#211F1C; --carve:#EFE9DC;
--green:#2E6B3E; --green-t:#E7EFE6;
--amber:#8A5A16; --amber-t:#F6EDDC;
--warn:#B23A18; --warn-t:#FBE9E4;
--bg:#F2F0EB; --card:#FFF; --ink:#1C1A16; --soft:#6E6A5F; --faint:#A19C90;
--line:rgba(28,26,22,.10);
--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",sans-serif;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
--wei:"Weibei SC","Weibei TC",serif;
--li:"Libian SC","Baoli SC",serif;
--team:var(--red); /* JS 按队伍改写 */
--team-t:var(--red-t);
--safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
#app{height:100%;display:flex;flex-direction:column;overflow:hidden}
/* ── 结构 ───────────────────────────────────── */
.nav{flex:none;height:48px;display:flex;align-items:center;gap:9px;padding:0 14px;
font-size:16px;font-weight:700;background:var(--bg);position:relative;z-index:20}
.nav .bk{font-size:23px;color:var(--soft);line-height:1;padding:6px 6px 6px 0;margin:-6px 0}
.nav .rt{margin-left:auto;font-size:12px;color:var(--faint);font-weight:400}
.body{flex:1;position:relative;overflow:hidden}
.scroll{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:16px}
.scroll::-webkit-scrollbar{display:none}
.pad{padding:0 16px}
.cta{flex:none;padding:10px 16px calc(14px + var(--safe-b));background:#fff;
border-top:1px solid var(--line);display:flex;align-items:center;gap:11px}
/* ── 通用件 ─────────────────────────────────── */
.btn{flex:1;min-height:48px;border:0;border-radius:12px;background:var(--team);color:#fff;
font-size:16px;font-weight:700;font-family:inherit;display:grid;place-items:center;
letter-spacing:.02em;padding:0 14px}
.btn:active{filter:brightness(.9)}
.btn.ghost{background:transparent;color:var(--team);box-shadow:inset 0 0 0 1.5px var(--team)}
.btn.gray{background:#E0DCD4;color:var(--faint)}
.btn.dark{background:var(--stone)}
.btn[disabled]{background:#E0DCD4;color:var(--faint)}
.lnk{background:none;border:0;font-family:inherit;color:var(--soft);font-size:13px;
text-decoration:underline;padding:12px;display:block;margin:0 auto}
.c{background:var(--card);border-radius:14px;padding:13px 14px;margin-bottom:10px}
.k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--faint);
text-transform:uppercase;margin:0 0 7px}
.t1{font-size:14px;font-weight:700;line-height:1.35}
.t2{font-size:12px;color:var(--faint);line-height:1.45}
.chip{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;
background:var(--team-t);color:var(--team)}
.chip.g{background:var(--green-t);color:var(--green)}
.chip.a{background:var(--amber-t);color:var(--amber)}
.chip.o{background:#E4E0D8;color:var(--faint)}
.flag{background:var(--warn-t);border-left:3px solid var(--warn);border-radius:7px;
padding:9px 11px;font-size:12px;color:var(--warn);line-height:1.55;margin-bottom:10px}
.num{flex:none;width:22px;height:22px;border-radius:50%;background:var(--team);color:#fff;
font-family:var(--mono);font-size:11px;display:grid;place-items:center}
.num.done{background:var(--green)}
.num.off{background:#D8D4CC;color:var(--faint)}
/* ── 拓片 / 图形区 ──────────────────────────── */
.art{position:relative;overflow:hidden;background:var(--stone);display:grid;place-items:center}
.art .txt{font-family:var(--wei);color:var(--carve);opacity:.93;letter-spacing:.16em;
font-size:clamp(30px,10vw,46px);line-height:1.1;text-align:center}
.art .cap{position:absolute;left:0;right:0;bottom:0;padding:9px 13px;font-family:var(--mono);
font-size:10px;color:rgba(239,233,220,.62);
background:linear-gradient(to top,rgba(18,16,14,.86),transparent)}
.grain{position:absolute;inset:0;opacity:.5;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
background-size:3px 3px}
/* ── 地图 ───────────────────────────────────── */
/* 没有底图瓦片（见 views.js 里的说明）。画方格纸做距离参照，比空白强，
也比一张假的手绘地形诚实。 */
#map{position:absolute;inset:0}
.leaflet-container{font-family:var(--sans);background:#E9E5DA;
background-image:linear-gradient(rgba(28,26,22,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(28,26,22,.055) 1px,transparent 1px);
background-size:34px 34px}
.leaflet-control-scale-line{background:rgba(255,255,255,.82);border-color:var(--faint);
color:var(--soft);font-family:var(--mono);font-size:10px;padding:2px 6px}
/* 让开顶部 HUD 和右边的定位按钮 */
.leaflet-top.leaflet-right .leaflet-control-scale{margin:60px 12px 0 0}
.pinw{background:none!important;border:0!important}
.pinw b{display:block;width:30px;height:30px;border-radius:50% 50% 50% 0;
transform:rotate(-45deg);background:var(--team);color:#fff;font-family:var(--mono);
font-size:12px;font-weight:700;display:grid;place-items:center;
box-shadow:0 2px 7px rgba(0,0,0,.34)}
.pinw b i{transform:rotate(45deg);font-style:normal}
.pinw.done b{background:var(--green)}
.pinw.off b{background:#B0ABA1}
.pinw em{font-style:normal;display:block;margin-top:5px;font-size:10.5px;font-weight:700;
background:rgba(255,255,255,.93);padding:2px 6px;border-radius:5px;white-space:nowrap;
transform:translateX(calc(-50% + 15px));width:max-content}
.mecss{width:16px;height:16px;border-radius:50%;background:#2D7DF6;border:2.5px solid #fff;
box-shadow:0 0 0 6px rgba(45,125,246,.22)}
.hud{position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:center;gap:9px;
z-index:500;pointer-events:none}
.hud>*{pointer-events:auto}
.hudc{background:#fff;border-radius:13px;padding:8px 12px;display:flex;align-items:center;
gap:10px;box-shadow:0 2px 11px rgba(0,0,0,.15);flex:1}
.gps{width:40px;height:40px;border-radius:50%;background:#fff;border:0;
box-shadow:0 2px 11px rgba(0,0,0,.15);color:var(--team);font-size:18px}
.ring{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
background:conic-gradient(var(--team) var(--p,0deg),#E4E0D8 0)}
.ring span{width:29px;height:29px;border-radius:50%;background:#fff;display:grid;place-items:center;
font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--team)}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;
padding:9px 16px calc(16px + var(--safe-b));box-shadow:0 -6px 26px rgba(0,0,0,.15);z-index:500}
.hdl{width:36px;height:4px;border-radius:2px;background:#DCD8D0;margin:0 auto 11px}
/* 定位诊断：不好看，但现场排查全靠它 */
.diag{margin-top:10px;font-size:11px;line-height:1.55;color:var(--faint);
border-top:1px solid var(--line);padding-top:9px}
.diag .mono{font-family:var(--mono);font-size:10px}
.diag.err{color:var(--warn);background:var(--warn-t);border:0;border-radius:9px;
padding:9px 11px;font-size:11.5px}
/* ── 答题 ───────────────────────────────────── */
.opt{width:100%;text-align:left;font-family:inherit;background:#fff;border:1.5px solid var(--line);
border-radius:12px;padding:14px 15px;font-size:15px;font-weight:600;margin-bottom:9px;
color:var(--ink);min-height:50px}
.opt.sel{border-color:var(--team);background:var(--team-t)}
.opt.ok{border-color:var(--green);background:var(--green-t);color:var(--green)}
.opt.no{border-color:var(--warn);background:var(--warn-t);color:var(--warn)}
textarea.inp{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;
font-size:15px;font-family:inherit;color:var(--ink);background:#fff;min-height:96px;
resize:none;line-height:1.55}
textarea.inp:focus{outline:0;border-color:var(--team)}
.hint{background:var(--team-t);border-radius:11px;padding:11px 13px;font-size:13.5px;
line-height:1.6;color:var(--team);margin-bottom:13px}
.know{background:var(--stone);color:var(--carve)}
.know .kb{font-size:15px;line-height:1.85;padding:0 4px}
.know b{color:#F0C98A}
/* ── 通关 ───────────────────────────────────── */
.stamp{width:150px;height:150px;border-radius:50%;border:3px solid var(--team);color:var(--team);
display:grid;place-items:center;text-align:center;margin:0 auto;font-family:var(--wei);
font-size:31px;line-height:1.15;letter-spacing:.08em;transform:rotate(-8deg);opacity:.93}
/* 通关那一下要有个「到了」的感觉 —— 章先盖下来，字再浮上来 */
@keyframes stampin{
0%{transform:rotate(-26deg) scale(1.9);opacity:0}
62%{transform:rotate(-4deg) scale(.94);opacity:1}
100%{transform:rotate(-8deg) scale(1);opacity:.93}}
@keyframes fadein{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.stamp.pop{animation:stampin .62s cubic-bezier(.2,.9,.3,1) both}
.fadein{animation:fadein .5s ease .42s both}
@media (prefers-reduced-motion:reduce){
.stamp.pop,.fadein{animation:none}}
/* 做完最后一题：先给个「全部完成」的实感，再推去换题 */
.alldone{margin:26px 0 4px;padding:18px 16px;border-radius:14px;text-align:center;
background:rgba(127,191,142,.10);border:1.5px solid rgba(127,191,142,.42)}
.alldone .n{font-family:var(--mono);font-size:27px;font-weight:800;color:#7FBF8E;
letter-spacing:.04em}
.alldone .t{font-size:17px;font-weight:800;margin-top:3px;color:var(--carve)}
.alldone .s{font-size:12.5px;line-height:1.6;color:rgba(239,233,220,.62);margin-top:7px}
.stats{display:flex;margin-top:20px}
.stats div{flex:1;text-align:center}
.stats b{display:block;font-size:22px;font-weight:800}
.stats span{font-size:11px;color:var(--faint)}
/* ── 开场 ───────────────────────────────────── */
.teamsel{display:flex;gap:11px;margin-bottom:14px}
.teamsel button{flex:1;font-family:inherit;background:#fff;border:2px solid var(--line);
border-radius:14px;padding:15px 10px;text-align:center;color:var(--ink)}
.teamsel button.on[data-t=red]{border-color:var(--red);background:var(--red-t);color:var(--red)}
.teamsel button.on[data-t=blue]{border-color:var(--blue);background:var(--blue-t);color:var(--blue)}
.teamsel .nm{font-size:17px;font-weight:800;margin-bottom:3px}
.teamsel .dr{font-size:11px;opacity:.72}
input.nick{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;
font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
input.nick:focus{outline:0;border-color:var(--team)}
.hidden{display:none!important}