/* 以色列与犹大列王年表 —— 样式照英文站 /kings，外加中文站顶栏、字体、图标与手机适配 */
:root{--bg:#0c1233;--row:#26324a;--row2:#33425f;--acc:#e6ecf7;--nonacc:#9fb0c9;--bc:#7ddc82;--am:#fff;--dim:.32;--kg-nav-h:60px}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:#e8eef7;font-family:'Montserrat','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-top:calc(var(--kg-nav-h) + 150px)}
body::before{content:'';position:fixed;inset:0;background:
 radial-gradient(1.5px 1.5px at 12% 20%,#fff,transparent),radial-gradient(1px 1px at 78% 12%,#ffff,transparent),
 radial-gradient(2px 2px at 45% 60%,#fffd,transparent),radial-gradient(1.5px 1.5px at 90% 75%,#fff,transparent),
 radial-gradient(1px 1px at 30% 85%,#fffc,transparent),radial-gradient(2px 2px at 60% 35%,#fffe,transparent),
 radial-gradient(1px 1px at 22% 50%,#fffb,transparent),radial-gradient(1.5px 1.5px at 68% 88%,#fff,transparent),
 radial-gradient(1px 1px at 5% 70%,#fffc,transparent),radial-gradient(1.5px 1.5px at 95% 40%,#fffd,transparent);
 background-size:520px 520px;pointer-events:none;z-index:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 站内统一顶栏：固定在最上层，不随年表横向滚动 */
#globalNav{position:fixed;top:0;left:0;right:0;z-index:9200!important}

/* 本页标题栏：贴在顶栏那一行下沿（高度由 kings.js 实测 → --kg-nav-h） */
#kgHeader{position:fixed;top:var(--kg-nav-h);left:0;right:0;box-sizing:border-box;z-index:50;background:#0a1029;border-bottom:1px solid rgba(255,255,255,.18);padding:14px 26px 14px;max-width:100vw}
h1{margin:0;font-size:clamp(20px,3vw,32px);font-weight:900;line-height:1.25}
h1 span{color:#f5c542}
.sub{color:#8aa0c8;font-size:.8rem;font-weight:600;margin-top:4px}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:.7rem;font-weight:800;align-items:center}
.legend .sw{display:inline-block;width:13px;height:13px;border-radius:3px;margin-right:5px;vertical-align:-2px}
.legend .ht{margin:0 2px 0 0}
.zbtn{background:#0d1530;color:#e8eef7;border:1px solid rgba(255,255,255,.25);border-radius:9px;min-width:36px;height:34px;padding:0 10px;font-family:inherit;font-size:.74rem;font-weight:800;cursor:pointer;vertical-align:middle;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.zbtn:hover{background:#16204a}
.zbtn:focus-visible,.kl-row:focus-visible,.k-hd:focus-visible,.km-copy:focus-visible,.x:focus-visible,.kg-sel:focus-visible{outline:2px solid #f5c542;outline-offset:2px}
.kg-sel{background:#0d1530;color:#e8eef7;border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:8px 12px;font-family:inherit;font-weight:800;font-size:.78rem;cursor:pointer;max-width:100%}
.kg-jumpwrap{display:inline-flex;align-items:center;gap:6px;min-width:0}
.kg-jumpwrap>.fa-solid{color:#f5c542}
header .ctlrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}

/* 静态介绍（不执行 JS 也能读） */
.kg-intro{position:relative;z-index:1;max-width:min(900px,100vw);padding:18px 26px 0;color:#b9c6e2;font-size:.86rem;line-height:1.8}
.kg-intro p{margin:0 0 8px}
.kg-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8rem;font-weight:700}
.kg-links a,footer a{color:#ffd34d;text-decoration:none}
.kg-links a:hover,footer a:hover{text-decoration:underline}

.lanes{display:flex;gap:40px;position:sticky;top:96px;z-index:40;padding:0 26px;pointer-events:none}
.lane-t{font-size:.75rem;font-weight:900;letter-spacing:.14em;padding:7px 18px;border-radius:9px}
#board{position:relative;margin:56px 0 120px;z-index:1}
.king{position:absolute;width:300px;border-radius:0;box-shadow:0 10px 34px rgba(0,0,0,.5)}
.k-head{position:absolute;bottom:100%;left:0;right:0}
.k-top{height:9px;border-radius:6px 6px 0 0}
.k-hd{background:#0d1030;padding:8px 12px;font-size:.8rem;font-weight:900;text-align:center;border:1px solid #ffffff18;border-top:none}
.k-hd .ht{margin-right:6px}
.ht{font-style:normal}
.ht-good{color:#22c55e}
.ht-evil{color:#ef4444}
.ht-mixed{color:#ef4444;-webkit-text-stroke:1.6px #22c55e;paint-order:stroke fill}
.k-hd,.klabel{cursor:copy}
.rows{border:1px solid #00000055;border-top:none}
.r{display:flex;height:44px;font-weight:900;font-size:.85rem}
.r>div{display:flex;align-items:center;justify-content:center}
.c-a{width:52px;background:var(--acc);color:#111}
.c-n{width:52px;background:var(--nonacc);color:#111}
.c-y{flex:1;background:linear-gradient(90deg,var(--row),var(--row2));gap:10px;border-top:1px solid #00000033}
.c-y .bc{color:var(--bc)}.c-y .am{color:var(--am,#fff)}
/* hover: every square/rectangle darkens independently under the pointer */
.king{cursor:pointer}
.c-a,.c-n,.c-y{transition:background .18s ease,filter .15s ease,transform .12s ease;cursor:pointer}
.c-a:hover{background:#fff04d!important;transform:scale(1.06)}
.c-n:hover{background:#ff9b3d!important;transform:scale(1.06)}
.king[data-kd="J"] .c-y:hover{background:linear-gradient(90deg,#4a10ff,#6420ff)!important}
.king[data-kd="I"] .c-y:hover{background:linear-gradient(90deg,#3b46ff,#5a6aff)!important}
body.colorized .c-a{background:#fff04d}
body.colorized .c-n{background:#ff9b3d}
body.colorized .king[data-kd="J"] .c-y{background:linear-gradient(90deg,#4a10ff,#6420ff)}
body.colorized .king[data-kd="I"] .c-y{background:linear-gradient(90deg,#3b46ff,#5a6aff)}
body.colorized .c-a:hover{filter:brightness(.8)}
body.colorized .c-n:hover{filter:brightness(.8)}
body.colorized .king .c-y:hover{filter:brightness(.78)}
body.colorized .legend .sw-acc{background:#fff04d!important}
body.colorized .legend .sw-non{background:#ff9b3d!important}
.c-y.hl{outline:2px solid #f5c542;outline-offset:-2px;filter:brightness(1.3) saturate(1.35);box-shadow:0 0 14px rgba(245,197,66,.5);z-index:2;position:relative}
.king{transition:box-shadow .2s ease}
.king:hover{box-shadow:0 14px 44px rgba(80,40,255,.45)}
.icon{font-size:1rem;margin-right:4px;color:#ffd34d}
.klabel{position:absolute;width:330px;text-align:right;background:#0d1030;border:1px solid #ffffff22;border-top:4px solid #8a5cff;
 padding:8px 12px;font-weight:900;font-size:.72rem;border-radius:6px;z-index:6;
 box-shadow:0 8px 22px rgba(0,0,0,.5)}
.r.dim .c-y{background:linear-gradient(90deg,#5c1220,#6e1626)!important}
.r.dim .c-a{background:#7a7a50}.r.dim .c-n{background:#7c5a49}
.r.dim .bc{color:#9fb87e!important}.r.dim .am{color:#b9a3a3!important}
.king[data-kd="B"] .c-y{background:#050508}
.king[data-kd="B"] .c-y:hover{background:#191926!important}
.c-a,.c-n{border:1px solid rgba(0,0,0,.5)}
.c-y{border:1px solid rgba(0,0,0,.5)}
.c-a.z0{opacity:.5}
/* 国度分裂：犹大与以色列之间一条流动的电线 */
#wire{position:absolute;bottom:0;left:1600px;width:6px;z-index:0;pointer-events:none}
#wire::before{content:'';position:absolute;inset:0;left:2px;width:2px;
 background:repeating-linear-gradient(180deg,#ffd34d 0 14px,#ff8a3c 14px 22px,transparent 22px 34px);
 filter:drop-shadow(0 0 6px #ffb02e);animation:wireflow 1.6s linear infinite}
#wire::after{content:'';position:absolute;inset:0;left:0;width:6px;border-radius:4px;
 background:linear-gradient(180deg,transparent,rgba(255,176,46,.16) 30%,rgba(255,176,46,.16) 70%,transparent);}
@keyframes wireflow{to{background-position:0 34px}}
.wire-node{position:absolute;left:-6px;width:18px;height:18px;border-radius:50%;
 background:radial-gradient(circle at 35% 35%,#ffe9a8,#ff9c2e 60%,#7a3c00);box-shadow:0 0 14px #ffb02e;
 display:flex;align-items:center;justify-content:center;font-size:9px;color:#5a2a00}

/* 弹窗：在站内顶栏之上 */
.kmodal-ov{display:none;position:fixed;inset:0;z-index:9300;background:rgba(3,6,18,.78);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.kmodal-ov.on{display:grid;place-items:center}
.kmodal{width:min(640px,calc(100vw - 34px));max-height:86vh;display:flex;flex-direction:column;background:#0d1330;border:1px solid rgba(255,255,255,.16);border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.7);overflow:hidden}
.kmodal-wide{width:min(920px,calc(100vw - 30px))}
.km-hd{padding:14px 18px;font-weight:900;font-size:1rem;display:flex;align-items:center;gap:10px}
.km-hd .x{margin-left:auto;border:none;background:none;color:#cdd7ee;font-size:1.15rem;cursor:pointer;width:36px;height:36px;border-radius:8px;flex:none}
.km-hd .x:hover{background:rgba(255,255,255,.08)}
.km-reign{padding:10px 18px;font-weight:800;font-size:.8rem;color:#ffd34d;background:rgba(255,255,255,.04)}
.km-bd{padding:14px 18px 20px;overflow-y:auto;font-size:.86rem;line-height:1.8;color:#dbe4f6}
.km-bd h4{margin:14px 0 6px;font-size:.72rem;letter-spacing:.12em;color:#8fa4cc}
.km-v{background:rgba(255,255,255,.05);border-left:3px solid #ffd34d;border-radius:0 8px 8px 0;padding:8px 12px;margin:8px 0}
.km-v b{color:#ffd34d}
.km-check{margin:4px 0;color:#7ddc82;font-weight:700}
.km-ok{margin:0 2px;font-size:.85em}
.km-no{margin:0 2px;font-size:.85em;color:#ef4444}
.km-empty{color:#b9c6e2;margin:6px 0}
.c-y.dlink{outline:3px solid #ffd34d;outline-offset:-3px;position:relative;z-index:3;animation:dlpulse 1.1s ease-in-out infinite}
@keyframes dlpulse{50%{box-shadow:0 0 24px rgba(255,211,77,.85)}}
#linktoast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#0d1330;border:1px solid #ffd34d;color:#ffd34d;font-weight:900;font-size:.78rem;padding:10px 18px;border-radius:10px;z-index:9400;display:none;box-shadow:0 10px 30px rgba(0,0,0,.6);max-width:calc(100vw - 32px);text-align:center}
.kl-cols{display:flex;gap:22px;flex-wrap:wrap}
.kl-col{flex:1;min-width:min(290px,100%)}
.kl-col h3{margin:8px 0 6px;font-size:.78rem;letter-spacing:.12em;color:#ffd34d}
.kl-row{display:flex;width:100%;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;cursor:pointer;font-family:inherit;font-size:.76rem;font-weight:700;color:inherit;background:none;border:none;text-align:left}
.kl-row:hover{background:rgba(255,255,255,.07)}
.kl-row .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-row .yr{color:#7ddc82;font-weight:900;white-space:nowrap}
.kl-row .ag{color:#9fb0c9;width:64px;text-align:right;white-space:nowrap}
.km-copy{margin-top:14px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#dbe4f6;border-radius:8px;padding:7px 13px;font-family:inherit;font-weight:800;font-size:.74rem;cursor:pointer}

footer{position:relative;z-index:1;padding:30px 26px 80px;color:#8aa0c8;font-size:.8rem;max-width:min(900px,100vw);line-height:1.8}
footer h2{color:#e8eef7;font-size:1rem;margin:22px 0 6px}
footer p{margin:0 0 8px}
footer ul{margin:0;padding-left:1.2em}
.kg-index{margin:0 0 10px}
.kg-index h3{color:#e8eef7;font-size:.9rem;margin:16px 0 4px}
.kg-index ol{margin:0;padding-left:1.8em;columns:2;column-gap:28px}
.kg-index li{break-inside:avoid;margin:0 0 4px;overflow-wrap:anywhere}
@media(max-width:680px){.kg-index ol{columns:1;padding-left:1.5em}}

@media(max-width:680px){
  #kgHeader{padding:10px 12px 10px}
  h1{font-size:1.1rem}
  .sub{font-size:.66rem}
  .legend{gap:8px 10px;font-size:.62rem;margin-top:6px}
  header .ctlrow{gap:6px;margin-top:8px}
  .kg-jumpwrap{flex:1 1 52%;min-width:0}
  #jump{width:100%;min-width:0}
  #jump,#sortmode{font-size:16px;padding:6px 8px}   /* 16px 防止 iOS 聚焦放大 */
  #sortmode{flex:1 1 38%;min-width:0;width:0}
  .zbtn{height:36px;font-size:.7rem;padding:0 9px}
  .kmodal{max-height:92vh}
  .km-bd{font-size:.84rem}
  .kg-intro{padding:14px 16px 0;font-size:.82rem}
  footer{padding:24px 16px 70px}
  .kl-row .yr{font-size:.68rem}
}
@media (prefers-reduced-motion: reduce){
  #wire::before,.c-y.dlink{animation:none}
  .c-a,.c-n,.c-y,.king{transition:none}
}

/* ───────── 我的列王（me.js）：收藏 / 笔记 / 已读 / 最近浏览 ───────── */
#kgme[aria-expanded="true"]{background:#16204a;border-color:#f5c542}
.kgme-badges{display:inline-flex;gap:5px;margin-left:8px;vertical-align:middle;font-size:.78em}
.kgme-b-bm{color:#f5c542}
.kgme-b-rd{color:#7ddc82}
.kgme-b-nt{color:#9fb6ff}
.k-hd.kgme-bm{box-shadow:inset 0 -2px 0 #f5c542}
/* 弹窗里的操作条 */
.km-me{padding:10px 18px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
.kgme-actions{display:flex;flex-wrap:wrap;gap:6px}
.kgme-act{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border-radius:9px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#dbe4f6;font-family:inherit;font-weight:800;font-size:.74rem;cursor:pointer}
.kgme-act:hover{background:rgba(255,255,255,.1)}
.kgme-act[aria-pressed="true"]{border-color:#f5c542;color:#ffd34d;background:rgba(245,197,66,.12)}
.kgme-act:nth-child(3)[aria-pressed="true"]{border-color:#7ddc82;color:#7ddc82;background:rgba(125,220,130,.12)}
.kgme-hint{margin:6px 0 4px;font-size:.72rem;color:#8aa0c8}
.kgme-link{background:none;border:none;padding:0 2px;color:#ffd34d;font:inherit;font-weight:800;cursor:pointer;text-decoration:underline}
.kgme-act:focus-visible,.kgme-link:focus-visible,.kgme-btn:focus-visible,.kgme-x:focus-visible,.kgme-row-main:focus-visible,.kgme-ta:focus-visible,.kgme-panel .x:focus-visible,.kgme-dlg .x:focus-visible,.kgme-foot a:focus-visible{outline:2px solid #f5c542;outline-offset:2px}
/* 面板 */
.kgme-ov{position:fixed;inset:0;z-index:9400;background:rgba(3,6,18,.6);display:flex;justify-content:flex-end}
.kgme-ov[hidden]{display:none}
.kgme-panel{width:min(420px,100vw);height:100%;display:flex;flex-direction:column;background:#0d1330;border-left:1px solid rgba(255,255,255,.16);box-shadow:-20px 0 60px rgba(0,0,0,.6)}
.kgme-panel-hd,.kgme-dlg-hd{display:flex;align-items:center;gap:10px;padding:12px 14px 10px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.kgme-panel-hd h2,.kgme-dlg-hd h2{margin:0;font-size:1rem;font-weight:900;flex:1;min-width:0}
.kgme-panel-hd h2 .fa-solid{color:#f5c542}
.kgme-panel .x,.kgme-dlg .x{border:none;background:none;color:#cdd7ee;font-size:1.1rem;cursor:pointer;width:40px;height:40px;border-radius:8px;flex:none}
.kgme-panel .x:hover,.kgme-dlg .x:hover{background:rgba(255,255,255,.08)}
.kgme-panel-bd{flex:1;overflow-y:auto;padding:6px 16px 24px;font-size:.84rem;color:#dbe4f6;overscroll-behavior:contain}
.kgme-sync{margin:10px 0 4px;font-size:.76rem;color:#b9c6e2;line-height:1.6}
.kgme-sync-ok{color:#7ddc82}
.kgme-sec{margin-top:16px}
.kgme-sec h3{margin:0 0 8px;font-size:.76rem;letter-spacing:.08em;color:#8fa4cc;display:flex;align-items:center;gap:6px}
.kgme-sec h3 .fa-solid{color:#f5c542;width:1.1em;text-align:center}
.kgme-count{margin-left:auto;background:rgba(255,255,255,.08);border-radius:10px;padding:1px 8px;font-size:.7rem;color:#dbe4f6;letter-spacing:0}
.kgme-muted{margin:4px 0;color:#8aa0c8;font-size:.76rem;line-height:1.6}
.kgme-list{list-style:none;margin:0;padding:0}
.kgme-row{display:flex;align-items:center;gap:6px;border-radius:8px}
.kgme-row:hover{background:rgba(255,255,255,.05)}
.kgme-row-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 8px;border:none;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:8px}
.kgme-row-label{font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kgme-row-main small{color:#8aa0c8;font-size:.7rem}
.kgme-x{border:none;background:none;color:#8aa0c8;width:34px;height:34px;border-radius:8px;cursor:pointer;flex:none}
.kgme-x:hover{background:rgba(255,255,255,.08);color:#fff}
.kgme-prog{height:10px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.kgme-prog>span{display:block;height:100%;background:linear-gradient(90deg,#7ddc82,#f5c542);border-radius:6px;transition:width .3s ease}
.kgme-kd{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.76rem;color:#b9c6e2}
.kgme-kd b{color:#e8eef7}
.kgme-foot{margin:20px 0 0;font-size:.74rem}
.kgme-foot a{color:#ffd34d;text-decoration:none}
.kgme-foot a:hover{text-decoration:underline}
.kgme-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 13px;border-radius:9px;border:1px solid rgba(255,255,255,.25);background:#0d1530;color:#e8eef7;font-family:inherit;font-weight:800;font-size:.76rem;cursor:pointer}
.kgme-btn:hover{background:#16204a}
.kgme-btn:disabled{opacity:.55;cursor:default}
.kgme-btn-primary{background:#f5c542;border-color:#f5c542;color:#1a1400}
.kgme-btn-primary:hover{background:#ffd34d}
.kgme-btn-sm{min-height:30px;padding:0 10px;font-size:.7rem}
.kgme-block{width:100%}
/* 对话框（笔记 / 冲突） */
.kgme-dlg-ov{position:fixed;inset:0;z-index:9500;background:rgba(3,6,18,.72);display:grid;place-items:center;padding:12px}
.kgme-dlg{width:min(560px,100%);max-height:calc(100vh - 24px);display:flex;flex-direction:column;background:#0d1330;border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.7);overflow:hidden}
.kgme-dlg-bd{padding:12px 16px;overflow-y:auto;color:#dbe4f6;font-size:.84rem}
.kgme-dlg-ft{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:10px 16px 14px;border-top:1px solid rgba(255,255,255,.08)}
.kgme-ta{width:100%;min-height:180px;resize:vertical;background:#0a1029;color:#e8eef7;border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:16px;line-height:1.6}
.kgme-p{margin:0 0 8px;line-height:1.6}
.kgme-h3{margin:10px 0 4px;font-size:.74rem;color:#8fa4cc;letter-spacing:.06em}
.kgme-pre{margin:0;white-space:pre-wrap;word-break:break-word;background:rgba(255,255,255,.05);border-left:3px solid #f5c542;border-radius:0 8px 8px 0;padding:8px 10px;max-height:160px;overflow:auto;font-family:inherit;font-size:.8rem}
/* 合并提示 / 提示条 */
.kgme-merge{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9350;width:min(560px,calc(100vw - 24px));background:#0d1330;border:1px solid #f5c542;border-radius:12px;padding:12px 14px;box-shadow:0 14px 40px rgba(0,0,0,.6);font-size:.8rem;color:#dbe4f6}
.kgme-merge p{margin:0 0 10px;line-height:1.6}
.kgme-merge p .fa-solid{color:#f5c542}
.kgme-merge-btns{display:flex;flex-wrap:wrap;gap:8px}
.kgme-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9600;display:none;align-items:center;gap:8px;max-width:calc(100vw - 24px);background:#0d1330;border:1px solid #ffd34d;color:#ffd34d;font-weight:800;font-size:.78rem;padding:6px 6px 6px 14px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.kgme-toast.on{display:flex}
.kgme-toast .kgme-x{width:30px;height:30px;color:#ffd34d}
@media(max-width:680px){
  .km-me{padding:8px 12px 4px}
  .kgme-act{font-size:.7rem;padding:0 9px}
  .kgme-panel{width:100vw;border-left:none}
  .kgme-dlg-ft .kgme-btn{flex:1 1 auto}
}
@media (prefers-reduced-motion: reduce){
  .kgme-prog>span{transition:none}
}