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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0d12;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game {
  /* 逻辑分辨率固定 1280x720。
     CSS 尺寸由 JS 按 16:9 算出（元素框 == 内容框，鼠标映射才不会有黑边偏移），
     这里只保留兜底值。 */
  width: 1280px;
  height: 720px;
  /* 触屏上别让浏览器把「按住在画面上划」当成滚动手势，也别给点按加灰块 */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  max-width: 100%;
  max-height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  cursor: crosshair;
  background: #0b0d12;
}

#loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0d12;
  z-index: 10;
}

.ld-box { text-align: center; }

.ld-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #ffe14d;
  text-shadow: 3px 3px 0 #3a2400;
  margin-bottom: 14px;
}

.ld-sub {
  font-size: 13px;
  color: #8fa0b4;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

/* 加载页里的游戏简介：既是给玩家看的，也是页面唯一能被搜索引擎抓到的正文 */
.ld-desc {
  max-width: 460px;
  margin: 22px auto 0;
  font-size: 12px;
  line-height: 1.9;
  color: #6f7f92;
  letter-spacing: 0.5px;
}

/* 关闭 JS 时显示：给搜索引擎和访客一份可读的说明 */
.nojs {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 48px 24px;
  background: #0b0d12;
  color: #c8d2de;
  font-size: 15px;
  line-height: 2;
  z-index: 20;
}
.nojs h1, .nojs h2 { color: #ffe14d; letter-spacing: 2px; }
.nojs h1 { font-size: 26px; margin-bottom: 18px; }
.nojs h2 { font-size: 18px; margin: 26px 0 10px; }
.nojs p { max-width: 720px; margin: 0 auto 14px; }
.nojs ul { max-width: 720px; margin: 0 auto 14px; padding-left: 22px; }
.nojs li { margin-bottom: 6px; }
.nojs strong { color: #ffd98a; }
.nojs > * { text-align: left; }
.nojs > h1, .nojs > h2 { text-align: center; }

.ld-bar {
  width: 260px;
  height: 10px;
  margin: 0 auto;
  background: #1a1f28;
  border: 2px solid #2c3542;
  overflow: hidden;
}

.ld-bar i {
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, #6be06b, #ffe14d);
  animation: slide 1.05s ease-in-out infinite;
}

@keyframes slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* 诊断输出（正常时不显示） */
#diag {
  display: none;
  position: absolute;
  left: 8px; top: 8px; right: 8px;
  max-height: 60%;
  overflow: auto;
  z-index: 99;
  background: rgba(120, 20, 20, 0.92);
  color: #ffe;
  font: 12px/1.5 ui-monospace, Menlo, monospace;
  padding: 10px;
  white-space: pre-wrap;
  border: 2px solid #f66;
}


/* ==========================================================================
   竖屏提示
   --------------------------------------------------------------------------
   这是 1280x720 的固定 16:9 画面。手机竖屏时只能按宽度缩放 ——
   在 390x844 的机器上就是中间一条 390x219 的画面，上下全是空的，
   第一次打开的人会以为「怎么这么小」。
   横过来之后同样的机器能拿到约 844x390 的画面，大四倍。

   用媒体查询判断，不用 JS 探测 UA：
   orientation:portrait 且 pointer:coarse（触屏）时才出现，桌面端永远看不到。
   ========================================================================== */
.rotate {
  display: none;
}

@media (orientation: portrait) and (pointer: coarse) {
  .rotate {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px;
    text-align: center;
    background: rgba(8, 10, 14, 0.94);
    color: #c8d2de;
    font-size: 15px;
    line-height: 1.9;
  }
  .rotate.hide { display: none; }
}

.rotate .rt-icon {
  font-size: 46px;
  line-height: 1;
  color: #ffe14d;
  animation: rt-turn 2.4s ease-in-out infinite;
}

@keyframes rt-turn {
  0%, 45%   { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}

.rotate .rt-title { font-size: 19px; font-weight: 800; color: #ffe14d; letter-spacing: 1px; }
.rotate .rt-sub { font-size: 13px; color: #8fa0b4; max-width: 300px; }

.rotate .rt-go {
  padding: 9px 22px;
  border: 2px solid #3a4759;
  border-radius: 8px;
  background: #1a1f28;
  color: #cfd8e2;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.rotate .rt-go:active { background: #2f3a4c; }


/* ==========================================================================
   维护页
   --------------------------------------------------------------------------
   盖住整屏的一个 DOM 层。用 DOM 而不是画在 canvas 上，是因为它必须挡住一切：
   画在 canvas 里的话，玩家还是能按快捷键、还是能在主菜单上乱点。
   ========================================================================== */
#maintenance {
  display: none;                 /* 由 Net.applyMaintenance() 切成 flex */
  position: fixed;
  inset: 0;
  z-index: 9000;                 /* 在加载页之上、自检面板之下 */
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: radial-gradient(900px 460px at 50% 0%, #1a2130, #0b0d12 70%);
  color: #c8d2de;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  text-align: center;
}

.mnt-box { max-width: 460px; }

.mnt-icon {
  font-size: 58px;
  line-height: 1;
  margin-bottom: 10px;
  animation: mnt-wrench 2.6s ease-in-out infinite;
}
@keyframes mnt-wrench {
  0%, 100% { transform: rotate(-18deg); }
  50%      { transform: rotate(18deg); }
}

#maintenance h1 {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #ffe14d;
  margin: 0 0 16px;
}

.mnt-text {
  font-size: 15px;
  line-height: 1.9;
  color: #c8d2de;
  margin: 0 0 14px;
}

.mnt-eta {
  font-size: 14px;
  color: #8fd8ff;
  margin: 0 0 18px;
  font-variant-numeric: tabular-nums;
}
.mnt-eta.done { color: #8fe08f; }

.mnt-bar {
  width: 210px;
  height: 8px;
  margin: 0 auto 22px;
  background: #1a1f28;
  border: 2px solid #2c3542;
  overflow: hidden;
}
.mnt-bar i {
  display: block;
  width: 36%;
  height: 100%;
  background: linear-gradient(90deg, #6be06b, #ffe14d);
  animation: slide 1.15s ease-in-out infinite;
}

.mnt-hint {
  font-size: 12px;
  line-height: 1.9;
  color: #6f7f92;
  margin: 0 0 18px;
}
.mnt-hint code {
  font-family: ui-monospace, Menlo, monospace;
  background: #141a22;
  border: 1px solid #263041;
  border-radius: 4px;
  padding: 1px 5px;
}

.mnt-reload {
  padding: 9px 22px;
  border: 2px solid #3a4759;
  border-radius: 8px;
  background: #1a1f28;
  color: #cfd8e2;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.mnt-reload:hover { background: #2f3a4c; border-color: #5b6d86; }