/* ══════════════ 神座争夺战 · HTML面板 v2.0 ══════════════ */
:root{
--hk-bg:#0d1119;--hk-panel:#151b28;--hk-panel-2:#1b2333;--hk-line:#2a3446;
--hk-cyan:#00e5ff;--hk-purple:#9d4edd;--hk-red:#ff2e56;--hk-gold:#ffb703;
--hk-green:#00e676;--hk-text:#e6edf7;--hk-dim:#8896ab;
}
/* 折叠容器 */
details{position:relative;margin:16px 0;border-radius:14px;border:1px solid var(--hk-line);
background:linear-gradient(180deg,rgba(0,229,255,.03),transparent 40%),var(--hk-panel);
box-shadow:0 8px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;}
details::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--hk-cyan),var(--hk-purple),transparent);
background-size:200% 100%;opacity:.7;animation:hk-scan 6s linear infinite;}
@keyframes hk-scan{0%{background-position:0 0}100%{background-position:200% 0}}
details>summary{cursor:pointer;list-style:none;padding:13px 18px;font-size:1.08em;font-weight:800;
letter-spacing:.08em;color:#fff;background:linear-gradient(90deg,var(--hk-panel-2),rgba(157,78,221,.12));
border-bottom:1px solid var(--hk-line);text-shadow:0 0 10px rgba(255,46,86,.35);user-select:none;
display:flex;align-items:center;gap:10px;transition:background .25s;}
details>summary:hover{background:linear-gradient(90deg,var(--hk-panel-2),rgba(0,229,255,.15));}
details>summary::-webkit-details-marker{display:none;}
details>summary::before{content:"◈";color:var(--hk-red);font-size:.85em;
transition:transform .3s,color .3s;text-shadow:0 0 8px var(--hk-red);}
details[open]>summary::before{transform:rotate(90deg) scale(1.15);color:var(--hk-purple);}
details:nth-of-type(2)>summary::before{color:var(--hk-gold);text-shadow:0 0 8px var(--hk-gold);}
details:nth-of-type(3)>summary::before{color:var(--hk-red);text-shadow:0 0 8px var(--hk-red);}
details:nth-of-type(5)>summary::before{color:var(--hk-green);text-shadow:0 0 8px var(--hk-green);}
/* 面板主体 */
.hk-body{padding:16px 18px;background:repeating-linear-gradient(0deg,transparent,transparent 31px,
rgba(0,229,255,.025) 32px),var(--hk-bg);color:var(--hk-text);font-size:.92em;line-height:1.7;
border-radius:0 0 13px 13px;}
/* 键值行 */
.hk-row{display:flex;flex-wrap:wrap;gap:6px 16px;margin:5px 0;align-items:center;}
.hk-kv{display:inline-flex;align-items:baseline;gap:5px;}
.hk-k{color:var(--hk-dim);font-size:.86em;font-weight:600;letter-spacing:.03em;}
.hk-k::after{content:"›";margin-left:3px;color:var(--hk-red);opacity:.6;}
.hk-v{color:var(--hk-text);font-weight:700;}
.hk-v.hl{color:var(--hk-red);text-shadow:0 0 6px rgba(255,46,86,.4);}
.hk-v.warn{color:var(--hk-gold);}
.hk-v.danger{color:var(--hk-red);}
/* 分区小标题 */
.hk-sub{margin:14px 0 8px;padding-left:10px;font-size:.9em;font-weight:800;letter-spacing:.1em;
color:var(--hk-purple);border-left:3px solid var(--hk-purple);text-shadow:0 0 8px rgba(157,78,221,.4);}
/* 内嵌分割 */
.hk-hr{height:1px;margin:12px 0;background:linear-gradient(90deg,transparent,var(--hk-line),transparent);}
/* 血条/能量条 */
.hk-meter{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;margin:7px 0;}
.hk-meter .lbl{font-size:.82em;font-weight:700;color:var(--hk-dim);text-align:right;}
.hk-bar{position:relative;height:17px;border-radius:9px;background:linear-gradient(180deg,#0a0d14,#121826);
border:1px solid var(--hk-line);box-shadow:inset 0 2px 6px rgba(0,0,0,.6);overflow:hidden;}
.hk-bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:9px 0 0 9px;
transition:width .6s cubic-bezier(.22,1,.36,1);}
.hk-bar>i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,
rgba(255,255,255,.35),transparent);background-size:40px 100%;animation:hk-flow 1.6s linear infinite;}
@keyframes hk-flow{0%{background-position:-40px 0}100%{background-position:140px 0}}
.hk-bar>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:.72em;font-weight:800;letter-spacing:.05em;color:#fff;text-shadow:0 0 4px #000,0 1px 2px #000;}
.hk-bar.hp>i{background:linear-gradient(90deg,#7a0d1c,#ff2e56 60%,#ff607f);box-shadow:0 0 12px rgba(255,46,86,.7);}
.hk-bar.ep>i{background:linear-gradient(90deg,#3c096c,#7b2ff7 50%,#00e5ff);box-shadow:0 0 12px rgba(0,229,255,.7);}
.hk-bar.fav>i{background:linear-gradient(90deg,#b5177a,#ff5fa2 60%,#ffb3d1);box-shadow:0 0 10px rgba(255,95,162,.6);}
.hk-bar.food>i{background:linear-gradient(90deg,#1b5e20,#00e676 60%,#69ffa5);box-shadow:0 0 10px rgba(0,230,118,.6);}
.hk-bar.expo>i{background:linear-gradient(90deg,#7a2e00,#ff6b00 60%,#ffb703);box-shadow:0 0 10px rgba(255,107,0,.6);}
.hk-bar.evo>i{background:linear-gradient(90deg,#1a0033,#6a0dad 50%,#c026d3);box-shadow:0 0 12px rgba(192,38,211,.7);}
.hk-bar.low>i{animation:hk-pulse 1s ease-in-out infinite;}
@keyframes hk-pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
/* 增减徽章 */
.hk-chip{display:inline-block;padding:1px 9px;margin-left:4px;border-radius:20px;font-size:.76em;
font-weight:700;border:1px solid transparent;}
.hk-chip.up{color:#69ffa5;background:rgba(0,230,118,.12);border-color:rgba(0,230,118,.4);}
.hk-chip.down{color:#ff7d95;background:rgba(255,46,86,.12);border-color:rgba(255,46,86,.4);}
.hk-chip.warn{color:var(--hk-gold);background:rgba(255,183,3,.12);border-color:rgba(255,183,3,.4);}
/* 犯罪星 */
.hk-star{font-size:1.05em;letter-spacing:3px;color:#2a3446;}
.hk-star .on{color:var(--hk-red);text-shadow:0 0 8px var(--hk-red);}
/* 威胁等级 */
.hk-threat{padding:1px 8px;border-radius:6px;font-size:.74em;font-weight:800;}
.hk-threat.low{color:#69ffa5;background:rgba(0,230,118,.15);}
.hk-threat.mid{color:var(--hk-gold);background:rgba(255,183,3,.15);}
.hk-threat.high{color:#ff9800;background:rgba(255,152,0,.18);}
.hk-threat.fatal{color:#fff;background:rgba(255,46,86,.5);animation:hk-pulse 1.2s infinite;}
/* 内心气泡 */
.hk-inner{display:block;margin:8px 0;padding:10px 14px;border-radius:12px 12px 12px 3px;
background:linear-gradient(135deg,rgba(255,46,86,.08),rgba(157,78,221,.08));
border:1px solid rgba(255,46,86,.25);color:#ff9db0;font-style:italic;}
/* 卡片（互动角色/登场人物条目） */
.hk-card{margin:10px 0;padding:12px 14px;border-radius:11px;background:var(--hk-panel-2);
border:1px solid var(--hk-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
.hk-card .name{font-size:1.05em;font-weight:800;color:#fff;text-shadow:0 0 8px rgba(157,78,221,.5);}
.hk-rel{padding:1px 9px;border-radius:6px;font-size:.75em;font-weight:700;
color:var(--hk-red);background:rgba(255,46,86,.12);border:1px solid rgba(255,46,86,.3);}
/* 论坛帖 */
.hk-forum p{margin:6px 0;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.03);
border-left:3px solid var(--hk-cyan);}
.hk-forum p.leak{border-left-color:var(--hk-red);background:rgba(255,46,86,.06);}
/* 罗盘方向 */
.hk-compass{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:6px 0;}
.hk-compass span{padding:5px 10px;border-radius:7px;background:rgba(0,229,255,.05);
border:1px solid var(--hk-line);font-size:.85em;}
.hk-compass b{color:var(--hk-red);margin-right:5px;}
/* 分割线 */
hr{border:none;height:2px;margin:20px 0;background:linear-gradient(90deg,transparent,var(--hk-cyan),var(--hk-purple),transparent);box-shadow:0 0 10px rgba(0,229,255,.4);border-radius:2px;}
/* 表格（星记忆） */
table{width:100%;border-collapse:collapse;margin:12px 0;background:var(--hk-bg);border-radius:10px;
overflow:hidden;font-size:.86em;box-shadow:0 4px 18px rgba(0,0,0,.4);}
th{background:linear-gradient(90deg,var(--hk-purple),#5a189a);color:#fff;padding:11px 12px;text-align:left;}
td{padding:10px 12px;color:#d2dbe9;border-bottom:1px solid var(--hk-line);}
tbody tr:nth-child(even) td{background:rgba(157,78,221,.05);}
tbody tr:hover td{background:rgba(0,229,255,.1);}
/* 嵌套折叠 */
details details{margin:12px;border-color:rgba(157,78,221,.35);background:var(--hk-panel-2);}
details details>summary{font-size:.98em;background:linear-gradient(90deg,#2a1a45,rgba(0,229,255,.08));}
.hk-body{border-radius:0;}
@media(max-width:600px){
details>summary{font-size:.98em;padding:11px 13px;}
.hk-body{font-size:.85em;padding:12px 13px;}
.hk-meter{grid-template-columns:52px 1fr;}
.hk-compass{grid-template-columns:1fr;}
table{font-size:.76em;}
}