/* ════════════════════════════════════════
   demo.css — 在线试用页样式
   ════════════════════════════════════════ */

:root {
  --deep: #020818;
  --cyan: #00d4ff;
  --gold: #f5a623;
  --gb:   rgba(0,212,255,0.2);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; background:var(--deep); }

body { display:flex; flex-direction:column; }

/* ── 星空 ── */
#stars {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse at 25% 40%, #060e2e 0%, #010814 65%);
}
.s {
  position:absolute; background:#fff; border-radius:50%;
  animation: tw var(--d) ease-in-out infinite alternate;
  animation-delay: var(--dl); opacity:0;
}
@keyframes tw { from{opacity:0} to{opacity:var(--op)} }

/* ── 顶部栏 ── */
.topbar {
  position:relative; z-index:20;
  height:52px; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  background:rgba(2,8,24,0.97);
  border-bottom:1px solid var(--gb);
}
.tl { display:flex; align-items:center; gap:18px; }
.back {
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:rgba(0,212,255,.6); text-decoration:none;
  border:1px solid var(--gb); padding:5px 16px; border-radius:2px;
  background:rgba(0,180,255,0.06); transition:color .2s, border-color .2s;
  letter-spacing:1px;
}
.back:hover { color:var(--cyan); border-color:var(--cyan); }
.tb-title {
  font-family:'Orbitron',sans-serif; font-size:12px;
  color:var(--cyan); letter-spacing:4px; font-weight:700;
}
.tr { display:flex; align-items:center; gap:16px; }
.live-pill {
  display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:rgba(232,244,255,.38); letter-spacing:1px;
}
.live-dot {
  width:7px; height:7px; border-radius:50%;
  background:#00ff88; box-shadow:0 0 8px #00ff88;
  animation:pulse 2s ease infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.dl-btn {
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:#000; background:var(--cyan);
  border:none; padding:7px 20px; border-radius:2px;
  cursor:pointer; font-weight:700; letter-spacing:1px;
  text-decoration:none; transition:opacity .2s;
}
.dl-btn:hover { opacity:.82; }

/* ── 页面主体 ── */
.page {
  flex:1; display:flex; flex-direction:column;
  padding:20px 32px 20px;
  gap:16px; overflow:hidden;
  position:relative; z-index:1;
}

/* ── Unity 外框 ── */
.u-outer {
  flex:1; position:relative; min-height:0;
  display:flex; align-items:stretch;
}
.u-aura {
  position:absolute; inset:-2px; border-radius:6px; pointer-events:none;
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.25),
    0 0 40px rgba(0,212,255,0.08),
    0 0 100px rgba(0,30,80,0.4),
    inset 0 0 60px rgba(0,10,40,0.6);
}

/* 四角括号 */
.corner {
  position:absolute; z-index:10; pointer-events:none;
  width:28px; height:28px;
}
.corner.tl { top:0; left:0; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); }
.corner.tr { top:0; right:0; border-top:2px solid var(--cyan); border-right:2px solid var(--cyan); }
.corner.bl { bottom:38px; left:0; border-bottom:2px solid var(--cyan); border-left:2px solid var(--cyan); }
.corner.br { bottom:38px; right:0; border-bottom:2px solid var(--cyan); border-right:2px solid var(--cyan); }

/* 扫描线 */
.scanline {
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(to right, transparent 5%, rgba(0,212,255,.25) 40%, rgba(0,212,255,.25) 60%, transparent 95%);
  z-index:9; pointer-events:none;
  animation:scan 7s linear infinite;
}
@keyframes scan { 0%{top:0%} 100%{top:calc(100% - 38px)} }

/* 刻度标尺 */
.ruler-l, .ruler-r {
  position:absolute; top:0; bottom:38px; width:3px;
  z-index:9; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-evenly; align-items:center;
}
.ruler-l { left:0; }
.ruler-r { right:0; }
.tick { width:3px; height:1px; background:rgba(0,212,255,.3); }
.tick.long { width:6px; background:rgba(0,212,255,.5); }

/* Unity 容器 */
#uc {
  position:relative; flex:1;
  border-radius:4px; overflow:hidden;
  background:#1a1a1a; z-index:1;
}

/* Unity canvas */
#unity-canvas {
  width:100% !important;
  height:calc(100% - 38px) !important;
  display:block;
}

/* ── 加载画面（Unity 默认风格）── */
#ul {
  position:absolute; inset:0; z-index:30;
  background:#1c1c1c;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px;
}
.ul-logo { width:68px; height:68px; }
.ul-bar-bg { width:200px; height:8px; background:#333; overflow:hidden; }
.ul-bar { height:100%; width:0%; background:#fff; transition:width .08s linear; }
.ul-pct { font-family:'JetBrains Mono',monospace; font-size:11px; color:#666; letter-spacing:2px; }

/* ── Unity 底部工具栏（还原截图样式）── */
.u-bar-row {
  position:absolute; bottom:0; left:0; right:0; height:38px;
  background:#1a1a1a; border-top:1px solid #333;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; z-index:6;
}
.u-logos { display:flex; align-items:center; gap:11px; }
.u-unity {
  display:flex; align-items:center; gap:5px;
  font-family:Arial,sans-serif; font-size:13px; font-weight:700;
  color:#bbb; letter-spacing:.3px;
}
.u-unity svg { width:20px; height:20px; }
.u-wgl {
  font-family:Arial,sans-serif; font-size:12px; font-weight:700;
  color:#bbb; border:2px solid #888; border-radius:3px; padding:0 5px; letter-spacing:.4px;
}
.u-rhs { display:flex; align-items:center; gap:10px; }
.u-name { font-family:'JetBrains Mono',monospace; font-size:12px; color:#888; letter-spacing:1px; }
.u-fs {
  width:26px; height:26px; background:#009ac7;
  border:none; border-radius:3px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.u-fs:hover { background:#00bfff; }
.u-fs svg { width:14px; height:14px; fill:#fff; }

/* ── 底部信息条 ── */
.botstrip {
  flex-shrink:0; height:28px;
  display:flex; align-items:center; gap:0;
  font-family:'JetBrains Mono',monospace;
}
.bs {
  font-size:9px; color:rgba(232,244,255,.2); letter-spacing:2px;
  padding:0 16px; border-right:1px solid rgba(0,212,255,.08);
  display:flex; gap:6px; align-items:center;
}
.bs:last-child { border-right:none; margin-left:auto; }
.bs b { color:rgba(232,244,255,.4); font-weight:400; }