/* ========================================
   全局重置与基础
   ======================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  background: #060608;
  overflow: hidden;
  user-select: none;
}

/* 禁止网页内图片/素材被拖动 */
img { -webkit-user-drag: none; user-select: none; }

/* ========================================
   屏幕容器（老式电视机效果）
   ======================================== */
.screen {
  display: none;
  width: 100%; height: 100%;
  position: relative;
}
.screen.active { display: block; }

/* 登录屏幕：老式电视机曲率 + 四角黑边 */
#login-screen {
  /* 电视机屏幕区域，四周留黑边 */
  margin: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  /* 屏幕圆角 */
  border-radius: 36px;
  overflow: hidden;
  /* 屏幕边缘内阴影，增强四角黑边 */
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.7),
    inset 0 0 120px rgba(0,0,0,0.4),
    0 0 40px rgba(0,0,0,0.8);
  /* 背景色 */
  background: #060608;
}

/* 屏幕四角弧形黑边遮罩 */
#login-screen::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 36px;
  /* 四角径向渐变黑边 */
  background:
    radial-gradient(circle at 0% 0%, rgba(0,0,0,0.9) 0%, transparent 25%),
    radial-gradient(circle at 100% 0%, rgba(0,0,0,0.9) 0%, transparent 25%),
    radial-gradient(circle at 0% 100%, rgba(0,0,0,0.9) 0%, transparent 25%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,0.9) 0%, transparent 25%);
  pointer-events: none;
  z-index: 10;
}

/* 屏幕反光效果 */
#login-screen::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 36px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.06) 0%,
    transparent 40%,
    transparent 60%,
    rgba(0,0,0,0.1) 100%
  );
  pointer-events: none;
  z-index: 11;
}

/* ========================================
   滚动建筑背景：屏幕1/3高度处，横向平铺到右边，
   循环左移，上下渐隐融入黑色背景
   ======================================== */
#bg-building {
  position: absolute;
  top: 23.33%;            /* 最远景，位置保持不动 */
  left: 0;
  width: 100%;
  height: 230px;          /* 最远景，缩放倍率最小 */
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  opacity: 0.3;           /* 50%透明，与黑底混合出朦胧雾感 */
}
/* 所有城市层统一效果：去色黑白+压暗，上下边缘渐隐融入黑底 */
#bg-building, .bg-layer {
  filter: grayscale(1) brightness(0.55);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
/* F5远景更早开始向下渐隐（40%起淡出），朦胧感更强；id选择器覆盖上方共用遮罩 */
#bg-f5 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 40%, transparent 100%);
}
/* F2近景：下移向下淡出起点到84%，楼体更多保持不透明，避免高亮度时与背景叠加穿透；id覆盖共用遮罩 */
#bg-f2 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 84%, transparent 100%);
}
/* 贴脸最近层：关闭上方淡入(顶部即全实)，仅保留下方向下渐隐 */
#bg-near {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}
/* ===== 视差城市层通用容器（F5远景/F3中景/F2近景） ===== */
.bg-layer {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
/* 越近越靠下、缩放倍率越大、层级越高；top 间距已收紧 */
#bg-f5 { top: 28%; height: 250px; z-index: 2; }  /* 远景 */
#bg-f3 { top: 26%; height: 310px; z-index: 3; }  /* 中景 */
#bg-f2 { top: 20%; height: 390px; z-index: 4; }  /* 近景 */
/* 贴脸最近层：最靠下、缩放最大；z同F2但DOM在其后故叠于F2上，主UI(z5)仍在最上 */
#bg-near { top: 25%; height: 560px; z-index: 4; }

/* 轨道由片段横向撑开，左移一份序列无缝；滚动时长按层单独设（近快远慢） */
.building-rail {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  height: 100%;
  animation-name: buildingScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
#bg-building .building-rail { animation-duration: 80s; }  /* 最远景 */
#bg-f5 .building-rail { animation-duration: 60s; }
#bg-f3 .building-rail { animation-duration: 40s; }
#bg-f2 .building-rail { animation-duration: 22s; }       /* 近景最快 */
#bg-near .building-rail { animation-duration: 13s; }     /* 贴脸层最快 */

/* 单个建筑群片段：宽度由JS按层设置，背景图也由JS随机指定 */
.building-cell {
  flex: 0 0 auto;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* rail含两份相同随机序列，左移一半(=一份序列宽)后正好接上，无缝循环 */
@keyframes buildingScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ========================================
   主UI图片：居中，向上偏移80px，放大一倍
   ======================================== */
#main-ui {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 200px));
  /* 放大一倍：599x235 -> 1198x470 */
  width: 1198px;
  height: 470px;
  /* 像素化渲染，防止缩放模糊 */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  z-index: 5;
}

/* MainUI2：居中，位于MainUI1下方 */
#main-ui-2 {
  position: absolute;
  top: calc(50% + 80px);
  left: calc(50% - 280px);
  transform: translate(-50%, 0);
  width: 640px;
  height: 240px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  z-index: 5;
}

/* MainUI2动画层：位置尺寸与MainUI2相同，叠在其上方，上下浮动 */
#main-ui-2-gif {
  position: absolute;
  top: calc(50% + 80px);
  left: calc(50% - 280px);
  transform: translate(-50%, 0);
  width: 640px;
  height: 240px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  z-index: 6;
  pointer-events: none;
  animation: floatY 3s ease-in-out infinite;
}
/* 上下浮动：保留水平居中translateX(-50%)，只动Y轴 */
@keyframes floatY {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -5px); }
}

/* MainUI3：GIF，位于MainUI2右侧 */
#main-ui-3 {
  position: absolute;
  top: calc(50% + 52px);
  left: calc(50% + 55px);  /* MainUI2右边缘(50%+159.5px) + 间距20px */
  width: 550px;
  height: 276px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  z-index: 5;
}
/* 悬停MainUI3时左右摆动（移出即回正）；幅度/速度在此调 */
#main-ui-3:hover {
  animation: ui3Sway 0.48s ease-in-out infinite alternate;
}
@keyframes ui3Sway {
  from { transform: rotate(-6deg); }
  to   { transform: rotate(6deg); }
}

/* 登录界面随机滚动文字 */
@font-face {
  font-family: 'Cubic';
  src: url('../assets/fonts/Cubic.ttf');
}
@font-face {
  font-family: 'Bitty';
  src: url('../assets/fonts/Bitty.ttf');
}
#login-broadcast {
  position: absolute;
  top: calc(50% + 168px);
  left: calc(50% - 450px);
  font-family: 'Cubic', monospace;
  font-size: 12px;
  color: #43aa13;
  transform: scale(2);
  transform-origin: top left;
  white-space: pre-line;
  line-height: 1.6;
  z-index: 6;
  text-shadow: 0 0 4px rgba(67,170,19,0.6);
}

/* 登录界面日志框。
   ★ 以下数值是**用坐标网格渲染 MainUI1.png + 截图像素分析量出来的**，不是估的：
       MainUI1.png 599x235 → 页面显示 1198x470（正好 2 倍）。
       #main-ui 在页面上的左边界实测是 113（不是 0），所以：
         NOTIFICATION 白框在视口里 = x 297..1138（宽 841），y 234..351
         内层可写区              = x 309..1035
       文字按左右各留 12px 内边距放进去：
         相对 #login-screen(左=24)：  left = 309 − 24 = 285
         宽 = 1138 − 12 − 309 = 817
   ⚠️ 原来宽度写死 1200px、left 用 50% 算，右边界跑到 1507（屏幕才 1440），
      文字直接从右边框压出去 —— 这就是"字符超过对话框"的原因。
   ⚠️ 换 MainUI1.png 后这些数要重新量（tools/verify-log.js 会报实际内缩/余量）。
   ★ 可鼠标滚动：overflow-y:auto + 封顶 216px（9 行）。16px 字体 × 1.5 行高 = 24px/行。 */
#login-log {
  position: absolute;
  top: 260px;
  left: 285px;
  box-sizing: border-box;
  width: 817px;
  font-family: 'Cubic', monospace;
  font-size: 16px;
  color: #b9c9ce;
  transform-origin: top left;
  white-space: pre-line;
  line-height: 1.5;
  max-height: 216px;
  overflow-y: auto;              /* 可滚动回看历史 */
  overflow-x: hidden;
  scroll-behavior: smooth;       /* 追加新行时平滑滚到底部 */
  z-index: 6;
  text-shadow: 0 0 4px rgba(185,201,206,0.6);
}
/* 滚动条做细一点，别抢视觉（WebKit/Blink） */
#login-log::-webkit-scrollbar { width: 6px; }
#login-log::-webkit-scrollbar-track { background: rgba(185,201,206,.08); }
#login-log::-webkit-scrollbar-thumb {
  background: rgba(185,201,206,.35);
  border-radius: 3px;
}
#login-log::-webkit-scrollbar-thumb:hover { background: rgba(185,201,206,.55); }

/* 账户/密码输入框：水平居中，Cubic 12号放大两倍；聚焦时原生光标|用 caret-color 点亮 */
.login-input {
  position: absolute;
  left: calc(50% - 30px);
  width: 240px;
  font-family: 'Cubic', monospace;
  font-size: 12px;
  color: #060608;
  text-align: center;
  transform: translateX(-50%) scale(2);
  transform-origin: top center;
  background: transparent;
  border: 0px solid rgba(185,201,206,.4);
  padding: 4px 6px;
  outline: none;
  caret-color: #060608;   /* 点中后闪烁的 | 颜色 */
  z-index: 6;
}
.login-input:focus { border-color: rgba(185,201,206,.4); }
#login-account  { top: calc(50% - 273px); }  /* Y=383 */
#login-password { top: calc(50% - 233px); }  /* Y=424 */
/* 登录按钮：原图421x14放大2倍=842x28，居中、位于输入框下方（位置在此调） */
#login-enter {
  position: absolute;
  left: calc(50% + 6px);
  top: calc(50% - 185px);
  width: 842px;
  height: 28px;
  transform: translateX(-50%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 6;
}

/* 调试坐标：跟随鼠标显示屏幕位置 */
#debug-coord {
  position: fixed;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.85);
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid #00ff00;
  border-radius: 2px;
  z-index: 99999;
  display: none;
  white-space: nowrap;
  line-height: 1.4;
}
#debug-coord.active {
  display: block;
}

/* ========================================
   自定义鼠标光标：mouse_half.png(13x18，原图缩小一倍)，热点=左上角箭头尖端(0 0)
   恢复系统光标：删掉本节；调点击点：改 url 后两个数字(横 纵，单位px)
   ======================================== */
*, *::before, *::after {
  cursor: url('../assets/ui/mouse_half.png') 0 0, auto;
}