/* 渡海号设计系统 · 双主题（宇宙场景强制深色豁免） */
:root {
  --duhai-blue: #2563EB; --duhai-blue-hi: #60A5FA;
  --native-teal: #0D9488; --native-teal-hi: #2DD4BF;
  --paddle-gray: #7C8AA5; --paddle-gray-hi: #A8B6CD;
  --mono: "SF Mono", "Cascadia Code", Consolas, "PingFang SC", monospace;
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-sail: cubic-bezier(.45,0,.15,1);
}
html[data-theme="day"] {
  --bg: linear-gradient(180deg, #EAF1F8, #DBE7F3);
  --ink: #0E1B2E; --ink-dim: rgba(14,27,46,.55);
  --glass: rgba(255,255,255,.58); --glass-edge: rgba(255,255,255,.75);
}
html[data-theme="deep"] {
  --bg: linear-gradient(180deg, #060C18, #0A1424);
  --ink: #E3EDFB; --ink-dim: rgba(227,237,251,.5);
  --glass: rgba(13,26,48,.55); --glass-edge: rgba(96,165,250,.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg); color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  transition: background .6s;
}

/* 三层画布栈 */
#gl-layer, #fx-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; }
#gl-layer { z-index: 1; }
#fx-layer { z-index: 2; pointer-events: none; }
#stage { position: fixed; inset: 0; z-index: 3; }

/* 场景容器 */
.scene { position: absolute; inset: 0; display: none; }
.scene.active { display: block; }

/* 液态玻璃面板 */
.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(6,12,24,.18), inset 0 1px 0 rgba(255,255,255,.12);
}
.glass .panel-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--ink-dim); text-transform: uppercase;
  padding-bottom: 8px; border-bottom: 1px solid var(--glass-edge);
}

/* 等宽数字（tabular-nums 防跳动） */
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num-xl { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.02em; }

/* 三光轨色 */
.c-duhai { color: var(--duhai-blue-hi); }
.c-native { color: var(--native-teal-hi); }
.c-paddle { color: var(--paddle-gray-hi); }

/* 巨字章节背景 */
#giant-char {
  position: fixed; z-index: 0; right: -4vw; bottom: -12vh;
  font-size: 72vh; font-weight: 900; line-height: 1;
  color: var(--ink); opacity: .035; pointer-events: none;
  font-family: "Songti SC", "SimSun", serif;
  transition: opacity 1s;
}

/* 底部常驻状态条 */
#status-bar {
  position: fixed; z-index: 50; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center;
}
.pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  padding: 5px 12px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(12px); color: var(--ink-dim);
}
.pill-online { color: var(--native-teal-hi); }
.pill-online::before { content: "●"; margin-right: 6px; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }
.pill-right { margin-left: 8px; }
.pill-btn { cursor: pointer; color: var(--ink); }
.pill-btn:hover { border-color: var(--duhai-blue-hi); }

/* 白爆转场层 */
#transition-flash {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), #fff 0%, rgba(255,255,255,.96) 42%, rgba(255,255,255,0) 78%);
}

/* 胶片齿孔带（转场扫过用） */
#transition-sprocket {
  position: fixed; left: 0; right: 0; top: -20%; height: 84px; z-index: 91;
  pointer-events: none; opacity: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(227,237,251,.85) 18px 34px, transparent 34px 52px) top/100% 22px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(227,237,251,.85) 18px 34px, transparent 34px 52px) bottom/100% 22px no-repeat,
    rgba(6,12,24,.92);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; letter-spacing: .3em; color: var(--ink-dim);
}

/* 点火/主按钮 */
.btn-ignite {
  font-family: var(--mono); letter-spacing: .22em; font-size: 14px;
  padding: 14px 42px; border-radius: 999px; cursor: pointer;
  color: var(--ink); background: var(--glass);
  border: 1px solid var(--duhai-blue-hi);
  backdrop-filter: blur(12px);
  animation: ignite-pulse 2.2s infinite;
  transition: transform .3s var(--ease-out);
}
.btn-ignite:hover { transform: scale(1.05); }
@keyframes ignite-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(96,165,250,.45); }
  50% { box-shadow: 0 0 24px 6px rgba(96,165,250,.28); }
}

/* 门槛灯 */
.gate-lamp { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; }
.gate-lamp .lamp { width: 12px; height: 12px; border-radius: 50%; background: var(--paddle-gray); transition: all .5s; }
.gate-lamp.on .lamp { background: var(--native-teal-hi); box-shadow: 0 0 12px var(--native-teal-hi); }
.gate-lamp.pending .lamp { background: transparent; border: 1.5px dashed #9B7EDE; animation: beacon 1.6s infinite; }
.gate-lamp.failed .lamp { background: #B4544A; box-shadow: 0 0 10px rgba(180,84,74,.6); }
@keyframes beacon { 0%,100%{opacity:.35} 50%{opacity:1} }

/* 降级与无障碍 */
@media (prefers-reduced-motion: reduce) {
  .btn-ignite, .pill-online::before, .gate-lamp.pending .lamp { animation: none !important; }
}
@media (max-width: 768px) {
  #giant-char { font-size: 44vh; }
  #status-bar { gap: 4px; bottom: 8px; }
  .pill { font-size: 9px; padding: 4px 8px; }
}