:root{
  --paper:#f7f1e3; --paper2:#efe6d1; --ink:#27221b; --ink2:#5d5446; --mute:#8b8170;
  --vermilion:#b5342a; --gold:#b98a2e; --celadon:#d9e7e1; --line:#d8ccb2;
  --land:#f8f1dd; --land-line:#cdbd92; --ocean1:#cfe3e1; --ocean2:#b4d0cf;
  --c-land:#d9642a; --c-steppe:#c8962b; --c-sea:#1f8a9a; --c-galleon:#7a4bb0; --c-modern:#4e8f3a;
  --serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","SimSun",serif;
  --sans:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --tl-bg:#1f2829; --tl-ink:#e9e1cd;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
#app{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:minmax(0,1fr) 172px;height:100vh;width:100vw;overflow:hidden}

/* ---------- 地图 ---------- */
#mapwrap{position:relative;grid-column:1;grid-row:1;overflow:hidden;background:linear-gradient(180deg,var(--ocean1),var(--ocean2))}
#map{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#map:active{cursor:grabbing}
.paper-grain{position:absolute;inset:0;pointer-events:none;opacity:.2;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .25  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.root{--sw:1}
.sphere{fill:url(#oceanGrad);stroke:#9db7ae;stroke-width:calc(var(--sw)*1.2)}
.graticule{fill:none;stroke:#fff;stroke-opacity:.55;stroke-width:calc(var(--sw)*.6);stroke-dasharray:calc(var(--sw)*2) calc(var(--sw)*4)}
.land{fill:var(--land);stroke:none}
.borders{fill:none;stroke:var(--land-line);stroke-width:calc(var(--sw)*.55);stroke-linejoin:round}
.coast{fill:none;stroke:#8f9f86;stroke-width:calc(var(--sw)*.9);stroke-linejoin:round}
.prov{fill:#f4dcc6;stroke:#d6a98a;stroke-width:calc(var(--sw)*.5);stroke-linejoin:round}
.cn-out{fill:none;stroke:#b5342a;stroke-width:calc(var(--sw)*1.3);stroke-linejoin:round;opacity:.85}
.jd{fill:none;stroke:#b5342a;stroke-width:calc(var(--sw)*1.2);stroke-linecap:round;opacity:.9}
.silk{fill:none;stroke-width:calc(var(--sw)*1.6);stroke-dasharray:calc(var(--sw)*5) calc(var(--sw)*5);opacity:.5;stroke-linecap:round}
.ghost{fill:none;stroke-width:calc(var(--sw)*1.2);opacity:0;transition:opacity .5s;stroke-linecap:round}
.ghost.on{opacity:.2}
.route{fill:none;stroke-width:calc(var(--sw)*3.2);stroke-linecap:round;stroke-linejoin:round}
.route-halo{fill:none;stroke:#fffdf6;stroke-width:calc(var(--sw)*6.4);stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.t-land{stroke:var(--c-land);background:var(--c-land)}
.t-steppe{stroke:var(--c-steppe);background:var(--c-steppe)}
.t-sea{stroke:var(--c-sea);background:var(--c-sea)}
.t-galleon{stroke:var(--c-galleon);background:var(--c-galleon)}
.t-modern{stroke:var(--c-modern);background:var(--c-modern)}
.hidden{display:none}

/* 覆盖层文字 */
.over text{font-family:var(--sans);paint-order:stroke;stroke:rgba(255,252,243,.92);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.geo-label{font-size:15px;letter-spacing:.35em;fill:#8aa59b;font-family:var(--serif);stroke:none !important;opacity:.85}
.geo-label.ocean{fill:#7f9fa3;font-style:italic;letter-spacing:.5em}
.place-dot{fill:#fff;stroke:#6b5a3a;stroke-width:1.4}
.place-n{font-size:12px;fill:#40382b;font-weight:600}
.place-s{font-size:10px;fill:#8b7d60}
.road-n{font-size:11px;font-style:italic;fill:#7a6a45}
.prov-n{font-size:10px;fill:#9a5a3c;opacity:.9}
.wp-n{font-size:11.5px;fill:#2b241b;font-weight:600}
.wp-n.end{font-size:12.5px;fill:#8f2219;font-weight:700}
.wp-n.start{font-size:12.5px;fill:#1e5d69;font-weight:700}
.wp-dot{fill:#fff;stroke-width:2}
.origin-pin{fill:#fff;stroke:#27221b;stroke-width:2}
.cn-label{font-size:30px;letter-spacing:.6em;fill:#b5342a;opacity:.38;font-family:var(--serif);font-weight:700;stroke:none !important}

/* 食材圆章标记 */
.mk{cursor:pointer;transition:opacity .35s}
.mk .ring{fill:#fffdf6;stroke:#b8a77e;stroke-width:2.2;filter:drop-shadow(0 2px 3px rgba(40,30,10,.35))}
.mk .halo{fill:none;stroke-width:3;opacity:0}
.mk image{pointer-events:none}
.mk .lead{stroke:#6b5a3a;stroke-width:1;stroke-dasharray:2 2}
.mk .nm{font-size:11px;font-weight:700;fill:#2b241b;opacity:0;transition:opacity .2s}
.mk:hover .nm,.mk.sel .nm{opacity:1}
.mk:hover .ring{stroke:#b5342a}
.mk.sel .ring{stroke:#b5342a;stroke-width:3.5}
.mk.dim{opacity:.5}
.mk.off{opacity:0;pointer-events:none}
.mk.pop .halo{animation:halo 1.6s ease-out 1}
@keyframes halo{0%{opacity:.9;r:20}100%{opacity:0;r:48}}
.mk.new .ring{animation:newpulse 1.2s ease-out 1}
@keyframes newpulse{0%{stroke:#b5342a;stroke-width:6}100%{stroke-width:2.2}}

/* 品牌 */
.brand{position:absolute;left:16px;top:14px;display:flex;gap:10px;align-items:center;padding:8px 14px 8px 10px;background:rgba(251,247,236,.88);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(60,40,10,.12);pointer-events:none}
.seal{width:38px;height:38px;border-radius:6px;background:var(--vermilion);color:#fbe9d8;display:grid;place-items:center;font:700 22px/1 var(--serif);transform:rotate(-4deg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.brand h1{margin:0;font:700 19px/1.1 var(--serif);letter-spacing:.12em}
.brand p{margin:3px 0 0;font-size:11px;color:var(--ink2);letter-spacing:.04em}

.map-tools{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.pill{border:1px solid var(--line);background:rgba(251,247,236,.92);padding:8px 14px;border-radius:999px;font-size:13px;color:var(--ink);box-shadow:0 3px 10px rgba(60,40,10,.12)}
.pill.strong{background:var(--vermilion);border-color:var(--vermilion);color:#fff;font-weight:600}
.pill:hover{filter:brightness(1.05)}
.zoom{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:0 3px 10px rgba(60,40,10,.12)}
.zoom button{width:34px;height:34px;border:0;background:rgba(251,247,236,.95);font-size:18px;color:var(--ink);border-bottom:1px solid var(--line)}
.zoom button:last-child{border-bottom:0}
.zoom button:hover{background:#fff}

.legend{position:absolute;left:14px;bottom:14px;width:178px;padding:10px 12px;background:rgba(251,247,236,.9);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px;font-size:11.5px;color:var(--ink2);box-shadow:0 4px 14px rgba(60,40,10,.12)}
.legend-title{font-weight:700;color:var(--ink);margin-bottom:5px;font-size:12px;letter-spacing:.08em}
.lg,.lg-row{display:flex;align-items:center;gap:7px;line-height:1.9}
.lg input{margin:0;accent-color:var(--vermilion)}
.ln{display:inline-block;width:22px;height:0;border-top:3px solid;border-radius:2px;background:none !important}
.ln.t-land{border-color:var(--c-land)}.ln.t-steppe{border-color:var(--c-steppe)}.ln.t-sea{border-color:var(--c-sea)}.ln.t-galleon{border-color:var(--c-galleon)}.ln.t-modern{border-color:var(--c-modern)}
.ln.dim{border-color:#8a7f6a;opacity:.55}
.cats{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;padding-top:7px;border-top:1px dashed var(--line)}
.chip{border:1px solid var(--line);background:#fffaf0;color:var(--ink2);border-radius:999px;padding:2px 8px;font-size:11px}
.chip.on{background:var(--ink);color:#f7f1e3;border-color:var(--ink)}
.mapnote{position:absolute;left:206px;bottom:8px;right:70px;font-size:10px;color:#6f7d77;opacity:.9;pointer-events:none;line-height:1.4}
.tip{position:absolute;pointer-events:none;background:#27221b;color:#f7f1e3;font-size:12px;padding:6px 10px;border-radius:8px;opacity:0;transform:translate(-50%,-130%);transition:opacity .15s;white-space:nowrap;z-index:5;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.tip.on{opacity:1}
.tip b{font-family:var(--serif);font-size:14px}
.tip small{display:block;color:#cdbf9d;margin-top:2px}

/* ---------- 面板 ---------- */
#panel{grid-column:2;grid-row:1;background:var(--paper);border-left:1px solid var(--line);overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin;scrollbar-color:#cdbf9d transparent}
#panel .inner{padding:0 0 28px;animation:fadein .45s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.p-top{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 0;font-size:12px;color:var(--mute)}
.p-top button{border:0;background:none;color:var(--ink2);font-size:12px;padding:4px 8px;border-radius:6px}
.p-top button:hover{background:#ece2c9}
.stage{position:relative;height:262px;margin:6px 14px 0;border-radius:18px;perspective:900px;overflow:hidden;display:grid;place-items:center;cursor:grab;background:radial-gradient(circle at 50% 38%,#fffdf7 0%,var(--tint,#f3e6c8) 62%,var(--tint2,#e7d6ae) 100%);box-shadow:inset 0 0 0 1px rgba(120,95,40,.18)}
.stage:active{cursor:grabbing}
.stage .spot{position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.75),transparent 46%);pointer-events:none;mix-blend-mode:soft-light}
.stage .floor{position:absolute;bottom:26px;left:50%;width:170px;height:26px;margin-left:-85px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(60,40,10,.34),transparent 70%);filter:blur(3px);animation:shadowf 4.2s ease-in-out infinite}
@keyframes shadowf{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.86);opacity:.6}}
.obj{position:relative;width:208px;height:208px;transform-style:preserve-3d;transition:transform .18s ease-out;animation:floaty 4.2s ease-in-out infinite}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -9px}}
.obj img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
.obj img.back{filter:brightness(.62) saturate(.9)}
.obj img.front{filter:drop-shadow(0 6px 8px rgba(40,25,5,.22))}
.stage .hint{position:absolute;right:10px;bottom:8px;font-size:10.5px;color:#8b7a52;opacity:.8;pointer-events:none}
.stage .badge{position:absolute;left:12px;top:12px;font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.75);color:var(--ink2);border:1px solid rgba(120,95,40,.2)}
.f-head{padding:14px 20px 0}
.f-name{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.f-name h2{margin:0;font:700 34px/1.1 var(--serif);letter-spacing:.06em}
.f-alias{font-size:13px;color:var(--mute)}
.f-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{font-size:11.5px;padding:3px 9px;border-radius:999px;background:#ece2c9;color:#5a4d34}
.tag.era{background:var(--ink);color:#f7f1e3}
.tag.route{color:#fff}
.way{margin:12px 20px 0;padding:10px 12px;border-radius:12px;background:#fffaf0;border:1px solid var(--line);font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.way b{font-family:var(--serif);font-size:14.5px}
.way .arrow{color:var(--vermilion);font-weight:700}
.way small{color:var(--mute);flex-basis:100%}
.sec{padding:16px 20px 0}
.sec h3{margin:0 0 8px;font:700 13px/1 var(--sans);letter-spacing:.2em;color:var(--vermilion);display:flex;align-items:center;gap:8px}
.sec h3::after{content:"";flex:1;height:1px;background:var(--line)}
.story{font-family:var(--serif);font-size:15.5px;line-height:1.95;color:#2e271e;text-align:justify}
.dishes{display:flex;flex-wrap:wrap;gap:6px}
.dish{font-size:12.5px;padding:4px 10px;border-radius:8px;background:#fff;border:1px dashed #cdbd93;color:#4b3f29}
.herb-note{margin-top:8px;font-size:12px;color:#7a3a4a;background:#f7e8ea;border-radius:8px;padding:6px 10px}
.cmp-item{margin:0 0 8px;padding:9px 11px;border-radius:10px;background:#fffaf0;border:1px solid var(--line);border-left:4px solid var(--sc,#999);font-size:13px;line-height:1.75}
.cmp-item b{font-size:12px;color:var(--sc,#555);display:block;margin-bottom:2px}
.debate{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fbefe3;border:1px solid #ebc9a6;font-size:13px;line-height:1.8;color:#5b3a19}
.debate b{color:#9a3c12}
.src-chips{display:flex;flex-wrap:wrap;gap:6px}
.src-chip{font-size:11.5px;padding:3px 9px;border-radius:6px;color:#fff;background:var(--sc)}
.nav2{display:flex;gap:8px;padding:18px 20px 0}
.nav2 button{flex:1;border:1px solid var(--line);background:#fffaf0;padding:10px 8px;border-radius:10px;color:var(--ink);font-size:13px;display:flex;align-items:center;gap:8px;text-align:left;min-width:0}
.nav2 button:hover{background:#fff;border-color:#b8a77e}
.nav2 img{width:30px;height:30px;object-fit:contain;flex:none}
.nav2 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav2 small{display:block;color:var(--mute);font-size:10.5px}

/* 时代卡 / 引言 */
.era-hero{padding:22px 20px 6px;background:linear-gradient(180deg,var(--ec,#b5532a) -140%,transparent 80%)}
.era-hero .rng{font-size:12px;color:var(--ink2);letter-spacing:.15em}
.era-hero h2{margin:4px 0 8px;font:700 36px/1.1 var(--serif);letter-spacing:.1em}
.era-hero p{margin:0;font-family:var(--serif);font-size:15px;line-height:1.85;color:#40372a}
.prefix{display:flex;gap:12px;align-items:center;margin:14px 20px 0;padding:12px;border-radius:12px;background:#fffaf0;border:1px solid var(--line)}
.prefix .g{font:700 44px/1 var(--serif);color:var(--vermilion);width:58px;text-align:center}
.prefix p{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink2)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.card{border:1px solid var(--line);background:#fffaf0;border-radius:12px;padding:8px 6px 7px;text-align:center;font-size:12px;position:relative;transition:transform .15s,box-shadow .15s;min-width:0}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 16px rgba(60,40,10,.15);background:#fff}
.card img{width:70px;height:70px;object-fit:contain;display:block;margin:0 auto 2px;filter:drop-shadow(0 4px 4px rgba(40,25,5,.2))}
.card b{display:block;font-family:var(--serif);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card small{color:var(--mute);font-size:10.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.later{opacity:.38;filter:grayscale(.8)}
.intro{padding:26px 22px 0}
.intro .kick{font-size:12px;letter-spacing:.3em;color:var(--vermilion);font-weight:700}
.intro h2{margin:8px 0 10px;font:700 30px/1.25 var(--serif);letter-spacing:.05em}
.intro p{font-family:var(--serif);font-size:15px;line-height:1.95;color:#40372a;margin:0 0 10px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.stat{border-radius:12px;background:#fffaf0;border:1px solid var(--line);padding:10px 8px;text-align:center}
.stat b{display:block;font:700 26px/1.1 var(--serif);color:var(--vermilion)}
.stat span{font-size:11.5px;color:var(--ink2)}
.cta{display:flex;gap:10px;margin-top:6px}
.btn{border:1px solid var(--ink);background:var(--ink);color:#f7f1e3;padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;flex:1}
.btn.alt{background:#fffaf0;color:var(--ink);border-color:var(--line)}
.btn:hover{filter:brightness(1.12)}
.src-list{margin:14px 0 0;padding:0;list-style:none}
.src-list li{display:flex;gap:10px;font-size:12.5px;line-height:1.6;padding:7px 0;border-top:1px dashed var(--line)}
.src-list i{flex:none;width:8px;border-radius:4px;background:var(--sc)}
.src-list small{color:var(--mute);display:block}
.tl-title{padding:14px 20px 0;font-size:11px;color:var(--mute);letter-spacing:.2em}

/* ---------- 时间轴 ---------- */
#timeline{grid-column:1 / span 2;grid-row:2;background:var(--tl-bg);color:var(--tl-ink);display:grid;grid-template-columns:230px minmax(0,1fr);border-top:3px solid #0f1516;position:relative}
.tl-left{padding:10px 16px;border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:2px;justify-content:center}
.tl-year{font:700 30px/1.05 var(--serif);letter-spacing:.04em;color:#fff7e0}
.tl-era{font-size:13px;color:#d6c597;letter-spacing:.1em}
.tl-count{font-size:11.5px;color:#9fb3ad;margin-bottom:6px}
.tl-ctrl{display:flex;gap:6px;align-items:center}
.tl-ctrl button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#f1e8cf;font-size:13px;display:grid;place-items:center;padding:0}
.tl-ctrl button.play{width:44px;height:44px;background:var(--vermilion);border-color:var(--vermilion);color:#fff;font-size:16px}
.tl-ctrl button:hover{background:rgba(255,255,255,.18)}
.tl-ctrl button.play:hover{background:#cf3f33}
.tl-ctrl select{background:rgba(255,255,255,.08);color:#f1e8cf;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:6px 6px;font-size:12px}
.tl-track-wrap{padding:8px 22px 8px 18px;display:flex;align-items:stretch}
.tl-track{position:relative;flex:1;cursor:ew-resize;touch-action:none;user-select:none}
.tl-nodes{position:absolute;left:0;right:0;top:0;bottom:30px}
.tl-eras{position:absolute;left:0;right:0;bottom:0;height:26px;display:flex}
.era-seg{height:100%;cursor:pointer;border-left:1px solid rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;font-size:11.5px;letter-spacing:.05em;color:#17110a;font-weight:600;overflow:hidden;white-space:nowrap;background:var(--ec);opacity:.92}
.era-seg:first-child{border-radius:6px 0 0 6px;border-left:0}.era-seg:last-child{border-radius:0 6px 6px 0}
.era-seg.active{filter:brightness(1.18);opacity:1;box-shadow:inset 0 -3px 0 #fff}
.tl-head{position:absolute;top:-2px;bottom:0;width:0;pointer-events:none;transition:left .6s cubic-bezier(.2,.7,.2,1)}
.tl-track.drag .tl-head{transition:none}
.wpg{transition:opacity .4s}
.ship circle{fill:#fff;stroke-width:3}
.over .mk,.over .wpg{pointer-events:auto}
.era-seg:hover{filter:brightness(1.12)}
.tl-head::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#ff7c6d,#ffe5a8);box-shadow:0 0 10px rgba(255,140,110,.9)}
.tl-head span{position:absolute;left:-7px;top:-4px;width:14px;height:14px;border-radius:50%;background:#ff8e7e;border:2px solid #fff;box-shadow:0 0 10px rgba(255,140,110,.9)}
.tn{position:absolute;width:26px;height:26px;margin-left:-13px;border-radius:50%;border:2px solid #cdbf9d;background:#fbf5e4;padding:0;overflow:hidden;transition:transform .15s,opacity .3s,border-color .2s,box-shadow .2s;opacity:.28;filter:grayscale(.85)}
.tn img{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block;transform:scale(1.12)}
.tn.past{opacity:1;filter:none}
.tn.hide{display:none}
.tn:hover{transform:scale(1.45);z-index:5;opacity:1;filter:none;border-color:#fff}
.tn.sel{transform:scale(1.65);z-index:6;border-color:#ff7c6d;box-shadow:0 0 0 3px rgba(255,124,109,.35),0 0 14px rgba(255,124,109,.7);opacity:1;filter:none}
.tn::after{content:"";position:absolute;left:50%;top:100%}
.tn-stem{position:absolute;width:1px;background:rgba(255,255,255,.14);pointer-events:none}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;background:rgba(25,20,10,.55);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:50;animation:fadein .25s}
.modal[hidden]{display:none}
.modal-card{position:relative;width:min(1180px,94vw);height:min(820px,92vh);background:var(--paper);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden;border:1px solid #c8b88f}
.modal-x{position:absolute;right:14px;top:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fffaf0;font-size:22px;line-height:1;color:var(--ink2);z-index:3}
.modal-x:hover{background:#fff}
.tabs{display:flex;gap:4px;padding:14px 60px 0 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#efe6d1,var(--paper));overflow-x:auto}
.tab{border:0;background:none;padding:10px 16px;font-size:14px;color:var(--ink2);border-bottom:3px solid transparent;white-space:nowrap;font-weight:600;letter-spacing:.06em}
.tab.on{color:var(--vermilion);border-bottom-color:var(--vermilion)}
.tab:hover{color:var(--ink)}
.modal-body{flex:1;overflow:auto;padding:20px 26px 30px;scrollbar-width:thin}
.m-h{margin:0 0 4px;font:700 22px/1.3 var(--serif);letter-spacing:.06em}
.m-p{margin:0 0 14px;color:var(--ink2);font-size:13.5px;line-height:1.8;max-width:880px}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px}
.gcard{border:1px solid var(--line);background:#fffaf0;border-radius:16px;padding:10px 8px 10px;text-align:center;perspective:600px;cursor:pointer;position:relative;overflow:hidden}
.gcard .gimg{width:116px;height:116px;margin:4px auto 4px;transform-style:preserve-3d;transition:transform .12s ease-out}
.gcard img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(40,25,5,.25))}
.gcard b{display:block;font:700 16px/1.3 var(--serif)}
.gcard small{display:block;font-size:11px;color:var(--mute);margin-top:2px}
.gcard .era-dot{position:absolute;left:8px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--ec)}
.gcard:hover{background:#fff;border-color:#b8a77e;box-shadow:0 12px 24px rgba(60,40,10,.15)}
table.mx{border-collapse:collapse;width:100%;font-size:13px;background:#fffaf0;border-radius:12px;overflow:hidden}
.mx th,.mx td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:center}
.mx th{background:#efe6d1;position:sticky;top:0;font-size:12px;line-height:1.4;z-index:1}
.mx th small{display:block;font-weight:400;color:var(--mute);font-size:10.5px}
.mx td:first-child,.mx th:first-child{text-align:left;position:sticky;left:0;background:#fffaf0}
.mx th:first-child{background:#efe6d1}
.mx tr:hover td{background:#fff}
.mx .nm{display:flex;align-items:center;gap:8px;cursor:pointer;min-width:132px}
.mx .nm img{width:30px;height:30px;object-fit:contain}
.mx .nm b{font-family:var(--serif)}
.dotc{display:inline-block;width:13px;height:13px;border-radius:50%;background:var(--sc)}
.dotc.no{background:transparent;border:1px dashed #d8ccb2}
.mx .yr{color:var(--mute);font-size:11.5px;white-space:nowrap}
.src-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:18px}
.src-card{border-radius:12px;background:#fffaf0;border:1px solid var(--line);border-top:5px solid var(--sc);padding:10px 12px;font-size:12px;line-height:1.6}
.src-card b{display:block;font-size:13.5px;font-family:var(--serif);margin-bottom:2px}
.src-card em{font-style:normal;color:var(--sc);font-weight:700}
.dcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
.dcard{border:1px solid var(--line);border-radius:16px;background:#fffaf0;padding:12px 14px}
.dcard header{display:flex;gap:10px;align-items:center;margin-bottom:6px;cursor:pointer}
.dcard header img{width:46px;height:46px;object-fit:contain}
.dcard header b{font:700 18px/1.2 var(--serif)}
.dcard header small{color:var(--mute);display:block}
.dcard .debate{margin:8px 0}
.dcard .cmp-item{margin:0 0 6px;font-size:12.5px}
.px{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pxcol{border:1px solid var(--line);border-radius:16px;background:#fffaf0;padding:12px}
.pxcol .g{font:700 54px/1 var(--serif);color:var(--vermilion)}
.pxcol h4{margin:2px 0 4px;font:700 14px var(--serif);letter-spacing:.1em}
.pxcol p{margin:0 0 8px;font-size:12px;color:var(--ink2);line-height:1.7}
.pxcol .mini{display:flex;flex-wrap:wrap;gap:6px}
.mini .m{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 9px 2px 3px;font-size:12px;cursor:pointer}
.mini .m img{width:22px;height:22px;object-fit:contain}
.mini .m.txt{padding:3px 10px;color:var(--ink2);cursor:default;background:#f3ebd6}
.bigstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:18px}
.bs{border:1px solid var(--line);background:#fffaf0;border-radius:16px;padding:14px}
.bs b{display:block;font:700 34px/1.1 var(--serif);color:var(--vermilion)}
.bs span{font-size:12.5px;color:var(--ink2);line-height:1.6;display:block}
.bs em{font-style:normal;font-size:11px;color:var(--mute);display:block;margin-top:5px}
.chartbox{border:1px solid var(--line);background:#fffaf0;border-radius:16px;padding:14px 16px;margin-bottom:14px}
.chartbox h4{margin:0 0 8px;font:700 15px var(--serif);letter-spacing:.06em}
.bar{display:flex;align-items:center;gap:10px;margin:5px 0;font-size:12.5px}
.bar .lb{width:84px;flex:none;color:var(--ink2);text-align:right}
.bar .tr{flex:1;height:18px;background:#efe6d1;border-radius:9px;overflow:hidden;position:relative}
.bar .fl{height:100%;border-radius:9px;background:var(--bc,var(--vermilion))}
.bar .vl{width:104px;flex:none;color:var(--ink);font-weight:600}
.note{font-size:12px;color:var(--mute);line-height:1.7;margin-top:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.flag{background:#fbefe3;border:1px solid #ebc9a6;border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.75;color:#5b3a19;margin-top:8px}

@media (max-width:1000px){
  #app{grid-template-columns:1fr;grid-template-rows:52vh minmax(0,1fr) 150px}
  #mapwrap{grid-column:1;grid-row:1}
  #panel{grid-column:1;grid-row:2;border-left:0;border-top:1px solid var(--line)}
  #timeline{grid-column:1;grid-row:3;grid-template-columns:150px minmax(0,1fr)}
  .tl-year{font-size:20px}
  .legend{display:none}.mapnote{left:12px}
  .px{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}