/* ============================================================
   DISTRICT-01 —— 武士零像素风服务器状态面板
   深紫夜色 · 霓虹粉/青 · CRT 扫描线 · 像素字体
   ============================================================ */

@font-face {
  font-family: 'Pixel SC';
  src: url('/pixel-zh.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0a0812;
  --panel: rgba(16, 12, 28, 0.88);
  --panel-brd: #3a2d55;
  --panel-hi: #524073;
  --ink: #d9d2ee;
  --dim: #8b82ab;
  --dim2: #5e5578;
  --pink: #ff3d7f;
  --cyan: #3ce8e0;
  --amber: #ffb454;
  --purple: #9d6bff;
  --green: #6dff9e;
  --red: #ff5c5c;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Pixel SC', 'Zpix', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

::selection { background: rgba(255, 61, 127, 0.4); color: #fff; }

/* ============================================================
   背景：夜之城
   ============================================================ */

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    linear-gradient(180deg, #06050c 0%, #0b0918 34%, #150f2b 58%, #1d1338 76%, #120b22 100%);
}

.horizon {
  position: absolute;
  left: -10vw;
  right: -10vw;
  top: 40%;
  height: 34%;
  background:
    radial-gradient(60% 90% at 30% 62%, rgba(255, 61, 127, 0.20), transparent 70%),
    radial-gradient(55% 85% at 72% 58%, rgba(157, 107, 255, 0.22), transparent 70%),
    radial-gradient(40% 70% at 52% 70%, rgba(60, 232, 224, 0.10), transparent 70%);
  filter: blur(2px);
}

.city {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.city.far  { width: 140vw; opacity: 0.95; animation: sway 90s ease-in-out infinite alternate; }
.city.near { width: 140vw; animation: sway 55s ease-in-out infinite alternate-reverse; }

@keyframes sway {
  from { transform: translateX(0); }
  to   { transform: translateX(-22vw); }
}

.signs { position: absolute; inset: 0; pointer-events: none; }

.sign {
  position: absolute;
  font-family: 'Pixel SC', monospace;
  line-height: 1;
  animation: signflicker 6s steps(1) infinite;
}

.sign.s1 { top: 24%; left: 68%; font-size: 24px; color: #ff9ec4;
  text-shadow: 0 0 4px #ff3d7f, 0 0 14px #ff3d7f, 0 0 34px rgba(255, 61, 127, 0.6); animation-delay: -2s; }
.sign.s2 { top: 34%; left: 13%; font-size: 36px; color: #aefcf8;
  text-shadow: 0 0 4px #3ce8e0, 0 0 16px #3ce8e0, 0 0 40px rgba(60, 232, 224, 0.55); animation-delay: -4s; }
.sign.s3 { top: 55%; left: 84%; font-size: 18px; color: #ffd9a0;
  text-shadow: 0 0 4px #ffb454, 0 0 12px #ffb454; animation-delay: -1s; }
.sign.s4 { top: 14%; left: 30%; font-size: 14px; color: #c9f7b8;
  text-shadow: 0 0 4px #6dff9e, 0 0 12px #6dff9e; animation-delay: -5s; }

@keyframes signflicker {
  0%, 88%  { opacity: 1; }
  89%      { opacity: 0.25; }
  91%      { opacity: 1; }
  93%      { opacity: 0.45; }
  95%, 100% { opacity: 1; }
}

.street-glow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background:
    linear-gradient(0deg, rgba(255, 61, 127, 0.10), transparent 62%),
    linear-gradient(0deg, rgba(60, 232, 224, 0.05), transparent 44%);
}

#rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: 0.75;
}

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0.26) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.scanbeam {
  position: absolute;
  left: 0; right: 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgba(180, 220, 255, 0.045), transparent);
  animation: beam 9s linear infinite;
  pointer-events: none;
}

@keyframes beam {
  from { top: -12%; }
  to   { top: 112%; }
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, transparent 58%, rgba(0, 0, 0, 0.52) 100%);
  pointer-events: none;
}

.flicker {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  animation: flick 7s steps(1) infinite;
  pointer-events: none;
}

@keyframes flick {
  0%, 100% { opacity: 0; }
  41% { opacity: 0.05; }
  42% { opacity: 0; }
  73% { opacity: 0.04; }
  74% { opacity: 0; }
}

/* ============================================================
   像素加载屏
   ============================================================ */

.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px),
    radial-gradient(90% 70% at 50% 46%, #120d24 0%, #06050c 78%);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
}

.boot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  width: min(420px, 88vw);
}

.boot-avatar {
  width: 176px;
  height: 176px;
  padding: 0;
  border: 2px solid var(--panel-brd);
  background: #0d0b16;
  box-shadow: 0 0 0 2px rgba(5, 4, 10, 0.9), 0 0 30px rgba(60, 232, 224, 0.2);
  animation: bootzero 2.4s steps(1) infinite;
}

.boot-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

@keyframes bootzero {
  0%, 86%  { opacity: 1; }
  87%      { opacity: 0.3; }
  89%      { opacity: 1; }
  91%      { opacity: 0.55; }
  93%, 100% { opacity: 1; }
}

.boot-title {
  font-size: 24px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--pink);
  text-shadow: 0 0 10px rgba(255, 61, 127, 0.7);
}

.boot-label {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.12em;
}

.boot-label span {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(60, 232, 224, 0.7);
}

.boot-bar {
  display: flex;
  gap: 3px;
  width: 100%;
  height: 16px;
  padding: 2px;
  border: 2px solid var(--panel-brd);
  background: rgba(10, 8, 18, 0.8);
  box-shadow: 0 0 0 2px rgba(5, 4, 10, 0.9), 0 0 18px rgba(157, 107, 255, 0.15);
}

.boot-bar i {
  flex: 1;
  background: rgba(150, 130, 190, 0.1);
}

.boot-bar i.on {
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}

.boot-tip {
  font-size: 12px;
  color: var(--dim2);
  letter-spacing: 0.08em;
  min-height: 20px;
  text-align: center;
}

.boot.done { animation: crtoff 0.5s steps(6) forwards; }

@keyframes crtoff {
  0%  { opacity: 1; transform: scaleY(1); filter: brightness(1); }
  55% { opacity: 1; transform: scaleY(0.012); filter: brightness(2.6); }
  80% { opacity: 1; transform: scaleY(0.012) scaleX(0.4); filter: brightness(3); }
  100% { opacity: 0; transform: scaleY(0.012) scaleX(0); filter: brightness(3); }
}

/* ============================================================
   背景层之后的内容
   ============================================================ */

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) clamp(12px, 2.5vw, 24px) 64px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 12px;
}

.brand {
  color: var(--pink);
  letter-spacing: 0.14em;
  font-size: 12px;
  text-shadow: 0 0 8px rgba(255, 61, 127, 0.55);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tri {
  width: 0; height: 0;
  border-left: 7px solid var(--pink);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  flex: none;
  filter: drop-shadow(0 0 4px rgba(255, 61, 127, 0.8));
}

.topbar-right { display: flex; align-items: center; gap: 10px; flex: none; }

.node-tag {
  color: var(--dim);
  border: 1px solid var(--panel-brd);
  padding: 2px 8px;
  background: rgba(10, 8, 18, 0.6);
  letter-spacing: 0.1em;
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  border: 1px solid rgba(109, 255, 158, 0.4);
  background: rgba(109, 255, 158, 0.06);
  padding: 2px 9px;
  letter-spacing: 0.14em;
  text-shadow: 0 0 6px rgba(109, 255, 158, 0.6);
}

.live i {
  width: 6px; height: 6px;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: blink 1.2s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0.15; } }

/* ============================================================
   网格与像素面板
   ============================================================ */

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "clock clock clock clock weather weather weather weather ident ident ident ident"
    "greet greet greet greet greet greet greet greet ident ident ident ident"
    "vitals vitals vitals vitals vitals vitals vitals vitals vitals vitals vitals vitals"
    "charts charts charts charts charts charts charts charts charts charts charts charts"
    "net net net net net net net vis vis vis vis vis";
}

.p-clock  { grid-area: clock; }
.p-weather{ grid-area: weather; }
.p-ident  { grid-area: ident; }
.p-greet  { grid-area: greet; }
.p-vitals { grid-area: vitals; }
.p-charts { grid-area: charts; }
.p-net    { grid-area: net; }
.p-vis    { grid-area: vis; }

.panel {
  position: relative;
  background: var(--panel);
  border: 2px solid var(--panel-brd);
  box-shadow:
    0 0 0 2px rgba(5, 4, 10, 0.9),
    0 10px 0 -4px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(150, 120, 220, 0.18),
    inset 0 0 28px rgba(120, 80, 220, 0.05);
  padding: 14px 16px;
  clip-path: polygon(
    0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
  );
}

.panel-title {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-cyan   { color: var(--cyan);   text-shadow: 0 0 8px rgba(60, 232, 224, 0.45); }
.t-pink   { color: var(--pink);   text-shadow: 0 0 8px rgba(255, 61, 127, 0.45); }
.t-amber  { color: var(--amber);  text-shadow: 0 0 8px rgba(255, 180, 84, 0.4); }
.t-purple { color: var(--purple); text-shadow: 0 0 8px rgba(157, 107, 255, 0.45); }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================================
   时钟卡
   ============================================================ */

.clock {
  font-size: 48px;
  line-height: 1.1;
  color: #f2eeff;
  letter-spacing: 0.04em;
  text-shadow:
    3px 0 rgba(255, 61, 127, 0.5),
    -3px 0 rgba(60, 232, 224, 0.5),
    0 0 22px rgba(157, 107, 255, 0.35);
  font-variant-numeric: tabular-nums;
}

.clock-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  color: var(--dim);
  letter-spacing: 0.1em;
  flex-wrap: wrap;
}

.day-badge {
  color: var(--pink);
  border: 1px solid rgba(255, 61, 127, 0.5);
  background: rgba(255, 61, 127, 0.08);
  padding: 1px 8px;
  letter-spacing: 0.12em;
  text-shadow: 0 0 8px rgba(255, 61, 127, 0.6);
}

.clock-up {
  margin-top: 6px;
  color: var(--dim2);
  letter-spacing: 0.08em;
}

/* ============================================================
   天气卡
   ============================================================ */

.weather-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

#wicon {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  flex: none;
}

.w-temp {
  font-size: 36px;
  color: #f2eeff;
  text-shadow: 0 0 14px rgba(255, 180, 84, 0.45);
}

.w-desc { color: var(--dim); margin-top: 6px; }

.w-city { color: var(--dim2); letter-spacing: 0.14em; margin-top: 2px; }

/* ============================================================
   身份卡
   ============================================================ */

.ident-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#avatar {
  width: 76px;
  height: 76px;
  image-rendering: pixelated;
  flex: none;
  border: 2px solid var(--panel-brd);
  background: #0d0b16;
}

.hostname {
  font-size: 24px;
  color: #f2eeff;
  text-shadow: 0 0 12px rgba(157, 107, 255, 0.5);
  word-break: break-all;
  line-height: 1.3;
}

.os-line { color: var(--dim); margin-top: 2px; }

.sys {
  margin-top: 12px;
  border-top: 1px dashed var(--panel-brd);
  padding-top: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
}

.sys dt { color: var(--dim2); letter-spacing: 0.08em; white-space: nowrap; }

.sys dd {
  color: var(--dim);
  text-align: right;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   问候 / 打字机
   ============================================================ */

.p-greet { display: flex; flex-direction: column; }

.typewriter {
  font-size: 24px;
  line-height: 1.5;
  color: #f2eeff;
  min-height: 36px;
  text-shadow: 0 0 12px rgba(255, 61, 127, 0.35);
  word-break: break-all;
}

.tw-prefix { color: var(--pink); text-shadow: 0 0 8px rgba(255, 61, 127, 0.8); }

.tw-cursor {
  color: var(--pink);
  animation: cursor 1s steps(1) infinite;
  text-shadow: 0 0 8px rgba(255, 61, 127, 0.9);
}

@keyframes cursor { 50% { opacity: 0; } }

.greet-sub { color: var(--dim); margin-top: auto; padding-top: 10px; letter-spacing: 0.06em; }

/* 打字时的故障抖动 */
.glitching { animation: glitch 0.28s steps(2) 2; }

@keyframes glitch {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2px, 1px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   生命体征
   ============================================================ */

.vitals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
}

.vi-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vi-label {
  color: var(--dim);
  letter-spacing: 0.12em;
  width: 44px;
  flex: none;
}

.vi-segs {
  display: flex;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.vi-segs i {
  flex: 1;
  height: 12px;
  background: rgba(150, 130, 190, 0.12);
  box-shadow: inset 0 0 0 1px rgba(150, 130, 190, 0.08);
}

.vi-segs i.on {
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
}

.vi-val {
  color: #f2eeff;
  min-width: 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(217, 210, 238, 0.35);
}

.vi-sub {
  margin-top: 4px;
  padding-left: 54px;
  color: var(--dim2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   图表
   ============================================================ */

.legend {
  display: flex;
  gap: 16px;
  margin: 2px 0 6px;
}

.lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  letter-spacing: 0.1em;
}

.lg i { width: 8px; height: 8px; flex: none; box-shadow: 0 0 6px currentColor; }

.ranges {
  display: inline-flex;
  gap: 4px;
}

.ranges button {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dim);
  background: rgba(150, 130, 190, 0.08);
  border: 1px solid var(--panel-brd);
  padding: 3px 10px;
  cursor: pointer;
}

.ranges button:hover { color: var(--ink); border-color: var(--panel-hi); }

.ranges button.on {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(60, 232, 224, 0.08);
  text-shadow: 0 0 8px rgba(60, 232, 224, 0.7);
}

.ranges button:focus-visible { outline: 1px solid var(--cyan); outline-offset: 1px; }

.chart-wrap { position: relative; height: 220px; }

.chart-wrap.short { height: 160px; }

.chart-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
  cursor: crosshair;
}

.tip {
  position: absolute;
  pointer-events: none;
  background: rgba(8, 6, 16, 0.94);
  border: 1px solid var(--panel-hi);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.7;
  white-space: nowrap;
  transform: translate(-50%, 0);
  box-shadow: 0 0 0 2px rgba(5, 4, 10, 0.9), 0 0 16px rgba(157, 107, 255, 0.18);
  z-index: 5;
}

.tip .t-time { color: var(--dim2); }

.tip .row { display: flex; gap: 7px; align-items: center; font-variant-numeric: tabular-nums; }

.tip .row i { width: 6px; height: 6px; flex: none; }

/* ============================================================
   访客
   ============================================================ */

.vlist { list-style: none; }

.vlist li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--ink);
  border-bottom: 1px dashed rgba(150, 130, 190, 0.14);
}

.vlist li:last-child { border-bottom: 0; }

.vlist li.empty {
  color: var(--dim2);
  justify-content: center;
  border-bottom: 0;
  padding: 16px 0;
}

.vlist li::before {
  content: '>';
  color: var(--purple);
  text-shadow: 0 0 6px rgba(157, 107, 255, 0.7);
  flex: none;
}

.v-time { margin-left: auto; color: var(--dim2); font-size: 12px; }

.vlist li.pop { animation: vpop 0.4s steps(3); }

@keyframes vpop {
  from { opacity: 0; transform: translateY(-6px); }
}

/* ============================================================
   底部滚动条
   ============================================================ */

.ticker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: rgba(8, 6, 16, 0.92);
  border-top: 2px solid var(--panel-brd);
  box-shadow: 0 -4px 0 rgba(5, 4, 10, 0.9), 0 -1px 0 rgba(255, 61, 127, 0.25);
  overflow: hidden;
  padding: 5px 0;
}

.ticker-inner {
  display: inline-block;
  white-space: nowrap;
  color: var(--dim);
  letter-spacing: 0.1em;
  animation: marquee 36s linear infinite;
  will-change: transform;
}

.ticker-inner b { color: var(--pink); font-weight: 400; }

.ticker-inner .sep { color: var(--dim2); margin: 0 10px; }

.ticker:hover .ticker-inner { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 860px) {
  .grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "clock weather"
      "ident ident"
      "greet greet"
      "vitals vitals"
      "charts charts"
      "net net"
      "vis vis";
  }
  .chart-wrap { height: 190px; }
  .chart-wrap.short { height: 140px; }
  .clock { font-size: 36px; }
}

@media (max-width: 560px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "clock" "weather" "ident" "greet" "vitals" "charts" "net" "vis";
    gap: 10px;
  }
  .wrap { padding-bottom: 56px; }
  .panel { padding: 12px; }
  .clock { font-size: 36px; }
  .vitals { grid-template-columns: 1fr; gap: 12px; }
  .vi-sub { padding-left: 0; }
  .hostname { font-size: 18px; }
  .typewriter { font-size: 18px; min-height: 28px; }
  .sign.s1 { left: 74%; }
  .node-tag { display: none; }
  .chart-wrap { height: 170px; }
}

/* ============================================================
   动效弱化
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .city.far, .city.near { animation: none; }
  .city.far { transform: translateX(-6vw); }
  .city.near { transform: translateX(-14vw); }
  .scanbeam { animation: none; display: none; }
  .flicker { animation: none; }
  .sign { animation: none; }
  .ticker-inner { animation-duration: 80s; }
  .live i { animation: none; }
}