/* 子页面共享样式：背景板、雪花层、顶栏、玻璃面板与通用组件 */
:root{
  --bg-deep:#050c22;
  --navy:#0a1533;
  --navy-2:#132253;
  --blue:#1d3f8f;
  --blue-light:#5b8bd8;
  --ice:#cfe2ff;
  --text:#e9f0ff;
  --text-dim:rgba(233,240,255,.62);
  --text-soft:rgba(233,240,255,.42);
  --line:rgba(160,195,255,.16);
  --glass:rgba(12,24,58,.42);
  --glass-hi:rgba(28,50,105,.55);
  --ok:#6ee7a8;
  --font:'Microsoft YaHei UI','Microsoft YaHei',-apple-system,'Segoe UI',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:var(--font);
  color:var(--text);
  background-color:var(--bg-deep);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ===== 背景板 ===== */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  background-image:url('图.png');
  background-size:cover;
  background-position:center 58%;
  background-repeat:no-repeat;
  transform:scale(1.04);
  animation:bgDrift 40s ease-in-out infinite alternate;
}

@keyframes bgDrift{
  from{transform:scale(1.04) translate3d(0,0,0);}
  to{transform:scale(1.09) translate3d(-1.2%,-0.8%,0);}
}

.bg-veil{
  position:fixed;
  inset:0;
  z-index:1;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(6,14,40,0) 0%, rgba(5,11,30,.35) 55%, rgba(3,7,20,.82) 100%),
    linear-gradient(180deg, rgba(4,9,26,.72) 0%, rgba(6,14,38,.28) 34%, rgba(6,14,38,.30) 62%, rgba(3,7,20,.88) 100%);
  pointer-events:none;
}

.bg-glow{
  position:fixed;
  left:50%;
  top:56%;
  width:min(1200px,140vw);
  height:520px;
  transform:translate(-50%,-50%);
  z-index:1;
  background:radial-gradient(closest-side, rgba(90,150,255,.20), rgba(60,110,220,.07) 55%, transparent 78%);
  filter:blur(6px);
  pointer-events:none;
}

.vignette{
  position:fixed;
  inset:0;
  z-index:1;
  box-shadow:inset 0 0 220px 60px rgba(2,5,16,.85);
  pointer-events:none;
}

/* ===== 雪花 ===== */
.snow{
  position:fixed;
  inset:0;
  z-index:60;
  overflow:hidden;
  pointer-events:none;
}
.snow canvas{
  display:block;
  pointer-events:none;
}

/* ===== 顶栏 ===== */
header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px clamp(20px,5vw,64px);
  background:linear-gradient(180deg, rgba(5,11,30,.62), rgba(5,11,30,.12));
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15pt;
  font-weight:600;
  letter-spacing:.14em;
  white-space:nowrap;
  color:inherit;
  text-decoration:none;
}
.brand svg{width:26px;height:26px;flex:none;opacity:.9;}

.nav{
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,26px);
}
.nav a{
  font-size:9.5pt;
  letter-spacing:.14em;
  color:var(--text-dim);
  text-decoration:none;
  padding:6px 2px;
  border-bottom:1px solid transparent;
  transition:color .25s ease,border-color .25s ease;
}
.nav a:hover{color:var(--text);}
.nav a.active{color:var(--text);border-bottom-color:var(--ice);}

.back{
  font-size:10pt;
  letter-spacing:.14em;
  color:var(--text);
  text-decoration:none;
  padding:9px 20px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--glass);
  white-space:nowrap;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.back:hover{
  background:var(--glass-hi);
  border-color:rgba(160,195,255,.4);
  transform:translateY(-1px);
}

/* ===== 面板 ===== */
.page{
  position:relative;
  z-index:10;
  display:flex;
  justify-content:center;
  padding:132px clamp(20px,6vw,64px) 96px;
}

.panel{
  width:100%;
  max-width:780px;
  height:fit-content;
  padding:38px clamp(22px,3.4vw,46px) 30px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 30px 70px -30px rgba(3,8,24,.9);
  animation:riseIn .7s cubic-bezier(.2,.7,.3,1) both;
}
.panel--wide{max-width:920px;}

.panel h1{
  font-size:19pt;
  font-weight:600;
  letter-spacing:.18em;
}

.lead{
  margin-top:12px;
  font-size:10pt;
  line-height:1.9;
  letter-spacing:.1em;
  color:var(--text-dim);
}

.group{margin-top:34px;}

.group-title{
  font-size:9pt;
  letter-spacing:.34em;
  color:var(--text-soft);
}

/* ===== 状态指示 ===== */
.status-line{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  font-size:10pt;
  letter-spacing:.2em;
  color:var(--ice);
}
.dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 10px 2px rgba(110,231,168,.7);
  animation:blink 2.2s ease-in-out infinite;
}
@keyframes blink{
  0%,100%{opacity:.45;}
  50%{opacity:1;}
}

/* ===== 指标卡 ===== */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:14px;
  margin-top:24px;
}
.stat-card{
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(8,18,44,.34);
}
.stat-card b{
  display:block;
  font-size:17pt;
  font-weight:600;
  letter-spacing:.04em;
}
.stat-card span{
  display:block;
  margin-top:6px;
  font-size:9pt;
  letter-spacing:.18em;
  color:var(--text-dim);
}
.stat-card small{
  display:block;
  margin-top:5px;
  font-size:8.5pt;
  letter-spacing:.08em;
  color:var(--text-soft);
}

/* ===== 进度条 ===== */
.meter{margin-top:18px;}
.meter-head{
  display:flex;
  justify-content:space-between;
  font-size:9.5pt;
  letter-spacing:.12em;
  color:var(--text-dim);
  margin-bottom:8px;
}
.meter-head b{color:var(--text);font-weight:600;}
.bar{
  height:6px;
  border-radius:99px;
  background:rgba(160,195,255,.14);
  overflow:hidden;
}
.bar i{
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#3f6fd0,#7fb0ff);
}

/* ===== 键值行 ===== */
.kv{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:10pt;
}
.kv:last-child{border-bottom:none;}
.kv span{color:var(--text-dim);letter-spacing:.12em;}
.kv b{font-weight:600;letter-spacing:.08em;text-align:right;}

/* ===== 标签 ===== */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}
.chip{
  font-size:9pt;
  letter-spacing:.14em;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(91,139,216,.16);
  color:var(--ice);
}

/* ===== 时间线 ===== */
.timeline{margin-top:14px;}
.tl{
  display:flex;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.tl:last-child{border-bottom:none;}
.tl time{
  flex:none;
  padding-top:2px;
  font-size:9pt;
  letter-spacing:.1em;
  color:var(--text-soft);
}
.tl p{
  font-size:9.5pt;
  line-height:1.8;
  letter-spacing:.06em;
  color:var(--text-dim);
}
.tl p b{color:var(--text);font-weight:600;}

/* ===== 聊天栏 ===== */
.chat{
  margin-top:16px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(6,14,38,.5);
}
.chat-line{
  display:flex;
  gap:10px;
  padding:3px 0;
  font-size:9.5pt;
  line-height:1.9;
  letter-spacing:.05em;
}
.chat-line time{flex:none;color:var(--text-soft);}
.chat-line b{flex:none;color:var(--ice);font-weight:600;}
.chat-line span{color:var(--text-dim);}
.chat-tag{
  display:inline-block;
  margin-top:12px;
  font-size:8.5pt;
  letter-spacing:.16em;
  color:var(--text-soft);
}

/* ===== 在线玩家（横条） ===== */
.player{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:10px;
  padding:12px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(8,18,44,.34);
}
.player-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
  width:152px;
}
.player-name{
  font-size:11pt;
  font-weight:600;
  letter-spacing:.08em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.player-mode{
  flex:none;
  font-size:8.5pt;
  letter-spacing:.12em;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(91,139,216,.16);
  color:var(--ice);
}
.player-stats{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 16px;
  flex:1;
}
.pbar{
  display:flex;
  align-items:center;
  gap:9px;
  flex:1 1 128px;
  min-width:118px;
}
.pbar > span{
  flex:none;
  font-size:8.5pt;
  letter-spacing:.12em;
  color:var(--text-soft);
}
.pbar .bar{
  flex:1;
  min-width:34px;
  height:5px;
}
.pbar b{
  flex:none;
  min-width:48px;
  text-align:right;
  font-size:9.5pt;
  font-weight:600;
  letter-spacing:.03em;
}
.ptext{flex:none;min-width:66px;}
.ptext span{
  display:block;
  font-size:8.5pt;
  letter-spacing:.12em;
  color:var(--text-soft);
}
.ptext b{
  display:block;
  margin-top:3px;
  font-size:9.5pt;
  font-weight:600;
}
.bar--hp i{background:linear-gradient(90deg,#3fbf7f,#6ee7a8);}
.bar--food i{background:linear-gradient(90deg,#c98a2e,#f0c05a);}
.bar--armor i{background:linear-gradient(90deg,#4a6fd0,#8fb6ff);}

/* ===== 文件列表 ===== */
.file{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.file:last-child{border-bottom:none;}
.file-name{
  font-size:11pt;
  font-weight:600;
  letter-spacing:.08em;
}
.file-meta{
  margin-top:6px;
  font-size:9pt;
  letter-spacing:.08em;
  color:var(--text-dim);
}

/* ===== 步骤 ===== */
.steps{counter-reset:s;margin-top:14px;}
.step{
  display:flex;
  gap:14px;
  padding:11px 0;
  font-size:9.5pt;
  line-height:1.85;
  letter-spacing:.06em;
  color:var(--text-dim);
}
.step::before{
  counter-increment:s;
  content:counter(s);
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(91,139,216,.18);
  color:var(--ice);
  font-size:9pt;
}

/* ===== 说明文字 ===== */
.note{
  margin-top:18px;
  font-size:9pt;
  line-height:1.9;
  letter-spacing:.08em;
  color:var(--text-soft);
}

/* ===== 按钮 ===== */
.btn-ghost{
  font-family:inherit;
  font-size:10pt;
  letter-spacing:.14em;
  padding:12px 26px;
  border-radius:999px;
  color:var(--text);
  background:var(--glass);
  border:1px solid var(--line);
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.btn-ghost:hover{
  background:var(--glass-hi);
  border-color:rgba(160,195,255,.4);
  transform:translateY(-1px);
}
.btn-sm{padding:9px 20px;font-size:9.5pt;}

.panel-foot{
  margin-top:36px;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.foot-note{
  font-size:9pt;
  letter-spacing:.12em;
  color:var(--text-soft);
}

/* ===== 数据来源标记 ===== */
.data-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  margin-right:8px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:8.5pt;
  letter-spacing:.14em;
  color:var(--text-soft);
  vertical-align:middle;
}
.data-badge.is-live{
  color:var(--ok);
  border-color:rgba(110,231,168,.4);
}
.data-badge.is-live::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 8px 2px rgba(110,231,168,.6);
}

/* ===== 未连接服务器：状态转灰，示例数据淡化 ===== */
body[data-live="0"] .status-line{color:var(--text-dim);}
body[data-live="0"] .status-line .dot{
  background:rgba(233,240,255,.42);
  box-shadow:none;
  animation:none;
}
/* 未连接时展示的并非真实数据，整体降低存在感以免被误读 */
body[data-live="0"] .stat-card,
body[data-live="0"] .meter,
body[data-live="0"] .kv,
body[data-live="0"] .player,
body[data-live="0"] .chat,
body[data-live="0"] .timeline{
  opacity:.58;
  transition:opacity .3s ease;
}

/* ===== 设置控件 ===== */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.row:last-child{border-bottom:none;padding-bottom:4px;}

.row-text b{
  display:block;
  font-size:11pt;
  font-weight:600;
  letter-spacing:.1em;
}
.row-text span{
  display:block;
  margin-top:6px;
  font-size:9pt;
  letter-spacing:.08em;
  color:var(--text-dim);
}

.segmented{
  display:flex;
  flex:none;
  gap:2px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(8,18,44,.5);
}
.segmented button{
  font-family:inherit;
  font-size:9.5pt;
  letter-spacing:.08em;
  padding:8px 13px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
  white-space:nowrap;
  transition:background .25s ease,color .25s ease;
}
.segmented button:hover{color:var(--text);}
.segmented button[aria-pressed="true"]{
  color:#f2f7ff;
  background:linear-gradient(135deg,#3f6fd0,#1c3a86);
  box-shadow:0 8px 20px -10px rgba(60,120,255,.9);
}

.switch{
  position:relative;
  flex:none;
  width:48px;
  height:27px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(160,195,255,.14);
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease;
}
.switch i{
  position:absolute;
  top:3px;left:3px;
  width:19px;height:19px;
  border-radius:50%;
  background:#cfe2ff;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.switch[aria-checked="true"]{
  background:linear-gradient(135deg,#3f6fd0,#1c3a86);
  border-color:rgba(160,195,255,.4);
}
.switch[aria-checked="true"] i{transform:translateX(21px);}

.range{
  flex:none;
  width:210px;
  accent-color:var(--blue-light);
  cursor:pointer;
}

.saved{
  font-size:9.5pt;
  letter-spacing:.22em;
  color:var(--ok);
  opacity:0;
  transition:opacity .3s ease;
}
.saved.show{opacity:1;}

/* ===== 动效与响应式 ===== */
@keyframes riseIn{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}

@media (max-width:820px){
  .nav{display:none;}
}

@media (max-width:640px){
  .brand{font-size:12pt;letter-spacing:.1em;}
  .page{padding-top:112px;}
  .row{flex-direction:column;align-items:flex-start;gap:14px;}
  .segmented{width:100%;justify-content:space-between;flex-wrap:wrap;}
  .range{width:100%;}
  .file{flex-direction:column;align-items:flex-start;gap:14px;}
  .player{flex-direction:column;align-items:stretch;gap:12px;}
  .player-head{width:auto;}
  .pbar{flex:1 1 100%;}
  .panel-foot{flex-direction:column;align-items:stretch;text-align:center;}
  .kv{flex-direction:column;align-items:flex-start;gap:6px;}
  .kv b{text-align:left;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;}
}