/* ============================================================
   UNDERSTOOD-01 // CRT 赛博终端样式
   层级：bg(0) < terminal(1) < crt(6) < glitch(8) < flash(9) < chart(12)
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  background: radial-gradient(ellipse at 50% 38%, #04170a 0%, #010502 72%);
  font-family: Consolas, "Cascadia Code", "Courier New", monospace;
  color: #39FF14;
}

/* ---- WebGL 噪点背景（无 WebGL 时露出 body 渐变兜底） ---- */
#bg { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }

/* ---- xterm 挂载点：荧光辉光 ----
   注意：padding 必须挂在 xterm 内部的 .terminal 元素上，而不是本容器——
   FitAddon 计算行列数时只读 .terminal 的 padding；挂在容器上会让行数按
   整屏高度计算，导致底部输入行溢出视口被裁 */
#terminal { position: fixed; inset: 0; z-index: 1; filter: drop-shadow(0 0 3.5px rgba(57,255,20,.36)); }
#terminal .terminal { padding: 14px 18px 56px 18px; }

/* ---- CRT 复合层：扫描线 + 球面暗角 + 微闪烁 ---- */
#crt {
  position: fixed; inset: 0; z-index: 6; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.17) 0px, rgba(0,0,0,.17) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 50% 42%, transparent 64%, rgba(0,0,0,.36) 100%);
  animation: crtFlicker 4.2s infinite steps(1);
}
#crt::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 130px rgba(0,10,2,.45), inset 0 0 24px rgba(57,255,20,.06); }
@keyframes crtFlicker { 0%,100%{opacity:1} 47%{opacity:.94} 48%{opacity:1} 71%{opacity:.97} 72.5%{opacity:1} 89%{opacity:.965} 90%{opacity:1} }

/* ---- Glitch 故障层（触发时短暂撕裂/色偏/抖动，平时保持清晰） ---- */
#glitch { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; }
body.glitching #glitch { opacity: 1; }
body.glitching #glitch::before {
  content: ''; position: absolute; inset: -10%;
  background:
    repeating-linear-gradient(0deg, rgba(57,255,20,.20) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(0deg, rgba(255,107,53,.16) 0 3px, transparent 3px 15px);
  mix-blend-mode: screen;
  animation: gTear .12s steps(3) infinite;
}
body.glitching #glitch::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,107,53,.10) 0 6px, transparent 6px 46px);
  mix-blend-mode: screen;
  animation: gTear2 .09s steps(2) infinite;
}
@keyframes gTear  { 0%{transform:translateX(-7px) scaleY(1.03)} 50%{transform:translateX(5px) scaleY(.985)} 100%{transform:translateX(-2px) scaleY(1)} }
@keyframes gTear2 { 0%{transform:translateX(-9px)} 100%{transform:translateX(9px)} }
body.glitching #terminal { animation: gShake .13s steps(2) infinite; }
@keyframes gShake { 0%{transform:translateX(-3px)} 50%{transform:translateX(3px)} 100%{transform:translateX(-1px)} }
body.glitching #bg { filter: hue-rotate(38deg) saturate(1.7); }

/* ---- 信号闪屏（escape） ---- */
#flash { position: fixed; inset: 0; z-index: 9; pointer-events: none; background: #c9ffd2; opacity: 0; }
#flash.on { animation: flashA .55s ease-out forwards; }
@keyframes flashA { 0%{opacity:.92} 28%{opacity:.12} 52%{opacity:.45} 100%{opacity:0} }

/* ---- 开机通电横扫线 ---- */
#bootline {
  position: fixed; left: 0; right: 0; top: -4%; height: 3px; z-index: 10; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, #39FF14 40%, #c4ffc8 55%, transparent);
  box-shadow: 0 0 18px 5px rgba(57,255,20,.55);
}
#bootline.on { animation: sweep .72s ease-in forwards; }
@keyframes sweep { 0%{opacity:1; top:-4%} 100%{opacity:.55; top:104%} }

/* ---- Chart.js 悬浮面板：暗黑玻璃质感 + 荧光绿描边 + 弹性入场/熄灭退场 ---- */
#chartPanel {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 12;
  width: min(780px, 94vw); padding: 14px 18px 18px; display: none;
  background: rgba(3,12,5,.86);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(57,255,20,.75); border-radius: 6px;
  box-shadow: 0 0 32px rgba(57,255,20,.28), inset 0 0 48px rgba(57,255,20,.05);
}
#chartPanel.open, #chartPanel.out { display: block; }
#chartPanel.open { animation: panelIn .5s cubic-bezier(.18,1.5,.35,1) both; }
#chartPanel.out  { animation: panelOut .34s ease-in both; }
@keyframes panelIn {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.84); }
  62%  { opacity: 1; transform: translate(-50%,-50%) scale(1.035); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes panelOut { 0%{opacity:1} 45%{opacity:.55} 100%{opacity:0; transform:translate(-50%,-50%) scale(.965)} }
#chartHead {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;
  color: #39FF14; font-size: 13px; letter-spacing: 1.5px; text-shadow: 0 0 8px rgba(57,255,20,.6);
}
#chartHead .hint { color: #6f8f74; text-shadow: none; font-size: 12px; }
#chartGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chartBox { height: 240px; position: relative; filter: drop-shadow(0 0 6px rgba(57,255,20,.28)); }
.chartBox h4 { position: absolute; top: -2px; left: 2px; font-size: 11px; font-weight: normal; color: #9fd99a; letter-spacing: 1px; z-index: 1; }
@media (max-width: 640px) { #chartGrid { grid-template-columns: 1fr; } .chartBox { height: 200px; } }

/* ---- CDN 加载失败提示层 ---- */
#fatal { position: fixed; inset: 0; z-index: 99; display: none; place-items: center; background: #020603; padding: 24px; text-align: center; }
#fatal.on { display: grid; }
#fatal div { color: #ff6b35; font-size: 14px; line-height: 2; text-shadow: 0 0 10px rgba(255,107,53,.5); white-space: pre-wrap; }

/* ---- xterm 透明视口（透出底层噪点背景） ---- */
.xterm .xterm-viewport { background-color: transparent !important; }

/* ---- 电源待机入口层：按下电源键 / Enter 接通系统 ---- */
#power {
  position: fixed; inset: 0; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, rgba(3,21,10,.9) 0%, rgba(1,6,2,.95) 75%);
  transition: opacity .55s ease;
}
#power.off { opacity: 0; pointer-events: none; }
.pwr-box { position: relative; z-index: 2; text-align: center; }
.pwr-title { font-size: 26px; font-weight: 700; color: #39FF14; letter-spacing: .38em; text-shadow: 0 0 14px rgba(57,255,20,.55); }
.pwr-sub { margin-top: 8px; font-size: 12px; color: #6f6f6f; letter-spacing: .18em; }
.pwr-tags { margin-top: 16px; display: flex; gap: 12px; justify-content: center; }
.pwr-tags span {
  font-size: 12px; padding: 5px 14px; border: 1px solid rgba(57,255,20,.35);
  border-radius: 999px; color: rgba(57,255,20,.78);
  background: rgba(57,255,20,.04); letter-spacing: .08em;
  text-shadow: 0 0 6px rgba(57,255,20,.4);
}
#pwrBtn {
  margin: 34px auto 0; display: block;
  width: 112px; height: 112px; border-radius: 50%;
  background: rgba(57,255,20,.05);
  border: 2px solid rgba(57,255,20,.5);
  box-shadow: 0 0 20px rgba(57,255,20,.25), inset 0 0 12px rgba(57,255,20,.12);
  color: #39FF14; outline: none; cursor: pointer;
  animation: pwrPulse 2.2s ease-in-out infinite;
  transition: transform .16s ease, background .2s ease;
}
#pwrBtn:hover { transform: scale(1.07); background: rgba(57,255,20,.12); }
#pwrBtn:active { transform: scale(.93); }
.pwr-icon { font-size: 46px; line-height: 1; text-shadow: 0 0 16px rgba(57,255,20,.75); }
@keyframes pwrPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(57,255,20,.2), inset 0 0 10px rgba(57,255,20,.1); }
  50%      { box-shadow: 0 0 36px rgba(57,255,20,.5), inset 0 0 20px rgba(57,255,20,.2); }
}
.pwr-tip { margin-top: 44px; font-size: 13px; color: #aaaaaa; letter-spacing: .28em; }
.pwr-hint { margin-top: 10px; font-size: 13px; color: rgba(57,255,20,.65); }
.pwr-hint b { color: #39FF14; text-shadow: 0 0 8px rgba(57,255,20,.6); }

/* ---- 待机页循环动画：hex 乱码流视差滚动 + 周期扫描线掠过 ---- */
.pwr-hex {
  position: absolute; top: 0; left: 0; right: 0; z-index: 0;
  color: rgba(57,255,20,.11);
  font-size: 13px; line-height: 1.7; letter-spacing: .1em;
  white-space: pre; pointer-events: none;
  animation: pwrHexScroll 10s linear infinite;
}
.pwr-hex.fast { left: 52%; right: 0; color: rgba(57,255,20,.06); animation-duration: 5.5s; }
@keyframes pwrHexScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.pwr-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(57,255,20,.45) 25%, rgba(190,255,170,.85) 50%, rgba(57,255,20,.45) 75%, transparent);
  filter: blur(1px); box-shadow: 0 0 18px rgba(57,255,20,.35);
  opacity: 0; pointer-events: none;
  animation: pwrScan 4.6s ease-in-out infinite;
}
@keyframes pwrScan {
  0%   { opacity: 0; transform: translateY(-10px); }
  7%   { opacity: .9; }
  48%  { opacity: .15; }
  52%  { opacity: 0; transform: translateY(102vh); }
  100% { opacity: 0; transform: translateY(102vh); }
}