@charset "UTF-8";
/* ==========================================================================
   钢铁裂变 STEEL RIFT · base.css
   --------------------------------------------------------------------------
   职责：设计变量 / 重置 / 舞台与画布 / 显隐工具 / 斜切角面板 / 通用按钮
         / 通用进度条 / CRT 氛围层 / 横屏提示 / 动效降级
   约定：所有尺寸都写在 360x640 逻辑坐标里，由 JS 对 #layer 做整数倍缩放。
        全站直角，禁止任何大于 0 的 border-radius。
   目录：
     01 设计变量      02 重置与全局      03 舞台结构      04 显隐工具
     05 斜切角面板     06 通用按钮        07 通用进度条    08 氛围层
     09 横屏提示      10 关键帧与动效降级
   ========================================================================== */

/* ==========================================================================
   01 设计变量
   ========================================================================== */
:root {
  /* —— 配色：深空工业 + 霓虹像素 —— */
  --ink: #04060a;
  --deep: #080c14;
  --panel: #0e1523;
  --panel-2: #131c2e;
  --line: #243149;
  --line-hi: #3a4c6d;
  --cyan: #5ef2ff;
  --blue: #5ec8ff;
  --amber: #ffb020;
  --red: #ff3b5c;
  --green: #5dff9b;
  --violet: #b455ff;
  --text: #c9d8ee;
  --text-dim: #6f819c;

  /* —— 逻辑像素字号档位（360x640 坐标系）—— */
  --fs-2xs: 7px;
  --fs-xs: 8px;
  --fs-sm: 9px;
  --fs-md: 10px;
  --fs-lg: 12px;
  --fs-xl: 16px;
  --fs-2xl: 22px;

  /* —— 字体栈：全部系统字体，零外部资源 —— */
  --font-ui: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC",
    system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  /* —— 斜切角 / 描边 / 金属面 —— */
  --cut: 6px;
  --edge: 1px solid var(--line);
  --edge-hi: 1px solid var(--line-hi);
  --metal-1: linear-gradient(180deg, #182236 0%, var(--panel-2) 54%, var(--deep) 100%);
  --metal-2: linear-gradient(180deg, var(--panel-2) 0%, var(--deep) 100%);

  /* —— 内发光（硬朗的 inset，不用大面积模糊外发光）—— */
  --glow-in: inset 0 0 12px rgba(94, 242, 255, 0.1);
  --glow-out-cyan: rgba(94, 242, 255, 0.4);
  --glow-out-red: rgba(255, 59, 92, 0.42);
  --glow-out-amber: rgba(255, 176, 32, 0.42);
  --glow-out-violet: rgba(180, 85, 255, 0.42);

  /* —— 层级 —— */
  --z-canvas: 0;
  --z-hud: 10;
  --z-screen: 30;
  --z-fx: 60;
  --z-rotate: 80;

  color-scheme: dark;
}

/* ==========================================================================
   02 重置与全局
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0; /* 全站直角，硬性要求 */
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

h1,
h2,
h3,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

canvas {
  display: block;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: rgba(94, 242, 255, 0.3);
  color: #eafcff;
}

/* 键盘可达：统一青色焦点环（组件内只做位置微调） */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   03 舞台结构：#app / #stage / #layer / #game
   ========================================================================== */
/* 铺满视口，把 #stage 居中；背景是深空工业色 + 极淡网格与顶光 */
#app {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--ink);
  background-image:
    radial-gradient(120% 70% at 50% -12%, rgba(94, 242, 255, 0.09), rgba(0, 0, 0, 0) 62%),
    radial-gradient(90% 55% at 50% 112%, rgba(180, 85, 255, 0.07), rgba(0, 0, 0, 0) 66%),
    repeating-linear-gradient(0deg, rgba(36, 49, 73, 0.16) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(36, 49, 73, 0.16) 0 1px, transparent 1px 26px);
}

/* 舞台：JS 会写入内联 width/height（360*s / 640*s），这里只给 1x 兜底值。
   外框用 box-shadow 的硬边环实现，避免 border 改变内容盒尺寸而让缩放错位。 */
#stage {
  position: relative;
  width: 360px; /* JS 覆盖 */
  height: 640px; /* JS 覆盖 */
  overflow: hidden;
  background: var(--ink);
  box-shadow:
    0 0 0 1px #000,
    0 0 0 3px var(--line-hi),
    0 0 0 4px #05080d,
    0 18px 48px rgba(0, 0, 0, 0.82);
}

/* 机甲外框的玻璃内沿 + 四角卡爪（盖在 #layer 之上，不吃事件） */
#stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(94, 242, 255, 0.2),
    inset 0 0 18px rgba(94, 242, 255, 0.08),
    inset 0 0 56px rgba(0, 0, 0, 0.55);
  background-image:
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan));
  background-repeat: no-repeat;
  background-size:
    16px 2px, 2px 16px,
    16px 2px, 2px 16px,
    16px 2px, 2px 16px,
    16px 2px, 2px 16px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  opacity: 0.45;
}

/* 逻辑坐标层：固定 360x640，transform 由 JS 写入（transform-origin: top left） */
#layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;
  height: 640px;
  transform-origin: top left;
  will-change: transform;
  isolation: isolate; /* 让层内 z-index 自成体系，氛围层不会漏到页面外 */
}

/* 画布：最底层，像素放大时保持硬边 */
#game {
  position: absolute;
  inset: 0;
  z-index: var(--z-canvas);
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges; /* 老浏览器兜底 */
  image-rendering: pixelated; /* 必须放在最后，保证像素硬边 */
  touch-action: none; /* 拖拽移动机甲时不要触发页面滚动 */
}

/* ==========================================================================
   04 显隐工具
   ========================================================================== */
/* JS 就是靠切换这个类开关界面，必须 !important */
.hidden {
  display: none !important;
}

/* ==========================================================================
   05 斜切角面板（军用终端面板）
   --------------------------------------------------------------------------
   做法：::before 填充「外描边色」，::after 内缩 1px 填充「内面」，
   两层各自用 polygon 切掉对角，这样斜边也有 1px 亮线。
   宿主不裁剪，所以 outline / filter(drop-shadow) 都能贴合外轮廓正常工作。
   注意：宿主上的 inset box-shadow 会被内面层盖住，内发光请用 --glow-in。
   ========================================================================== */
.btn,
.icon-btn,
.hud-lv,
.hud-wave,
.hud-kills,
.hud-boss,
.toast,
.wslot,
.title-best,
.char-card,
.upgrade-card,
.pause-stats,
.over-stats {
  --cut: 6px;
  --frame: var(--line-hi);
  --face: var(--metal-1);
  position: relative; /* 需要绝对定位的组件在各自文件里覆盖 */
  isolation: isolate;
}

.btn::before,
.icon-btn::before,
.hud-lv::before,
.hud-wave::before,
.hud-kills::before,
.hud-boss::before,
.toast::before,
.wslot::before,
.title-best::before,
.char-card::before,
.upgrade-card::before,
.pause-stats::before,
.over-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--frame);
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

.btn::after,
.icon-btn::after,
.hud-lv::after,
.hud-wave::after,
.hud-kills::after,
.hud-boss::after,
.toast::after,
.wslot::after,
.title-best::after,
.char-card::after,
.upgrade-card::after,
.pause-stats::after,
.over-stats::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--face);
  box-shadow: var(--glow-in, inset 0 0 12px rgba(94, 242, 255, 0.1));
  clip-path: polygon(
    calc(var(--cut) - 1px) 0,
    100% 0,
    100% calc(100% - var(--cut) + 1px),
    calc(100% - var(--cut) + 1px) 100%,
    0 100%,
    0 calc(var(--cut) - 1px)
  );
  pointer-events: none;
}

/* ==========================================================================
   06 通用按钮
   ========================================================================== */
.btn {
  --cut: 6px;
  --frame: var(--line-hi);
  --frame-hi: var(--cyan);
  --face: var(--metal-1);
  --face-hi: linear-gradient(180deg, #1d2a42 0%, #141d30 54%, #0e1626 100%);
  --face-lo: linear-gradient(180deg, #0d1420 0%, #080d16 100%);
  --fg: var(--text);
  --fg-hi: #eafcff;
  --glow: var(--glow-out-cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 14px;
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--fg);
  text-align: center;
  white-space: nowrap;
  transition:
    color 0.14s ease,
    transform 0.08s ease,
    filter 0.16s ease;
}

.btn:hover {
  --frame: var(--frame-hi);
  --face: var(--face-hi);
  color: var(--fg-hi);
  transform: translateY(-1px);
  filter: drop-shadow(0 0 5px var(--glow));
}

.btn:active {
  --face: var(--face-lo);
  transform: translateY(1px);
  filter: none;
}

.btn:focus-visible {
  outline-offset: 2px;
}

.btn-primary {
  --frame: rgba(94, 242, 255, 0.62);
  --frame-hi: var(--cyan);
  --face: linear-gradient(180deg, #16404f 0%, #0d2a37 54%, #081c26 100%);
  --face-hi: linear-gradient(180deg, #1d5668 0%, #123a4b 54%, #0b2531 100%);
  --face-lo: linear-gradient(180deg, #0a222c 0%, #061520 100%);
  --fg: #ddfbff;
  --glow: rgba(94, 242, 255, 0.55);
  text-shadow: 0 0 8px rgba(94, 242, 255, 0.45);
}

.btn-ghost {
  --frame: var(--line-hi);
  --frame-hi: rgba(94, 242, 255, 0.7);
  --face: linear-gradient(180deg, #131c2e 0%, #0c121e 100%);
  --face-hi: linear-gradient(180deg, #1a2740 0%, #101828 100%);
  --face-lo: linear-gradient(180deg, #0b1119 0%, #070b12 100%);
  --fg: var(--text-dim);
  --glow: rgba(94, 242, 255, 0.3);
}

.btn-danger {
  --frame: rgba(255, 59, 92, 0.6);
  --frame-hi: var(--red);
  --face: linear-gradient(180deg, #40101c 0%, #260912 54%, #180509 100%);
  --face-hi: linear-gradient(180deg, #571526 0%, #350c18 54%, #1f060c 100%);
  --face-lo: linear-gradient(180deg, #1c060c 0%, #120407 100%);
  --fg: #ffd6de;
  --glow: var(--glow-out-red);
  text-shadow: 0 0 8px rgba(255, 59, 92, 0.4);
}

.btn-lg {
  min-height: 40px;
  padding: 0 22px;
  font-size: var(--fs-xl);
  letter-spacing: 0.2em;
}

.btn:disabled,
.btn[disabled],
.icon-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* 方形图标按钮：暂停等 */
.icon-btn {
  --cut: 5px;
  --frame: var(--line-hi);
  --frame-hi: var(--cyan);
  --face: linear-gradient(180deg, #162034 0%, #0b111c 100%);
  --face-hi: linear-gradient(180deg, #1e2c46 0%, #101a2b 100%);
  --face-lo: linear-gradient(180deg, #0a1018 0%, #060a11 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  transition:
    transform 0.08s ease,
    filter 0.16s ease,
    color 0.14s ease;
}

.icon-btn:hover {
  --frame: var(--frame-hi);
  --face: var(--face-hi);
  transform: translateY(-1px);
  filter: drop-shadow(0 0 5px rgba(94, 242, 255, 0.45));
}

.icon-btn:active {
  --face: var(--face-lo);
  transform: translateY(1px);
  filter: none;
}

.icon-btn:focus-visible {
  outline-offset: 2px;
}

/* ==========================================================================
   07 通用进度条（i = 填充层，span = 文字层）
   ========================================================================== */
.bar {
  position: relative;
  width: 100%;
  height: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #05080e 0%, #0a0f1a 100%);
  border: var(--edge);
  box-shadow:
    inset 0 0 0 1px rgba(4, 6, 10, 0.85),
    inset 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* 填充层：JS 可能写 width 也可能写 transform: scaleX()，两种都平滑过渡 */
.bar > i {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(1);
  transform-origin: left center;
  transition:
    width 0.22s cubic-bezier(0.2, 0.8, 0.3, 1),
    transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
  will-change: width, transform;
}

/* 刻度：每 10% 一道 1px 暗线，仪表盘感 */
.bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(4, 6, 10, 0.9) 0 1px,
    rgba(4, 6, 10, 0) 1px 10%
  );
}

/* 文字必须浮在填充层之上 */
.bar > span {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #eaf6ff;
  text-shadow:
    0 1px 0 #000,
    0 0 4px rgba(0, 0, 0, 0.95);
  pointer-events: none;
}

/* ==========================================================================
   08 氛围层：CRT 扫描线 + 暗角（最顶层，不吃事件）
   ========================================================================== */
.fx-scanlines {
  position: absolute;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  opacity: 0.12; /* 压得很淡，不抢画面 */
  background-image: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.85) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px
  );
}

/* 缓慢下滚的一道亮带，极淡 */
.fx-scanlines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  background: linear-gradient(
    180deg,
    rgba(94, 242, 255, 0) 0%,
    rgba(94, 242, 255, 0.09) 50%,
    rgba(94, 242, 255, 0) 100%
  );
  animation: scan-roll 7.5s linear infinite forwards;
}

.fx-vignette {
  position: absolute;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  background-image:
    radial-gradient(
      118% 86% at 50% 50%,
      rgba(0, 0, 0, 0) 42%,
      rgba(0, 0, 0, 0.34) 74%,
      rgba(0, 0, 0, 0.72) 100%
    ),
    linear-gradient(
      180deg,
      rgba(4, 6, 10, 0.34) 0%,
      rgba(0, 0, 0, 0) 16%,
      rgba(0, 0, 0, 0) 84%,
      rgba(4, 6, 10, 0.38) 100%
    );
}

/* ==========================================================================
   09 横屏提示
   --------------------------------------------------------------------------
   竖屏游戏，横屏时直接盖住舞台提示旋转。
   这里用 !important 压过 .hidden：横屏小高度下无论 JS 怎么切类都应可见。
   ========================================================================== */
.rotate-hint,
#rotate-hint {
  position: absolute;
  inset: 0;
  z-index: var(--z-rotate);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  background: radial-gradient(
    120% 90% at 50% 50%,
    rgba(4, 6, 10, 0.94) 0%,
    rgba(4, 6, 10, 0.99) 100%
  );
}

.rotate-hint > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border: var(--edge-hi);
  background: var(--metal-2);
  box-shadow:
    inset 0 0 14px rgba(94, 242, 255, 0.1),
    0 10px 26px rgba(0, 0, 0, 0.7);
  font-size: var(--fs-lg);
  letter-spacing: 0.2em;
  color: var(--text);
}

/* 用 CSS 画一台竖屏手机 + 旋转箭头，不使用任何字符图标 */
.rotate-hint > span::before {
  content: "";
  width: 26px;
  height: 40px;
  border: 2px solid var(--amber);
  box-shadow:
    inset 0 0 10px rgba(255, 176, 32, 0.22),
    0 0 8px rgba(255, 176, 32, 0.28);
  animation: tilt-cue 2.6s ease-in-out infinite;
}

.rotate-hint > span::after {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  transform: rotate(45deg);
  opacity: 0.85;
}

@media (orientation: landscape) and (max-height: 480px) {
  .rotate-hint,
  .rotate-hint.hidden,
  #rotate-hint,
  #rotate-hint.hidden {
    display: flex !important;
  }
}

/* ==========================================================================
   10 关键帧与动效降级
   ========================================================================== */
/* 界面入场：错峰上浮（配 animation-delay + backwards 使用） */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CRT 亮带下滚 */
@keyframes scan-roll {
  from {
    transform: translateY(-26px);
  }
  to {
    transform: translateY(640px);
  }
}

/* 横屏提示里的手机轻微摆动 */
@keyframes tilt-cue {
  0%,
  100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}