@charset "utf-8";
/* ============================================================================
   天机传奇 · 文字介绍页 通用样式（青蓝白主题）
   适用：游戏攻略 / 装备过滤 / BOSS过滤
   顶部(#header) / 底部横幅(.smfoot) —— 原样复制自 index.html 与 css/zhuye.css（数值未改动）
   正文区：深蓝黑底 + 青(cyan)主色 + 蓝白(blue-white)文字
   ============================================================================ */

:root{
  --c-bg:#060b12;          /* 主底：深蓝黑 */
  --c-bg-2:#081320;
  --c-panel:#0b1826;       /* 卡片底 */
  --c-panel-2:#0f2233;
  --c-line:#1d3f57;        /* 分隔线 */
  --c-line-hi:#2f6e94;
  --c-cyan:#4fd6ff;        /* 主青 */
  --c-cyan-d:#1c8fc4;
  --c-blue:#8fc4ff;        /* 蓝白 */
  --c-red:#ff6a5a;         /* 警示/否定 */
  --c-green:#7fdc5a;       /* 肯定 */
  --c-text:#e9f5fc;        /* 蓝白正文 */
  --c-text-dim:#9cbed6;
  --f-title:"STKaiti","KaiTi","楷体","Microsoft YaHei",serif;
  --f-body:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(1200px 600px at 50% -100px, rgba(79,214,255,.10), transparent 70%),
    linear-gradient(180deg,var(--c-bg-2) 0%,var(--c-bg) 340px);
  background-attachment:fixed;
  font-family:var(--f-body);
  color:var(--c-text);
  font-size:15px;
  line-height:1.9;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-top:60px;   /* 仅给绝对定位的 #header 让出高度，不动顶部自身样式 */
}
a{color:var(--c-cyan);text-decoration:none;transition:color .25s var(--ease-out);}
a:hover{color:#d8f4ff;}
img{max-width:100%;display:block;}
ul{list-style:none;}

/* ============================ 顶部 ============================
   原样复制自 index.html 的 #header + css/zhuye.css，数值未做任何改动
   ============================================================ */
#header {
	z-index: 999;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -960px;
	width: 1920px;
	height: 60px;
	background-color: #000;
	color: #fff;
}

#header .logo,
#header .menu {
	position: absolute;
	left: 200;
}

#header .logo img {
	position: absolute;
	left: 200px;
	top: 48px;
	margin-top: -37px;
	margin-left: 0px;
}

#header .menu {
	left: 850px;
	right: 0;
}

#header .menu ul {
  list-style-type: none;
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}

#header .menu ul li {
  text-align: center;
  margin: 8px;
  padding: 0 5px;
  float: left;
  width: 128px;
}

#header .menu ul li .t1,
#header .menu ul li .t2 {
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

#header .menu ul li .t1 {
  font-size: 18px;
  margin-top: 5px;
  margin-bottom: 3px;
  font-weight: bold;
}

#header .menu ul li .t2 {
  font-size: 12px;
  font-weight: lighter;
  text-transform: uppercase;
  white-space: nowrap;
}

#header .menu ul li:hover .t1,
#header .menu ul li:hover .t2 {
  color: #00ff00;
}

#header .menu ul li:hover .t2 {
  letter-spacing: 1px;
}

#header .btn {
  display: none;
}

/* index.html 里写在 head 的全局链接色，这里限定在 #header 内，避免影响正文 */
#header a:link,
#header a:visited,
#header a:hover,
#header a:active {
	color: #CCCCCC;
	text-decoration: none;
}

/* 本文件正文用的 *{box-sizing:border-box} 与 body{line-height:1.9} 会渗进顶栏，
   这里在 #header 内部还原成浏览器默认（zhuye.css 从未设过这两项），
   使顶栏渲染结果与原站完全相同：菜单项 138×51、logo 500×48 */
#header,
#header * {
	box-sizing: content-box;
}
#header {
	line-height: normal;
	font-family: initial;              /* 原站未指定字体，用浏览器默认，行高才与 index.html 完全一致 */
	-webkit-font-smoothing: auto;
}
#header img {
	max-width: none;
}

/* ============================ Hero 主标题区 ============================ */
.hero{position:relative;text-align:center;padding:74px 20px 40px;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 12%,rgba(79,214,255,.16),transparent 62%);
}
.hero .crest{
  width:64px;height:64px;margin:0 auto 18px;position:relative;
  border:2px solid var(--c-line-hi);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#0a1a28,#06121c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 24px rgba(79,214,255,.28);
}
.hero .crest::after{content:"天机";font-family:var(--f-title);font-size:22px;color:var(--c-cyan);letter-spacing:0;}
.hero h1{
  position:relative;font-family:var(--f-title);font-size:54px;font-weight:400;
  letter-spacing:10px;text-indent:10px;color:#cdeeff;line-height:1.25;
  text-shadow:0 0 26px rgba(79,214,255,.42),0 2px 0 #16384f,0 4px 14px rgba(0,0,0,.9);
}
.hero .sub{
  position:relative;margin-top:14px;font-size:13px;letter-spacing:7px;text-indent:7px;
  color:var(--c-text-dim);text-transform:uppercase;
}
.hero .rule{
  position:relative;width:240px;height:2px;margin:24px auto 0;
  background:linear-gradient(90deg,transparent,var(--c-cyan),transparent);
}
.hero .rule::before,.hero .rule::after{
  content:"";position:absolute;top:-3px;width:8px;height:8px;
  transform:rotate(45deg);background:var(--c-cyan-d);
}
.hero .rule::before{left:-16px;} .hero .rule::after{right:-16px;}

/* ============================ 正文容器 ============================ */
.container{max-width:1080px;margin:0 auto;padding:10px 18px 70px;position:relative;z-index:1;}

/* 卡片 —— 四层阴影 + 青色描边 */
.panel{
  position:relative;margin-bottom:26px;padding:30px 32px 28px;border-radius:11px;
  background:linear-gradient(180deg,var(--c-panel-2) 0%,var(--c-panel) 100%);
  border:1px solid var(--c-line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 2px 5px rgba(0,0,0,.55),
    0 18px 38px -14px rgba(0,0,0,.8);
  animation:rise .6s var(--ease-out) both;
}
.panel::before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(79,214,255,.55),transparent);
}
.panel:nth-child(2){animation-delay:.06s}
.panel:nth-child(3){animation-delay:.12s}
.panel:nth-child(4){animation-delay:.18s}
.panel:nth-child(5){animation-delay:.24s}
.panel:nth-child(6){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}

/* 卡片标题：编号徽章 + 标题 + 副标题 */
.panel > h2{
  display:flex;align-items:center;gap:14px;
  font-family:var(--f-title);font-size:27px;font-weight:400;letter-spacing:3px;
  color:#cdeeff;margin-bottom:6px;
}
.panel > h2 .no{
  flex:0 0 auto;width:38px;height:38px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-body);font-size:17px;font-weight:700;color:#04141f;
  background:linear-gradient(180deg,#5fd8ff,#1c8fc4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 #0e4a63,0 4px 10px rgba(0,0,0,.5);
}
.panel > h2 .en{
  font-family:var(--f-body);font-size:11px;font-weight:400;letter-spacing:2px;
  color:var(--c-text-dim);text-transform:uppercase;align-self:flex-end;padding-bottom:6px;
}
.panel > .lead{
  color:var(--c-text-dim);font-size:14px;margin:8px 0 20px;padding-left:52px;
  border-left:2px solid var(--c-line);padding-top:2px;padding-bottom:2px;
}

/* 正文段落 */
.panel p{margin:12px 0;color:#c8dcea;}
.panel p strong,.panel li strong{color:var(--c-cyan);font-weight:700;}
.panel p .hl{color:#8fe3ff;}

/* 项目符号列表 */
.list{margin:14px 0;}
.list li{position:relative;padding:8px 0 8px 26px;color:#c8dcea;border-bottom:1px dashed rgba(47,110,148,.3);}
.list li:last-child{border-bottom:0;}
.list li::before{
  content:"";position:absolute;left:6px;top:19px;width:8px;height:8px;
  transform:rotate(45deg);background:var(--c-cyan-d);box-shadow:0 0 8px rgba(79,214,255,.5);
}

/* 步骤时间轴 */
.steps{counter-reset:st;margin:18px 0 6px;}
.steps li{position:relative;padding:0 0 22px 58px;}
.steps li::before{
  counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;left:0;top:-2px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:var(--c-cyan);
  background:radial-gradient(circle at 50% 35%,#0a1a28,#06121c);
  border:1px solid var(--c-line-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 16px rgba(79,214,255,.22);
  z-index:2;
}
.steps li::after{
  content:"";position:absolute;left:19px;top:38px;bottom:-2px;width:1px;
  background:linear-gradient(180deg,var(--c-line-hi),rgba(47,110,148,.15));
}
.steps li:last-child{padding-bottom:2px;}
.steps li:last-child::after{display:none;}
.steps li b{display:block;color:#cdeeff;font-size:16px;letter-spacing:1px;margin-bottom:2px;}
.steps li span{color:var(--c-text-dim);font-size:14px;}

/* 数据表格 */
.tbl-wrap{overflow-x:auto;margin:18px 0 6px;border-radius:9px;border:1px solid var(--c-line);}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px;}
table.tbl thead th{
  background:linear-gradient(180deg,#0e2536,#0a1a28);
  color:#bfe9ff;font-weight:700;letter-spacing:1px;font-size:13px;
  padding:13px 14px;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--c-line-hi);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
table.tbl tbody td{padding:12px 14px;border-bottom:1px solid rgba(29,63,87,.6);color:#c8dcea;vertical-align:top;}
table.tbl tbody tr:nth-child(even){background:rgba(79,214,255,.04);}
table.tbl tbody tr:hover{background:rgba(79,214,255,.08);}
table.tbl tbody tr:last-child td{border-bottom:0;}
table.tbl .num{color:var(--c-cyan);font-weight:700;font-variant-numeric:tabular-nums;}
table.tbl .yes{color:var(--c-green);}
table.tbl .no{color:var(--c-red);}

/* 品质标签（保留语义色） */
.tag{display:inline-block;padding:1px 10px;border-radius:4px;font-size:12px;font-weight:700;
  letter-spacing:.5px;border:1px solid;line-height:1.7;}
.tag.w{color:#cfcfcf;border-color:#5a5a5a;background:rgba(180,180,180,.1);}
.tag.g{color:#7fdc5a;border-color:#3d6b28;background:rgba(127,220,90,.1);}
.tag.b{color:#6fb6ff;border-color:#2c4f7d;background:rgba(111,182,255,.1);}
.tag.p{color:#c58bff;border-color:#5a3b85;background:rgba(197,139,255,.1);}
.tag.o{color:#ffb154;border-color:#8a5a1e;background:rgba(255,177,84,.12);}
.tag.r{color:#ff6a5a;border-color:#8a2f22;background:rgba(255,106,90,.12);}

/* 高亮提示块 */
.note{
  display:flex;gap:12px;margin:18px 0;padding:15px 18px;border-radius:9px;
  background:linear-gradient(180deg,rgba(79,214,255,.08),rgba(79,214,255,.03));
  border:1px solid rgba(79,214,255,.3);border-left:3px solid var(--c-cyan);
  color:#cfe7f4;font-size:14px;
}
.note .ic{flex:0 0 auto;color:var(--c-cyan);font-weight:700;}
.note.warn{background:linear-gradient(180deg,rgba(200,69,43,.1),rgba(200,69,43,.03));
  border-color:rgba(200,69,43,.4);border-left-color:var(--c-red);}
.note.warn .ic{color:#ff7a63;}

/* 双列小卡片 */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 4px;}
.mini{
  padding:16px 18px;border-radius:9px;border:1px solid var(--c-line);
  background:linear-gradient(180deg,#0c1d2c,#091521);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 16px -8px rgba(0,0,0,.8);
}
.mini h4{color:var(--c-cyan);font-size:15px;letter-spacing:1px;margin-bottom:6px;}
.mini p{color:var(--c-text-dim);font-size:13px;margin:0;}

/* ============================ 物品 / BOSS 网格 ============================ */
.itemgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:10px;margin:14px 0;}
.item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-radius:8px;border:1px solid var(--c-line);
  background:linear-gradient(180deg,#0c1d2c,#091521);font-size:13.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.item .in{color:#dcebf6;}
.item .iq{
  flex:0 0 auto;color:var(--c-cyan);font-weight:700;font-variant-numeric:tabular-nums;
  background:rgba(79,214,255,.1);padding:1px 8px;border-radius:4px;
  border:1px solid rgba(79,214,255,.25);
}
.bossgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0;}
.boss{
  display:inline-flex;align-items:center;padding:9px 14px;border-radius:8px;
  border:1px solid var(--c-line);background:linear-gradient(180deg,#0c1d2c,#091521);
  font-size:14px;color:#dcebf6;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.boss::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--c-cyan);
  box-shadow:0 0 8px rgba(79,214,255,.6);margin-right:9px;}

/* ============================ 一键复制 ============================ */
.copybar{display:flex;align-items:center;gap:14px;margin:4px 0 18px;flex-wrap:wrap;}
.copybtn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:10px 22px;border-radius:8px;font-family:var(--f-body);font-size:15px;font-weight:700;
  letter-spacing:2px;color:#04141f;
  background:linear-gradient(180deg,#5fd8ff,#1c8fc4);
  border:1px solid #2f8fb3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 0 #0e4a63,0 8px 18px -6px rgba(79,214,255,.5);
  transition:transform .12s var(--ease-out),box-shadow .12s,filter .12s;
}
.copybtn:hover{filter:brightness(1.06);}
.copybtn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 0 #0e4a63,0 4px 10px -6px rgba(79,214,255,.45);}
.copybtn::before{content:"\1F4CB";font-size:16px;line-height:1;}
.copybtn.copied{
  background:linear-gradient(180deg,#7fdc5a,#3d9e3a);
  border-color:#3d6b28;color:#06180b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 #1f4a1c,0 8px 18px -6px rgba(127,220,90,.5);
}
.copybtn.err{
  background:linear-gradient(180deg,#ff7a63,#c63a26);
  border-color:#8a2f22;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 #5a1c12,0 8px 18px -6px rgba(200,69,43,.5);
}
.copycnt{font-size:13px;letter-spacing:1px;color:var(--c-text-dim);}
.copycnt b{color:var(--c-cyan);font-weight:700;}

@media (max-width:520px){
  .copybtn{padding:9px 16px;font-size:14px;letter-spacing:1px;}
}

/* ============================ 底部横幅 ============================
   原样复制自 index.html 的 .smfoot + css/zhuye.css，数值未做任何改动
   ================================================================ */
.smfoot{
	width:1920px;
	height:142px;
	left: 50%;
	margin-left: -960px;
	overflow: hidden;
	position: relative;
	background: url(../images/smfoot.jpg) no-repeat center;
	background-position: 0px -0px;
	background-image: url(../images/smfoot.jpg);
}

/* ============================ 响应式 ============================ */
@media (max-width:960px){
  .hero h1{font-size:38px;letter-spacing:6px;}
  .panel{padding:22px 18px;}
  .panel > h2{font-size:22px;gap:10px;}
  .panel > h2 .no{width:32px;height:32px;font-size:15px;}
  .panel > .lead{padding-left:0;border-left:0;padding-top:0;}
  .grid2{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .hero{padding:48px 14px 30px;}
  .hero h1{font-size:30px;letter-spacing:4px;}
  .hero .sub{letter-spacing:3px;font-size:11px;}
  .container{padding:6px 12px 50px;}
  .panel{padding:18px 14px;}
}