/* css/map.css: all of index.html's CSS (moved out in v115, REFACTOR §4). index.html links it before any script. */
/* no double-tap zoom on phones (Wilson 2026-11-13); canvas keeps touch-action:none for its own gestures */
html,body{touch-action:manipulation;margin:0;height:100%;overflow:hidden;background:#e9dfc6;font-family:"LXGW WenKai","Kaiti SC",serif;color:#2b2118;-webkit-user-select:none;user-select:none}
canvas{display:block;touch-action:none}
#top{position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:8px;right:8px;display:flex;gap:6px;flex-wrap:wrap;z-index:5}
#top .t{background:rgba(250,244,228,.9);border:1px solid #5a4630;padding:4px 10px;font-size:15px;letter-spacing:2px}
#top .t b{color:#8e2a20}
#sty{margin-left:auto;display:flex;gap:4px}
#sty button{font-family:inherit;font-size:14px;padding:5px 10px;border-radius:14px;border:1px solid rgba(90,55,30,.5);background:rgba(250,244,228,.92);color:#2b2118}
#sty button.on{background:#8e2a20;color:#fff4dc;border-color:#8e2a20}
#tl{position:fixed;left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom) + 10px + var(--vvb,0px));display:flex;align-items:center;gap:8px;z-index:6;background:rgba(43,33,24,.72);border-radius:22px;padding:5px 12px 5px 5px}
#play{width:36px;height:36px;border-radius:50%;border:none;background:#a8332a;color:#fff;font-size:15px}
#tld{color:#f6ecd4;font-size:13px;white-space:nowrap;min-width:84px;flex-shrink:0}
#rng{flex:1;accent-color:#e7c36a}
.lb.pop{font-size:13px;background:rgba(250,244,228,.95);border:1px solid #8e2a20;border-radius:3px;padding:3px 8px;box-shadow:0 2px 8px rgba(0,0,0,.3);animation:popin .35s ease-out;max-width:200px;white-space:normal;text-align:center}
.lb.pop b{color:#8e2a20}
.lb.pop.big{background:linear-gradient(#b23a2c,#8e2a20);color:#fff6e0;border:2px solid #e7c36a;font-size:15px;padding:6px 12px;cursor:pointer}
.lb.pop.big b{color:#ffe6a6}

.lb.pop::after{content:'';position:absolute;left:50%;top:100%;width:1.5px;height:var(--lead,0px);background:rgba(142,42,32,.75);transform:translateX(-50%)}
.lb.pop::before{content:'';position:absolute;left:50%;top:calc(100% + var(--lead,0px));width:7px;height:7px;border-radius:50%;background:#8e2a20;border:1.5px solid #fff4dc;transform:translate(-50%,-50%)}

.kd{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:4px;color:#fff6e0;font-size:12px;margin-right:4px;vertical-align:-3px;box-shadow:inset 0 0 0 1px rgba(255,240,210,.5)}
.lb.pop.war{animation:popin .35s ease-out,warpulse 1.1s ease-in-out 3}
@keyframes warpulse{0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.3)}50%{box-shadow:0 0 0 4px rgba(142,42,32,.35),0 2px 8px rgba(0,0,0,.3)}}
.lb.pop::after{background:var(--kc,rgba(142,42,32,.75))!important}.lb.pop::before{background:var(--kc,#8e2a20)!important}
#lgb{position:fixed;top:calc(env(safe-area-inset-top) + 8px);right:8px;z-index:6;font-family:inherit;font-size:13px;padding:5px 10px;border-radius:14px;border:1px solid rgba(90,55,30,.5);background:rgba(250,244,228,.92);color:#2b2118}
#lg{position:fixed;top:calc(env(safe-area-inset-top) + 42px);right:8px;z-index:6;background:rgba(250,244,228,.96);border:1px solid rgba(90,55,30,.4);border-radius:6px;padding:6px 10px;font-size:13px;line-height:1.9;display:none;box-shadow:0 2px 10px rgba(0,0,0,.2)}
#lg.on{display:block}
#lg .lgh{margin-top:4px;border-top:1px solid rgba(90,55,30,.25);padding-top:3px;font-weight:bold;font-size:12px}
#lg .sw{display:inline-block;width:16px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}
@keyframes popin{from{opacity:0;transform:translate(-50%,-100%) translateY(12px)}to{opacity:1;transform:translate(-50%,-100%)}}
#bot{position:fixed;left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom) + 60px + var(--vvb,0px));display:flex;justify-content:space-between;z-index:5;pointer-events:none}
#bot>div{display:flex;gap:5px;pointer-events:auto}
#bot button{font-family:inherit;font-size:16px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(90,55,30,.5);background:rgba(250,244,228,.92);color:#2b2118;box-shadow:0 1px 4px rgba(0,0,0,.2)}
#bot button.on{background:#2b2118;color:#f6ecd4}
#bgm{pointer-events:auto;display:flex;align-items:center;justify-content:center;padding:0}#bgm .x{display:none}#bgm.off{opacity:.55}#bgm.off .x{display:inline}

#lab{position:fixed;inset:0;pointer-events:none;z-index:3}
.lb{position:absolute;left:0;top:0;transform:translate(-50%,-100%);white-space:nowrap;pointer-events:auto;will-change:translate}
.lb.city.cap{font-size:15px;font-weight:bold;color:#fff6e0;background:#9b2d20;border-color:#5a1a10;letter-spacing:1px}
.lb.city{font-size:13px;background:rgba(250,244,228,.92);border:1px solid #5a4630;padding:1px 6px;border-radius:2px}
.lb.region.sm{font-size:12px;letter-spacing:1px;color:rgba(40,28,18,.72);white-space:nowrap}
.lb.region{font-size:22px;letter-spacing:6px;color:rgba(40,28,18,.6);text-shadow:0 0 6px rgba(255,250,235,.7);pointer-events:none;transform:translate(-50%,-50%)}
.lb.scroll{font-size:15px;background:linear-gradient(#b23a2c,#8e2a20);color:#fff6e0;padding:5px 11px;border:2px solid #e7c36a;border-radius:4px;letter-spacing:2px;box-shadow:0 3px 10px rgba(0,0,0,.4);animation:bob 1.6s ease-in-out infinite}
.lb.scroll small{display:block;font-size:11px;color:#f3dca0;text-align:center}
@keyframes bob{0%,100%{margin-top:0}50%{margin-top:-5px}}
#scrollOv{position:fixed;inset:0;z-index:40;pointer-events:none}
/* a scroll card: the event's card with a closed pair of rolls standing at its right (left the 轴, right the 天杆, both
   with 白玉 knobs, one 带 round both). Tapping it opens the scroll: the pair reappears at the centre and parts. */
.lb.pop.big.scrollc{background-color:var(--kc,#5b3a7a);background-image:var(--yun),linear-gradient(rgba(255,255,255,.1),rgba(0,0,0,.32));background-repeat:no-repeat;
  background-position:50% 2px,0 0;background-size:38px 21px,auto;border:1px solid #241a10;outline:1px solid rgba(231,195,106,.8);outline-offset:-5px;padding:24px 16px 8px;border-radius:2px;
  color:#fff6e0;cursor:pointer}
.lb.pop.big.scrollc b{color:#fff3cf}
.lb.pop.scrollc{width:max-content;max-width:min(240px,calc(100vw - 48px));white-space:normal}
.lb.scrollc .ev{color:#fff3cf;border-bottom:1px dotted rgba(255,243,207,.7);padding:0 1px;cursor:pointer}
.jp{position:absolute;width:calc(var(--w) * 2 - 2px);top:-5px;bottom:-5px;z-index:3}
.lb .jp{right:calc(var(--w) * -2 + 7px);animation:jpIn .5s ease-out .15s both}
@keyframes jpIn{0%{opacity:0;transform:translateX(-8px)}100%{opacity:1;transform:none}}
.jp .jr{position:absolute;width:var(--w);top:0;bottom:0}.jp .jr.a{left:0;z-index:1}.jp .jr.b{right:0}
.jr .bd{position:absolute;left:0;right:0;top:4px;bottom:4px;border-radius:2px;
  background:linear-gradient(90deg,rgba(40,25,10,.36),rgba(255,252,240,.42) 26%,rgba(255,255,255,.1) 44%,rgba(40,25,10,.1) 70%,rgba(40,25,10,.4)),var(--yb-pat) 0 0/14px 14px,var(--yb);
  box-shadow:0 0 0 .6px rgba(60,40,20,.35),2px 4px 6px rgba(40,25,10,.28)}
.jr .fc{position:absolute;left:0;right:0;top:1.5px;height:5px;border-radius:50%;background:repeating-radial-gradient(ellipse at center,#efe9d8 0 .8px,#d6ccb4 .8px 1.5px);box-shadow:inset 0 0 0 .8px var(--yb)}
.jr .k{position:absolute;left:50%;width:calc(var(--w) * .66);height:6px;transform:translateX(-50%);background:var(--jade);box-shadow:0 0 0 .6px rgba(60,40,20,.38)}
.jr .k.t{top:-3px;border-radius:50% 50% 25% 25%/90% 90% 10% 10%}.jr .k.b{bottom:-2px;border-radius:25% 25% 50% 50%/10% 10% 90% 90%}
.jr .sh{position:absolute;left:-30%;right:-30%;bottom:-6px;height:5px;border-radius:50%;background:radial-gradient(ellipse,rgba(40,25,10,.35),transparent 70%)}
.jp>.bn{position:absolute;left:-.5px;right:-.5px;top:44%;height:4px;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,.35),var(--band) 14%,rgba(255,255,255,.25) 24%,var(--band) 34%,rgba(0,0,0,.3) 50%,var(--band) 64%,rgba(255,255,255,.25) 74%,var(--band) 84%,rgba(0,0,0,.4))}
.jp>.tl{position:absolute;right:-6px;top:calc(44% + 3px);z-index:2;overflow:visible}
#scrollOv iframe{position:absolute;inset:0;width:100%;height:100%;border:0;clip-path:inset(0 50% 0 50%);transition:clip-path .9s cubic-bezier(.6,.05,.3,1);pointer-events:auto;background:#2a2119}
/* v139: while held, a strip behind the closed rolls is already unclipped, so the page inside is painted (images decoded,
   layers made) before the opening starts instead of on its first frame */
#scrollOv.ready iframe{clip-path:inset(0 calc(50% - 16px) 0 calc(50% - 16px))}
#scrollOv.open iframe{clip-path:inset(0 0 0 0)}
#scrollOv .jp{left:50%;top:12px;bottom:12px;margin-left:calc(var(--w) * -1 + 1px);transform:scale(.35);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s}
#scrollOv.ready .jp{transform:none;opacity:1}
#scrollOv .jp .jr{transition:transform .9s cubic-bezier(.6,.05,.3,1),opacity .4s .9s}
#scrollOv .jp>.bn,#scrollOv .jp>.tl{transition:opacity .25s}#scrollOv.open .jp>.bn,#scrollOv.open .jp>.tl{opacity:0}
#scrollOv.open .jp .jr.a{transform:translateX(calc(-50vw + var(--w)));opacity:0}#scrollOv.open .jp .jr.b{transform:translateX(calc(50vw - var(--w)));opacity:0}
.lb.pop.wiki{cursor:pointer}
.lb.pop.nudged::before,.lb.pop.nudged::after{display:none}
.lb.pop.wiki{width:max-content;max-width:min(240px,calc(100vw - 16px));white-space:normal}
/* era headline pop (importance 3, 581–763): the scroll card's frame and 祥云 crown, tinted by the event's kind colour
   (--kc) instead of always 朱红, so it reads as "tap for more" without being mistaken for the 玄武门 handscroll entry */
.lb.pop.big.wiki{background-color:var(--kc,#5b3a7a);background-image:
    linear-gradient(90deg,#241a10 0 6px,#5a4328 6px 8px,transparent 8px calc(100% - 8px),#5a4328 calc(100% - 8px) calc(100% - 6px),#241a10 calc(100% - 6px)),
    var(--yun),linear-gradient(rgba(255,255,255,.1),rgba(0,0,0,.32));
  background-repeat:no-repeat,no-repeat,no-repeat;background-position:0 0,50% 2px,0 0;background-size:auto,38px 21px,auto;
  border:1px solid #241a10;outline:1px solid rgba(231,195,106,.8);outline-offset:-5px;padding:24px 18px 8px;border-radius:2px;color:#fff6e0}
.lb.pop.big.wiki b{color:#fff3cf}
/* era wiki card: a full-screen reading sheet, silk on ink, slides up from the bottom like a scroll being unrolled upward */
#wikiOv{position:fixed;inset:0;z-index:45;display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .3s;background:rgba(20,14,8,.45)}
#wikiOv.open{opacity:1;pointer-events:auto}
#wikiOv .wsheet{width:100%;max-height:min(88vh,calc(100vh - 12px));max-width:760px;margin:0 auto;background:var(--silk);border-radius:10px 10px 0 0;box-shadow:0 -6px 24px rgba(20,10,0,.4);display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.8,.3,1);padding-bottom:env(safe-area-inset-bottom)}
#wikiOv.open .wsheet{transform:translateY(0)}
#wikiOv .whead{display:flex;align-items:flex-start;gap:8px;padding:14px 14px 10px;border-bottom:1px solid rgba(58,42,28,.25)}
#wikiOv .whead .kd{flex:none;margin-top:2px}
#wikiOv .wt{flex:1;min-width:0}
#wikiOv .wt b{display:block;font-size:17px;color:var(--ink)}
#wikiOv .wt small{display:block;color:#6b5a44;font-size:12px;margin-top:2px}
#wikiOv .wx{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(58,42,28,.4);background:rgba(255,255,255,.5);color:var(--ink);font-size:14px;line-height:1}
#wikiOv .wbody{overflow-y:auto;padding:12px 14px 20px;-webkit-overflow-scrolling:touch}
#wikiOv .wscroll{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:0 0 12px;padding:9px 12px;border-radius:2px;border:1px solid rgba(58,42,28,.45);
  background:var(--yb-pat) 0 0/14px 14px,var(--yb);color:var(--ink);font:inherit;font-size:14px;letter-spacing:2px;cursor:pointer;box-shadow:0 2px 6px rgba(40,25,10,.18)}
#wikiOv .wscroll .jp{position:relative;top:auto;bottom:auto;height:22px;flex:none}
#wikiOv .wpoem{margin:0 0 14px;padding:14px 16px;background:var(--silk);border:1px solid rgba(58,42,28,.3);border-radius:3px;text-align:center}
#wikiOv .wpT{font-size:12.5px;color:#6b5a44;margin-bottom:8px}#wikiOv .wpT small{display:block;opacity:.75;margin-top:2px}
#wikiOv .wpoem p{margin:0 0 3px;font-size:19px;line-height:1.6;color:#2a2018;font-family:var(--poem)}  /* v136: the 吟诗 brush (css/poem-font.css) */
#wikiOv .wsum{font-size:14.5px;line-height:1.6;color:#2a2018;margin:0 0 10px}
#wikiOv .wwhy,#wikiOv .wdeb{font-size:13px;line-height:1.55;color:#4a3826;background:rgba(184,137,58,.1);border-left:3px solid var(--gold);padding:7px 10px;margin:0 0 10px;border-radius:0 3px 3px 0}
#wikiOv .wdeb{background:rgba(142,42,32,.08);border-left-color:#8e2a20}
#wikiOv .wevh{font-size:12px;color:#8a7658;letter-spacing:2px;margin:14px 0 6px;border-bottom:1px solid rgba(58,42,28,.2);padding-bottom:4px}
#wikiOv .wev{margin-bottom:12px;background:rgba(255,255,255,.4);border:1px solid rgba(58,42,28,.18);border-radius:4px;padding:9px 10px}
#wikiOv .wevt{font-size:11.5px;color:#8a7658;display:flex;align-items:center;gap:6px;margin-bottom:4px}
#wikiOv .wst{color:#fff;border-radius:8px;padding:1px 7px;font-size:10.5px}
#wikiOv .wevb{display:flex;gap:9px}
#wikiOv .wimg{flex:none;width:72px;height:72px;object-fit:cover;border-radius:3px;border:1px solid rgba(58,42,28,.3)}
#wikiOv .evT{font-size:13.5px;font-weight:bold;color:#2a2018;margin-bottom:2px}
#wikiOv .evD{font-size:12.5px;line-height:1.5;color:#3a2e20}
#wikiOv .evQ{font-size:12px;color:#6b5a44;font-style:italic;margin-top:3px}
#wikiOv .evC{font-size:11px;color:#8a7658;margin-top:4px}
#wikiOv .evC a,#wikiOv .evI a{color:#8e2a20}
#wikiOv .evI{font-size:10.5px;color:#9a8b6e;margin-top:2px}
#fade{position:fixed;inset:0;background:#efe4c8;opacity:0;pointer-events:none;transition:opacity .4s;z-index:20}

/* ---------- 题签 · 牌匾 · 印章: one visual language for every piece of text on the map ----------
   silk paper + a fine ink double rule + small 回纹 corner brackets; 祥云 only where something matters
   (the title, the scroll entry, the timeline) so ornament never becomes clutter. */
:root{
 --silk:#f4ead2;--ink:#3a2a1c;--zhu:#9b2d20;--gold:#b8893a;
 --cn-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M.8 8.2V.8h7.4M3.2 8.2V3.2h5' fill='none' stroke='%233a2a1c' stroke-width='.9'/%3E%3C/svg%3E");
 --cn-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M.8 8.2V.8h7.4M3.2 8.2V3.2h5' fill='none' stroke='%23e7c36a' stroke-width='.9'/%3E%3C/svg%3E");
 --cn-ink-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath transform='rotate(180 4.5 4.5)' d='M.8 8.2V.8h7.4M3.2 8.2V3.2h5' fill='none' stroke='%233a2a1c' stroke-width='.9'/%3E%3C/svg%3E");
 --cn-gold-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath transform='rotate(180 4.5 4.5)' d='M.8 8.2V.8h7.4M3.2 8.2V3.2h5' fill='none' stroke='%23e7c36a' stroke-width='.9'/%3E%3C/svg%3E");
 /* 月白绫 · 白玉轴 (Wilson's pick 2026-11-04): every scroll object — the map's rollers, a scroll card's closed pair,
    the overlay's opening rolls, the evidence sheet's button — wears one restrained mounting: plain 月白 绫 whose 暗花
    云纹 is only a shade off the ground, turned 白玉 knobs, a 石青 silk 带 with a 白玉 别子; no gold. */
 --yb:#dfe3dc;--yb-d:#c4cbc2;--band:#5d7880;
 --yb-pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M3 15c0-4 6-4 6 0 0 2.6-3.6 2.6-3.6.6'/%3E%3Cpath d='M15 5c0-3.4 5-3.4 5 0 0 2.2-3 2.2-3 .5'/%3E%3Cpath d='M9 15c2 0 3-1 4-2'/%3E%3C/g%3E%3C/svg%3E");
 --jade:radial-gradient(ellipse at 40% 30%,#fdfdf8,#dfe5d9 50%,#a9b4a4);
 --jin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='16' height='16' fill='%236b4a2f'/%3E%3Cpath d='M0 0L16 16M16 0L0 16' stroke='%23d9b45a' stroke-opacity='.3' stroke-width='.7'/%3E%3Cg fill='%23deba62'%3E%3Ccircle cx='8' cy='8' r='1.5' fill-opacity='.6'/%3E%3Ccircle cx='8' cy='5.4' r='.75' fill-opacity='.4'/%3E%3Ccircle cx='8' cy='10.6' r='.75' fill-opacity='.4'/%3E%3Ccircle cx='5.4' cy='8' r='.75' fill-opacity='.4'/%3E%3Ccircle cx='10.6' cy='8' r='.75' fill-opacity='.4'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill-opacity='.6'/%3E%3Ccircle cx='16' cy='0' r='1.5' fill-opacity='.6'/%3E%3Ccircle cx='0' cy='16' r='1.5' fill-opacity='.6'/%3E%3Ccircle cx='16' cy='16' r='1.5' fill-opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
 --yun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='36' viewBox='-2 0 66 36'%3E%3Cdefs%3E%3Cg id='s'%3E%3Ccircle r='8'/%3E%3Ccircle cx='9.5' cy='-6' r='6'/%3E%3Ccircle cx='10.5' cy='5.5' r='5.5'/%3E%3Cpath d='M12 7C22 10 32 8 42 2C34 8 24 11 12 11Z'/%3E%3C/g%3E%3Cg id='c' fill='none' stroke='%23b8893a' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-1.7 5.3L0.3 5.4L2.0 4.7L3.4 3.5L4.3 2.0L4.5 0.4L4.1 -1.2L3.2 -2.4L2.0 -3.2L0.7 -3.5L-0.5 -3.3L-1.6 -2.7L-2.2 -1.9L-2.5 -0.9L-2.5 0.1L-2.1 0.9L-1.5 1.4L-0.8 1.6L-0.1 1.6L0.4 1.3L0.7 0.9' stroke-width='1.2'/%3E%3Cpath d='M5.7 -4.8L5.7 -6.1L6.1 -7.4L6.9 -8.3L7.9 -8.9L9.0 -9.2L10.1 -9.0L11.0 -8.5L11.6 -7.7L11.9 -6.9L11.9 -6.0L11.6 -5.2L11.1 -4.7L10.5 -4.3L9.8 -4.3L9.2 -4.4L8.8 -4.7L8.5 -5.2L8.5 -5.6L8.5 -6.0L8.7 -6.2' stroke-width='.95'/%3E%3Cpath d='M13.4 3.4L13.8 4.4L13.8 5.5L13.5 6.5L12.9 7.3L12.2 7.8L11.3 8.1L10.5 8.1L9.7 7.8L9.1 7.4L8.8 6.8L8.6 6.1L8.6 5.5L8.9 5.0L9.2 4.6L9.7 4.3L10.1 4.3L10.5 4.3L10.8 4.5L11.0 4.8L11.1 5.1' stroke-width='.95'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(30 12) scale(.72)'%3E%3Cuse href='%23s' fill='%23b8893a' stroke='%23b8893a' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cuse href='%23s' fill='%23efe3c4'/%3E%3Cuse href='%23c'/%3E%3C/g%3E%3Cg transform='translate(8 22)'%3E%3Cuse href='%23s' fill='%23b8893a' stroke='%23b8893a' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cuse href='%23s' fill='%23efe3c4'/%3E%3Cuse href='%23c'/%3E%3C/g%3E%3C/svg%3E");
}
#top .t{background:var(--silk) var(--yun) no-repeat 4px 50%/26px 14px;border:1px solid var(--ink);outline:1px solid rgba(184,137,58,.6);outline-offset:-4px;padding:5px 14px 5px 36px;border-radius:1px;box-shadow:0 2px 6px rgba(60,40,20,.18)}
.lb.pop{background-color:var(--silk);background-image:var(--cn-ink),var(--cn-ink-br);background-repeat:no-repeat;background-position:3px 3px,calc(100% - 3px) calc(100% - 3px);
  border:1px solid rgba(58,42,28,.7);outline:1px solid rgba(184,137,58,.45);outline-offset:-4px;border-radius:1px;padding:5px 11px;box-shadow:0 3px 10px rgba(40,25,10,.28)}
.lb.pop.big{background:linear-gradient(90deg,#4a2f1b 0 6px,#8a5d38 6px 8px,transparent 8px calc(100% - 8px),#8a5d38 calc(100% - 8px) calc(100% - 6px),#4a2f1b calc(100% - 6px)),
  var(--yun) no-repeat 50% 2px/38px 21px,linear-gradient(#a8352a,#7f2419);border:1px solid #3b2617;outline:1px solid rgba(231,195,106,.8);outline-offset:-5px;padding:24px 18px 8px;border-radius:2px}
.lb.pop::before{border-radius:1px!important;width:7px!important;height:7px!important;transform:translate(-50%,-50%) rotate(45deg)!important}
.lb.pop::after{width:1.2px!important;opacity:.8}
.kd{border-radius:2px;font-family:inherit}
.lb.city{background-color:var(--silk);background-image:var(--cn-ink),var(--cn-ink-br);background-repeat:no-repeat;background-position:2px 2px,calc(100% - 2px) calc(100% - 2px);
  border:1px solid rgba(58,42,28,.75);outline:1px solid rgba(184,137,58,.4);outline-offset:-3px;padding:2px 9px;border-radius:0;letter-spacing:1px}
.lb.city.cap{background-color:var(--zhu);background-image:var(--cn-gold),var(--cn-gold-br);border-color:#4a160d;outline-color:rgba(231,195,106,.85);padding:3px 11px}
.lb.city.tap{cursor:pointer}.lb.city.tap.on{outline-color:#d9a83a;box-shadow:0 0 0 2px rgba(217,168,58,.55)}
.lb.city.town{font-size:11px;padding:1px 6px;letter-spacing:0;background-position:1px 1px,calc(100% - 1px) calc(100% - 1px);opacity:.92}
.lb.region{color:rgba(42,30,20,.62);text-shadow:0 0 3px rgba(244,234,210,.95),0 0 10px rgba(244,234,210,.7)}
#tl{background:linear-gradient(90deg,#3b2617 0 7px,#8a5d38 7px 9px,var(--silk) 9px calc(100% - 9px),#8a5d38 calc(100% - 9px) calc(100% - 7px),#3b2617 calc(100% - 7px));
  border-radius:3px;border:1px solid #3b2617;padding:5px 16px 5px 14px;box-shadow:0 3px 10px rgba(40,25,10,.3)}
#tl::before{content:'';position:absolute;left:50%;top:-14px;width:40px;height:22px;transform:translateX(-50%);background:var(--yun) no-repeat center/40px 22px}
#play{border-radius:5px;background:var(--zhu);box-shadow:inset 0 0 0 2px #f4ead2,inset 0 0 0 3px rgba(155,45,32,.9)}
#tld{color:var(--ink)}
#rng{accent-color:var(--zhu)}
#tl .tb{flex:none;width:30px;height:30px;padding:0;border-radius:4px;border:1px solid rgba(58,42,28,.45);background:rgba(255,255,255,.55);color:var(--ink);font-family:inherit;font-size:12px;display:flex;align-items:center;justify-content:center}
#tl .tb:active{background:rgba(184,137,58,.35)}
/* the animated sign and the kind glyph travel together, centred on the line of text they precede */
.kh{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;margin-right:5px;position:relative;top:-1px}.kh .ka,.kh .kd{vertical-align:0;margin:0}
#tld{display:flex;flex-direction:column;line-height:1.2}#tld .t1{font-size:13.5px}#tld .t2{font-size:11px;opacity:.72}
/* 事件小动画 (Wilson 2026-11-04): an emoji-sized animated sign beside the kind glyph when a card pops up —
   战 swords clash, 政 a seal stamps, 外 a 国书 unrolls, 治 scales settle, 文 a brush writes, 天 a star twinkles.
   Three plays, then still; off for prefers-reduced-motion. */
.ka{display:inline-block;width:20px;height:20px;vertical-align:-5px;margin-right:3px}
.ka svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ka *{transform-box:view-box}
.ka-mil .s1,.ka-mil .s2,.ka-mil .sp,.ka-dip .pp,.ka-nat .tw{transform-origin:12px 12px}
/* every loop starts and ends on the same rest pose (0% = 100%), so a restart never snaps; one-off actions (the seal's
   mark, the 国书 unrolling, the brush stroke) play once and stay. test/anim-audit.mjs checks it frame by frame. */
.ka-mil .s1{animation:kaS1 1.2s cubic-bezier(.45,0,.55,1) 3 both}.ka-mil .s2{animation:kaS2 1.2s cubic-bezier(.45,0,.55,1) 3 both}
.ka-mil .sp{animation:kaSp 1.2s ease-in-out 3 both}
@keyframes kaS1{0%,100%{transform:rotate(0)}38%{transform:rotate(-30deg)}62%{transform:rotate(3deg)}76%{transform:rotate(0)}}
@keyframes kaS2{0%,100%{transform:rotate(0)}38%{transform:rotate(30deg)}62%{transform:rotate(-3deg)}76%{transform:rotate(0)}}
@keyframes kaSp{0%,44%{transform:scale(.3);opacity:0}72%{transform:scale(1.15);opacity:1}96%,100%{transform:scale(.3);opacity:0}}
.ka-pol .st{animation:kaSt 1.3s cubic-bezier(.45,0,.55,1) 3 both}
@keyframes kaSt{0%,100%{transform:translateY(-2px)}35%{transform:translateY(-6px)}58%,70%{transform:translateY(2px)}}
.ka-pol .mk{transform-origin:12px 19px;animation:kaMk 1.3s ease-out 1 both}
@keyframes kaMk{0%,55%{opacity:0;transform:scale(.7)}85%,100%{opacity:1;transform:scale(1)}}
.ka-dip .pp{animation:kaPp 1.5s cubic-bezier(.3,0,.2,1) 1 both}
.ka-dip .rl{animation:kaRl 1.5s cubic-bezier(.3,0,.2,1) 1 both}.ka-dip .rr{animation:kaRr 1.5s cubic-bezier(.3,0,.2,1) 1 both}
.ka-dip .ln{animation:kaLn 1.5s ease-out 1 both}
@keyframes kaPp{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes kaRl{0%{transform:translateX(7px)}100%{transform:translateX(0)}}
@keyframes kaRr{0%{transform:translateX(-7px)}100%{transform:translateX(0)}}
@keyframes kaLn{0%,65%{opacity:0}100%{opacity:1}}
/* 治 — a balance weighing and settling: the beam swings on its pivot with a damped swing; the two pans hang level and
   only rise and fall (a pan that tilted with the beam is what looked wrong before) */
.ka-gov .bm{transform-origin:12px 6px;animation:kaBm 1.8s cubic-bezier(.45,0,.55,1) 2 both}
.ka-gov .pl{animation:kaPl 1.8s cubic-bezier(.45,0,.55,1) 2 both}.ka-gov .pr{animation:kaPr 1.8s cubic-bezier(.45,0,.55,1) 2 both}
@keyframes kaBm{0%,100%{transform:rotate(0)}22%{transform:rotate(-14deg)}48%{transform:rotate(9deg)}70%{transform:rotate(-4deg)}86%{transform:rotate(1.5deg)}}
@keyframes kaPl{0%,100%{transform:translateY(0)}22%{transform:translateY(1.9px)}48%{transform:translateY(-1.25px)}70%{transform:translateY(.55px)}86%{transform:translateY(-.2px)}}
@keyframes kaPr{0%,100%{transform:translateY(0)}22%{transform:translateY(-1.9px)}48%{transform:translateY(1.25px)}70%{transform:translateY(-.55px)}86%{transform:translateY(.2px)}}
.ka-cul .br{stroke-dasharray:1;stroke-dashoffset:1;animation:kaBr 1.1s cubic-bezier(.4,0,.3,1) .35s 1 both}
.ka-cul .bh{animation:kaDip .9s ease-in-out 1 both}@keyframes kaDip{0%,100%{transform:translateY(0)}45%{transform:translateY(2.5px)}}
@keyframes kaBr{to{stroke-dashoffset:0}}
.ka-nat .tw{animation:kaTw 1.4s cubic-bezier(.45,0,.55,1) 3 both}
@keyframes kaTw{0%,100%{transform:scale(.85) rotate(0);opacity:.8}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.ka *{animation:none!important}}
#spd{width:36px!important}
@media (max-width:560px){#tl{flex-wrap:wrap;row-gap:2px;gap:6px}#rng{flex:1 1 100%;order:9;margin:0 4px 2px}#bot{bottom:calc(env(safe-area-inset-bottom) + 96px + var(--vvb,0px))}}
#lgb{border-radius:1px;background:var(--silk);border:1px solid var(--ink);outline:1px solid rgba(184,137,58,.55);outline-offset:-4px;padding:5px 12px}
#lg{background-color:var(--silk);background-image:var(--cn-ink),var(--cn-ink-br);background-repeat:no-repeat;background-position:3px 3px,calc(100% - 3px) calc(100% - 3px);border:1px solid var(--ink);outline:1px solid rgba(184,137,58,.5);outline-offset:-4px;border-radius:1px}

/* 长安: a palace-gate 竖匾 — vertical 石青 ground, gold characters, vermilion frame with a gold edge,
   a gold 如意祥云 crown on top and a small red 「京」 seal at the foot */
.lb.city.cap{white-space:normal;text-align:center;width:1.2em;font-size:17px;font-weight:bold;letter-spacing:0;line-height:1.3;
  color:#f3d98e;text-shadow:0 1px 0 #3a2410,0 0 3px rgba(0,0,0,.35);
  background:linear-gradient(160deg,#2a4b6e,#173350 60%,#122841);background-image:linear-gradient(160deg,#2a4b6e,#173350 60%,#122841);
  padding:9px 6px 7px;border:3px solid #9b2d20;border-radius:2px;outline:1px solid #d9b45a;outline-offset:-6px;
  box-shadow:0 0 0 1.5px #d9b45a,0 4px 10px rgba(30,15,5,.45);margin-top:-14px}
.lb.city.cap::before{content:'';position:absolute;left:50%;top:-21px;width:42px;height:23px;transform:translateX(-50%);background:var(--yun) no-repeat center/42px 23px}
.lb.city.cap::after{content:attr(data-seal);position:absolute;right:-9px;bottom:-7px;width:15px;height:15px;line-height:15px;font-size:10px;letter-spacing:0;text-align:center;
  color:#fff1d6;background:#b3281c;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,230,200,.6);text-shadow:none;font-weight:normal}

/* 薄绢 · 半透明 (Wilson's pick 2026-11-05, the design-story mock option 1): event cards are thin silk, not a solid board —
   half-transparent with a light blur, so the landscape under a card stays visible. Headline and scroll cards keep their
   kind colour, at ~45% strength; text gets a soft shadow so it stays readable on any terrain. */
.lb.pop{background-color:rgba(246,239,222,.42);-webkit-backdrop-filter:blur(3px) saturate(1.1);backdrop-filter:blur(3px) saturate(1.1);
  border-color:rgba(58,42,28,.38);outline-color:rgba(184,137,58,.3);box-shadow:0 2px 8px rgba(40,25,10,.14)}
.lb.pop:not(.big){text-shadow:0 0 2px rgba(250,245,232,.9)}
.lb.pop.big.wiki,.lb.pop.big.scrollc{background-color:color-mix(in srgb,var(--kc,#5b3a7a) 40%,transparent);border-color:rgba(36,26,16,.45);outline-color:rgba(231,195,106,.55);
  text-shadow:0 1px 2px rgba(20,10,0,.5),0 0 6px rgba(20,10,0,.25)}
.lb.pop.big.wiki{background-image:linear-gradient(90deg,rgba(36,26,16,.55) 0 6px,rgba(90,67,40,.45) 6px 8px,transparent 8px calc(100% - 8px),rgba(90,67,40,.45) calc(100% - 8px) calc(100% - 6px),rgba(36,26,16,.55) calc(100% - 6px)),
  var(--yun),linear-gradient(rgba(255,255,255,.06),rgba(0,0,0,.14))}
.lb.pop.big.scrollc{background-image:var(--yun),linear-gradient(rgba(255,255,255,.06),rgba(0,0,0,.14))}

/* ---------- 讲古 (章回) and 人物视角 (Wilson 2026-11-05, the design-story mock) ---------- */
#huimu,#narr,#who,#life,#peopleOv .pnl{box-sizing:border-box}
#huimu[hidden],#narr[hidden],#who[hidden],#life[hidden],#peopleOv[hidden]{display:none!important}
.glass{background:rgba(246,239,222,.64);-webkit-backdrop-filter:blur(4px) saturate(1.1);backdrop-filter:blur(4px) saturate(1.1);border:1px solid rgba(58,42,28,.32);border-radius:2px;box-shadow:0 2px 10px rgba(40,25,10,.14)}
#ovSvg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
#ovSvg text{font-family:inherit;paint-order:stroke;stroke:#f6efdc;stroke-width:3px;stroke-linejoin:round}
#bPeople{font-size:12.5px!important;letter-spacing:0;color:#3a2a1c;padding:0}#bPeople.on{background:#2b2118!important;color:#f6ecd4!important}
#huimu{position:fixed;z-index:6;top:calc(env(safe-area-inset-top) + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 170px);text-align:center;padding:4px 12px 5px;
  border-left:0;border-right:0;border-radius:0;cursor:pointer;transition:opacity .4s}
#huimu .n{font-size:10.5px;letter-spacing:4px;color:#8e2a20}#huimu .t{font-size:13.5px;letter-spacing:1px;line-height:1.4;color:#2b2118}
#huimu .q{font-size:12px;line-height:1.45;text-wrap:balance;color:#5a4630;margin-top:2px}#huimu .more{color:#8e2a20;white-space:nowrap}#huimu.open .more{display:none}
/* battle sides line and the poem inscription card (the design-war mock A and 4) */
/* (2026-11-06, Wilson's iPhone screenshot: the last 「败」 chip ran past the card's edge) — one camp per line, each free to
   wrap inside the card, so the line can never be wider than the card on any browser; the two lines read as 对 */
.lb.pop .bsl{display:block;margin-top:3px;font-size:12px;line-height:1.7;white-space:normal}.lb.pop .bs{display:block}.lb.pop .bs.lose{opacity:.78}
.lb.pop .rz{font-style:normal;display:inline-block;padding:0 3px;margin-right:3px;border-radius:2px;color:#fff6e0;font-size:11px;line-height:15px;text-shadow:none;vertical-align:1px}
.lb.pop .rs{font-style:normal;display:inline-block;margin-left:3px;padding:0 2px;font-size:10.5px;line-height:13px;border:1px solid currentColor;border-radius:2px;vertical-align:1px}
.lb.pop .vs{display:none}
.lb.pop.poem{padding:7px 8px 6px;text-shadow:0 0 2px rgba(250,245,232,.95)}
.lb.pop.poem .pv{display:flex;flex-direction:row-reverse;gap:6px;align-items:flex-start}
.lb.pop.poem .vr{display:inline-block;rotate:90deg}   /* v136: （ ） 《 》 … in a vertical column, turned to their vertical form */
.lb.pop.poem .v{display:block;font-size:16px;line-height:1.3;text-align:center;color:#2a2018;font-family:var(--poem)}
.lb.pop.poem .v.s{font-size:10.5px;line-height:1.3;color:#5a4630}
.lb.pop.poem .sl{align-self:flex-end;font-size:10.5px;line-height:1.15;color:#fff1d6;background:#a87b14;padding:2px 1px;border-radius:2px;text-shadow:none}
#pinSvg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
/* (2026-11-07, Wilson: "呢啲卡片…我只手拉开佢…唔会挡住") — a card can be dragged off what it covers; it then rides with its place at that offset */
.lb.pop{touch-action:none;cursor:grab}.lb.pop.dragging{cursor:grabbing;box-shadow:0 8px 22px rgba(40,24,10,.38)!important;z-index:3}
#pinSvg .leadH{fill:none;stroke:rgba(250,244,228,.55);stroke-width:3.4;stroke-linecap:round}#pinSvg .lead{fill:none;stroke-linecap:round}
#pins{position:fixed;left:0;top:0;width:0;height:0;z-index:2;pointer-events:none}#pins .pin{position:absolute;left:0;top:0}#pins .pin[hidden]{display:none}
#pins i{position:absolute;left:0;top:0;border-radius:50%}
/* 单圈呼吸 (2026-11-06, Wilson picked the design-pin2 mock option 1 over the three-ring ripple: "个效果总系唔系几好") — a soft
   disk of the event's colour lies on the ground and slowly breathes; every 3.2 s a single thin ring leaves it. Calmer
   than three rings chasing each other. All parts are centred on the place (card-audit: centred), squashed by --ry. */
#pins .disk{width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--pc) 34%,transparent) 0,color-mix(in srgb,var(--pc) 18%,transparent) 55%,transparent 72%);
  transform:scaleY(var(--ry,.45));animation:pinDisk 3.2s ease-in-out infinite}
#pins .ring{box-sizing:border-box;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1.5px solid var(--pc);box-shadow:0 0 0 1px rgba(255,248,230,.6);opacity:0;animation:pinRing 3.2s ease-out infinite}
#pins .pin.bat i{visibility:hidden}
#pins .dt{box-sizing:border-box;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--pc);box-shadow:0 0 0 2px #fff4dc,0 1px 4px rgba(40,25,10,.35)}
@keyframes pinDisk{0%,100%{transform:scaleY(var(--ry,.45)) scale(.9);opacity:.8}50%{transform:scaleY(var(--ry,.45)) scale(1.1);opacity:1}}
@keyframes pinRing{0%{transform:scaleY(var(--ry,.45)) scale(.4);opacity:.9}100%{transform:scaleY(var(--ry,.45)) scale(2.1);opacity:0}}
.lb.pop::before,.lb.pop::after{display:none!important}
#capMove{position:fixed;z-index:6;left:50%;transform:translateX(-50%);padding:3px 12px;font-size:13.5px;letter-spacing:1px;color:#7a1e14;border-color:rgba(179,40,28,.5);pointer-events:none;white-space:nowrap}
#capMove[hidden]{display:none!important}
#huimu{padding-right:30px;background:rgba(246,239,222,.52)}#huimu .fold{position:absolute;top:4px;right:5px;width:20px;height:20px;line-height:18px;font-size:11px;color:#8e2a20;text-align:center;border:1px solid rgba(142,42,32,.45);border-radius:2px}
#huimu.min{padding:5px 14px;background:rgba(246,239,222,.42);box-shadow:none;border-color:rgba(58,42,28,.18)}#huimu.min .t,#huimu.min .q{display:none}#huimu.min .n{font-size:10.5px;letter-spacing:3px;color:#8e2a20}#huimu.min .n::after{content:" ›";letter-spacing:0}#huimu.min .fold{display:none}
#huimu.fresh{animation:huiIn .7s ease-out both}@keyframes huiIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
#narr{position:fixed;z-index:6;left:50%;transform:translateX(-50%);width:min(440px,calc(100vw - 20px));top:calc(env(safe-area-inset-top) + 92px);
  padding:8px 28px 8px 12px;font-size:13.5px;line-height:1.7;color:#2b2118;max-height:42vh;overflow:auto}
#narr p{margin:0 0 4px}#narr .say{color:#8e2a20}
#narr .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}#narr .chip{font-size:11.5px;line-height:1.5;padding:1px 8px;border:1px solid rgba(58,42,28,.4);border-radius:10px;background:rgba(255,255,255,.45)}
#narr .chip.fu{border-color:rgba(142,42,32,.6);color:#8e2a20}
#narr .cliff{margin-top:5px;color:#5a4630;font-size:12.5px}
#narr .x,#who .x{position:absolute;right:6px;top:4px;border:0;background:none;font-size:16px;color:#5a4630;cursor:pointer;font-family:inherit;padding:2px 4px}
#who{position:fixed;z-index:6;left:10px;top:calc(env(safe-area-inset-top) + 8px);display:flex;gap:9px;align-items:flex-start;padding:8px 26px 8px 10px;max-width:min(330px,calc(100vw - 100px))}
#who .face{flex:none;width:38px;height:46px;border:1px solid rgba(58,42,28,.5);background:radial-gradient(ellipse at 50% 35%,#efe4c8 0 36%,#cbb994 37% 100%);font-size:21px;line-height:46px;text-align:center;color:#4a3a28}
#who .nm{font-size:17px;letter-spacing:2px}#who .st{font-size:12px;color:#5a4630;line-height:1.5}#who .tx{font-size:13.5px;line-height:1.55;margin-top:2px}#who .src{font-size:10.5px;color:#8a7a62}
#life{position:fixed;z-index:6;left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 20px));bottom:calc(env(safe-area-inset-bottom) + 110px + var(--vvb,0px));padding:6px 10px 5px}
/* (2026-11-06, Wilson: "生平…直接套喺进度条上…颜色同地图连线一样…有个进度点…唔同时间发生咩转折") — the life bar is
   the person's phases in their colours (the same colours the route uses on the map), the part not yet lived faded; a
   tick for every stop (tap to go there), a diamond where a new phase begins, and a dot for "now" */
#life .trk{position:relative;margin:4px 0 2px;height:16px}
#life .bar{position:absolute;left:0;right:0;top:3px;display:flex;height:10px;border-radius:5px;overflow:hidden}#life .bar i{height:100%}
#life .fut{position:absolute;top:0;bottom:0;right:0;background:rgba(246,239,222,.62);transition:left .8s}
#life .tk{position:absolute;top:1px;width:12px;height:14px;margin-left:-6px;cursor:pointer;pointer-events:auto}
#life .tk::after{content:'';position:absolute;left:5px;top:2px;width:2px;height:10px;background:rgba(43,33,24,.55);border-radius:1px}
#life .tk.turn::after{left:2px;top:3px;width:7px;height:7px;background:var(--c);border:1.2px solid #fff4dc;border-radius:1px;transform:rotate(45deg)}
#life .now{position:absolute;top:-2px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#fff6e2;border:2.5px solid var(--c,#8e2a20);box-sizing:border-box;
  box-shadow:0 1px 4px rgba(40,25,10,.35);transition:left .8s,border-color .8s;font-size:10px;line-height:15px;text-align:center;color:#2b2118;pointer-events:none}
#life .lbl{position:relative;height:29px;font-size:11px;color:#5a4630}#life .lbl span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-weight:bold}#life .lbl span.cur{text-decoration:underline;text-underline-offset:3px}
#life .ends{display:flex;justify-content:space-between;font-size:10.5px;color:#5a4630}
#peopleOv{position:fixed;inset:0;z-index:44;background:rgba(20,14,8,.35);display:flex;align-items:center;justify-content:center}
#peopleOv .pnl{width:min(380px,calc(100vw - 30px));padding:12px 12px 8px}
#peopleOv h3{margin:0 0 8px;font-size:16px;letter-spacing:3px;text-align:center}
#peopleOv .p{display:flex;gap:10px;align-items:center;padding:7px 6px;border-top:1px solid rgba(58,42,28,.18);cursor:pointer}
#peopleOv .p:hover{background:rgba(255,255,255,.35)}#peopleOv .p .face{width:32px;height:38px;line-height:38px;font-size:18px;text-align:center;border:1px solid rgba(58,42,28,.45);background:#efe4c8}
#peopleOv .p b{font-size:15.5px;letter-spacing:1px}#peopleOv .p small{display:block;font-size:11.5px;color:#5a4630}
body.pmode #huimu,body.pmode #narr{display:none}
@media (max-width:560px){#life{bottom:calc(env(safe-area-inset-bottom) + 146px + var(--vvb,0px))}#huimu{max-width:calc(100vw - 132px)}#huimu .t{font-size:13px}}
.lb.city.cap.fallen{filter:grayscale(.85) brightness(.92);opacity:.8}

/* 人物视角 v2: portraits, the 交集 strip, crossing card, map markers (portraits are later imaginings) */
body.pmode #lgb{display:none}
#who img.face{flex:none;width:46px;height:58px;object-fit:cover;border:1px solid rgba(58,42,28,.5);border-radius:2px;background:#efe4c8}
body.pmode #who{max-width:min(420px,calc(100vw - 20px))}
#who.xmode{display:block;padding:8px 26px 8px 10px}
#who.xmode .hd{display:flex;gap:6px;align-items:center}
#who.xmode .hd .face{width:40px;height:50px;line-height:50px}
#who.xmode .hd .face.o{width:34px;height:42px;line-height:42px;opacity:.92}
#who.xmode .vs{font-size:13px;color:#8a7a62}
#who.xmode .hd>div:last-child{margin-left:4px;min-width:0}
#who.xmode .nm{font-size:15.5px;letter-spacing:1px}#who.xmode .nm small{font-size:11px;color:#8a7a62}
#who .xk{margin-top:6px;font-size:12.5px;line-height:20px;color:#5a4630}
#who .xk i{font-style:normal;display:inline-block;vertical-align:top;margin:1px 5px 0 0;width:18px;height:18px;line-height:18px;text-align:center;color:#fff4dc;font-size:12px;border-radius:2px}
#who .xk b{color:#2b2118}
#who .po{margin:4px 0 2px;padding-left:8px;border-left:2px solid rgba(179,40,28,.5);font-size:15px;line-height:1.5;color:#1b160e;font-family:var(--poem)}
#who .nav{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px;font-size:12px;color:#5a4630}
#who .nav button{font-family:inherit;font-size:12.5px;padding:4px 9px;border:1px solid rgba(58,42,28,.45);background:rgba(255,250,238,.85);border-radius:12px;cursor:pointer;color:#2b2118}
#who .nav button:disabled{opacity:.35;cursor:default}
#who .nav .film{background:#8e2a20;color:#fff4dc;border-color:#8e2a20}
#who .nav .sw{margin-left:auto}
#life .xm{position:absolute;top:-7px;width:9px;height:9px;margin-left:-4.5px;background:var(--c);border:1px solid #fff4dc;transform:rotate(45deg);cursor:pointer;pointer-events:auto;z-index:1}
#life .xm.on{width:13px;height:13px;margin-left:-6.5px;top:-9px;box-shadow:0 0 0 2px rgba(179,40,28,.35)}
#xs{position:fixed;z-index:6;left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 20px));bottom:calc(env(safe-area-inset-bottom) + 190px + var(--vvb,0px));display:flex;align-items:center;gap:6px;padding:5px 6px;box-sizing:border-box}
#xs[hidden]{display:none!important}
#xs .h{flex:none;font-size:12.5px;line-height:1.15;text-align:center;color:#5a4630}#xs .h small{display:block;font-size:10px;margin-top:2px}
#xs .row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}#xs .row::-webkit-scrollbar{display:none}
#xs .xc{flex:none;display:flex;align-items:center;gap:5px;padding:3px 8px 3px 3px;border:0;border-radius:20px;background:rgba(255,250,238,.82);box-shadow:0 1px 3px rgba(43,33,24,.2);font-family:inherit;cursor:pointer;color:#2b2118;text-align:left}
#xs .xc .f{width:28px;height:34px;object-fit:cover;border-radius:14px;background:#efe4c8;font-size:15px;line-height:34px;text-align:center}
#xs .xc b{display:block;font-size:13px;letter-spacing:1px}#xs .xc small{display:block;font-size:10.5px;color:#5a4630;white-space:nowrap}
.pmark{position:fixed;left:0;top:0;z-index:4;pointer-events:none;width:34px;height:34px;margin:-44px 0 0 -17px;border-radius:50%;border:2.5px solid var(--c);background:#efe4c8;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pmark .f{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;font-size:16px;line-height:30px;text-align:center}
.pmark[hidden]{display:none}
@keyframes pcapIn{from{opacity:0}to{opacity:1}}
#peopleOv .ls{max-height:min(62vh,520px);overflow-y:auto}
#peopleOv .p img.face{width:32px;height:40px;object-fit:cover;border:1px solid rgba(58,42,28,.45);flex:none}
#peopleOv h4{margin:8px 0 2px;font-size:12px;font-weight:normal;color:#8a7a62;letter-spacing:1px}
#peopleOv .xn{color:#8e2a20!important}
#peopleOv .nt{margin:6px 0 0;font-size:10.5px;color:#8a7a62;text-align:center}
@media (max-width:560px){#xs{bottom:calc(env(safe-area-inset-bottom) + 226px + var(--vvb,0px))}#who.xmode .tx{font-size:13px}}
/* short screens (phone landscape): an open crossing takes the top; the life bar steps aside, the strip sits under the card */
@media (max-height:500px){body.xopen #life{display:none}body.xopen #xs{bottom:calc(env(safe-area-inset-bottom) + 112px + var(--vvb,0px))}
  #who.xmode{max-height:calc(100vh - 190px);overflow-y:auto}#who.xmode .tx{font-size:12.5px;line-height:1.45}}
/* v124 人物视角 lifeline: travelled = solid line in his colour on a pale casing; ahead = thin faint line; motion only on
   the leg being walked (comet tail); crossing arcs solid, dotted when no meeting is recorded */
#pRoute{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
#pRoute path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#pRoute .dh{stroke:rgba(250,244,228,.85);stroke-width:5.6}
#pRoute .dt{stroke-width:3.4}
#pRoute .ln{stroke-width:3.4}
#pRoute .ln.fut{stroke-width:1.5;opacity:.4;stroke-dasharray:.5 6}
.lb.pop.pstop{max-width:min(230px,calc(100vw - 16px))}
.lb.pop.pstop small{color:#3a2a1c}
/* v131: one poem card in both modes — the 编年体 inscription with a 吟 button under it; in 人物传 the stop sits on one
   line above (.sh) and 1/2 › steps through several poems. A crossing's card (.pcross) is the same map card, on its
   landing point. */
.lb.pop.poem .pft{display:flex;justify-content:center;gap:6px;margin-top:5px}
.lb.pop .yinb,.lb.pop .pnx{font:13px/1 inherit;font-family:inherit;color:#fff6e0;background:#8e2a20;border:none;border-radius:11px;padding:4px 9px 4px 10px;cursor:pointer;text-shadow:none;box-shadow:0 1px 2px rgba(40,25,10,.3)}
.lb.pop .yinb small{font-size:10px;margin-left:4px;opacity:.85;color:inherit}
.lb.pop .pnx{background:rgba(90,70,48,.14);color:#5a4630;box-shadow:none;padding:4px 8px}
.lb.pop.poem.pstop .sh{display:block;font-size:11.5px;line-height:1.35;white-space:nowrap;margin:0 0 5px;color:#3a2a1c;text-align:left}
.lb.pop.poem.pstop .sh .kd{width:16px;height:16px;font-size:10.5px;margin-right:3px;vertical-align:-3px}
.lb.pop.poem.pstop .sh b{color:var(--pc)}
.lb.pop.pcross{max-width:min(230px,calc(100vw - 16px));border-color:var(--kc)}
.lb.pop.pcross .kh .f{width:20px;height:20px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1.5px solid var(--c);background:#efe4c8;box-sizing:border-box;font-size:10px;line-height:17px;text-align:center;display:inline-block}
.lb.pop.pcross b{color:#8e2a20}.lb.pop.pcross small{color:#3a2a1c}
#wikiOv .wyin{display:block;margin:10px auto 2px;font:15px "LXGW WenKai",serif;color:#fff6e0;background:#8e2a20;border:none;border-radius:16px;padding:6px 16px;cursor:pointer}
/* v130 落脚点: a crossing's landing point (the #pins 单圈呼吸 pin on a paper-cream base) + one-line caption. #pLand sits
   at z-index 3, above #pRoute's ink dots and #ovSvg's stop dots (2); the moving portrait (.pmark, 4) stays above it */
#pLand{position:fixed;left:0;top:0;width:0;height:0;z-index:3;pointer-events:none}#pLand[hidden],#pLand [hidden]{display:none}
#pLand .lp{position:absolute;left:0;top:0;transition:opacity .8s}
#pLand .lp i{position:absolute;left:0;top:0;border-radius:50%}
#pLand .base{width:34px;height:34px;margin:-17px 0 0 -17px;transform:scaleY(var(--ry,.45));background:radial-gradient(circle,rgba(250,244,228,.92) 0,rgba(250,244,228,.8) 45%,rgba(250,244,228,0) 72%)}
#pLand .disk{width:44px;height:44px;margin:-22px 0 0 -22px;background:radial-gradient(circle,color-mix(in srgb,var(--pc) 42%,transparent) 0,color-mix(in srgb,var(--pc) 22%,transparent) 55%,transparent 72%);transform:scaleY(var(--ry,.45));animation:pinDisk 3.2s ease-in-out infinite}
#pLand .ring{box-sizing:border-box;width:44px;height:44px;margin:-22px 0 0 -22px;border:1.5px solid var(--pc);box-shadow:0 0 0 1px rgba(255,248,230,.6);opacity:0;animation:pinRing 3.2s ease-out infinite}
#pLand .dt{box-sizing:border-box;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--pc);box-shadow:0 0 0 2px #fff4dc,0 1px 4px rgba(40,25,10,.35)}
#pLand .hit{width:44px;height:44px;margin:-22px 0 0 -22px;cursor:pointer;pointer-events:auto}
#pLand .lp.old{opacity:.5}#pLand .lp.old .ring{animation:none;opacity:0}#pLand .lp.old .disk{animation:none}
#wikiOv .wfaces{display:flex;flex:none;margin-top:2px}#wikiOv .wfaces span+span{margin-left:-8px}
#wikiOv .wfaces .wf{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid var(--c);background:#efe4c8;box-sizing:border-box;display:block;font-size:14px;line-height:26px;text-align:center}
#wikiOv .wq{font-size:12.5px;color:#6b5a44;margin:0 0 6px}#wikiOv .wsrc{font-size:13px}
@media (prefers-reduced-motion:reduce){  #pLand .ring{animation:none;opacity:.55;transform:scaleY(var(--ry,.45)) scale(1.3)}#pLand .lp{transition:none}#pLand .lp.old .ring{opacity:0}}

/* v124 selected state (2026-11-10 17:50, Wilson: 选中嗰个框好肉酸) — no box round the row or chip: the portrait carries a
   ring in the person's colour; selected/hover/keyboard focus = thicker ring + soft glow + a slight lift and a tint.
   Same look in the 人物 picker and the 交集 chips. */
#peopleOv .p,#xs .xc{-webkit-tap-highlight-color:transparent;outline:none;transition:background-color .2s,transform .2s}
#peopleOv .p .face,#peopleOv .p img.face{border:0;border-radius:9px;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 70%,transparent);transition:box-shadow .2s,transform .2s}
#xs .xc .f{box-shadow:0 0 0 1.5px var(--c);transition:box-shadow .2s,transform .2s}
#xs .xc.soft{opacity:.85}#xs .xc.soft .f{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 45%,transparent)}
#peopleOv .p:hover,#peopleOv .p.on,#peopleOv .p:focus-visible,#xs .xc.on,#xs .xc:focus-visible{background:color-mix(in srgb,var(--c) 13%,#fff8ea)}
#peopleOv .p:hover .face,#peopleOv .p.on .face,#peopleOv .p:focus-visible .face,#xs .xc.on .f,#xs .xc:focus-visible .f{box-shadow:0 0 0 2.5px var(--c),0 0 12px 3px color-mix(in srgb,var(--c) 50%,transparent);transform:scale(1.07)}
#xs .xc.on{opacity:1;box-shadow:0 2px 8px color-mix(in srgb,var(--c) 35%,transparent)}
#peopleOv .p.on b,#xs .xc.on b{color:color-mix(in srgb,var(--c) 70%,#2b2118)}
#peopleOv .p:focus-visible,#xs .xc:focus-visible{box-shadow:inset 3px 0 0 var(--c)}
@media (prefers-reduced-motion:reduce){#peopleOv .p .face,#xs .xc .f{transition:none;transform:none!important}}
/* v133: in 人物传 the card sits just above the protagonist's portrait — fade in place, no 12px rise through the portrait */
.pmode .lb.pop{animation:popfade .35s ease-out}.pmode .lb.pop.war{animation:popfade .35s ease-out,warpulse 1.1s ease-in-out 3}
@keyframes popfade{from{opacity:0}to{opacity:1}}
/* 联系: same silk button + panel as 图例, sitting just left of it */
#ctb{position:fixed;top:calc(env(safe-area-inset-top) + 8px);right:72px;z-index:6;font-family:inherit;font-size:13px;color:#2b2118;border-radius:1px;background:var(--silk);border:1px solid var(--ink);outline:1px solid rgba(184,137,58,.55);outline-offset:-4px;padding:5px 12px}
#ct{position:fixed;top:calc(env(safe-area-inset-top) + 42px);right:8px;z-index:6;font-size:13px;line-height:2;display:none;padding:6px 12px;box-shadow:0 2px 10px rgba(0,0,0,.2);background-color:var(--silk);border:1px solid var(--ink);outline:1px solid rgba(184,137,58,.5);outline-offset:-4px;border-radius:1px}
#ct.on{display:block}
#ct a{color:#8a2a1e;text-decoration:none}
body.pmode #ctb{display:none}