:root {
    /* 更强明暗对比：暗部压暗、霓虹高光提亮 */
    --neon-cyan:   #46ffe2;
    --neon-magenta:#ff62dd;
    --neon-violet: #8f6dff;
    --bg-0: #020309;
    --bg-1: #060a20;
  }
  /* 注册可动画的自定义属性 --k（侧面比例）参与过渡：
     tile 高度由 transform 的 z 值直接表达，--h 为死代码（side 的 transform 由 JS 直接写值），已移除 */
  @property --k {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }

  html, body { height: 100%; overflow: hidden; }

  body {
    background:
      radial-gradient(1200px 700px at 50% -10%, rgba(80, 140, 255, .22), transparent 60%),
      radial-gradient(900px 600px at 85% 110%, rgba(255, 79, 216, .14), transparent 60%),
      radial-gradient(700px 500px at 8% 100%, rgba(61, 255, 217, .14), transparent 60%),
      linear-gradient(180deg, var(--bg-0), var(--bg-1) 70%);
    font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
    user-select: none;
    -webkit-user-select: none;
  }

  #viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    perspective: 1050px;
    perspective-origin: 50% 50%;
    cursor: grab;
    touch-action: none;
  }
  #viewport.dragging { cursor: grabbing; }

  /* 3D 场景：等距视角 —— 先绕 Z 转 45°，再绕 X 俯视，
     x 轴向右下、y 轴向左下的俯瞰 45° 视角 */
  #scene {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    transform: translate3d(50vw, 44vh, 0) rotateX(60deg) rotateZ(45deg);
    pointer-events: none;
  }

  /* ---------- 格子（长方体） ---------- */
  .tile {
    position: absolute;
    left: 0; top: 0;
    width: 56px; height: 56px;
    transform-style: preserve-3d;
    /* opacity 过渡移到 .top/.icon：侧面透明度由 mask 控制，不随格子整体淡入淡出 */
    transition: transform .18s ease-out, --k .18s ease-out;
  }
  .tile .top {
    position: absolute;
    inset: 0;
    /* 顶面是受光面（亮部）：提亮以强化与暗面（侧面/背景）的立体明暗对比 */
    background: #2b4878;
    border: 1px solid rgba(130, 220, 255, .55);
    box-shadow: inset 0 0 10px rgba(61, 255, 217, .28);
    transition: opacity .25s ease-out;
  }
  /* 侧面：固定参考高度 100px，用 scaleY 模拟实际高度（GPU 友好、可过渡） */
  .side {
    position: absolute;
    left: 0; top: 0;
    width: 56px; height: 100px;
    transform-origin: 0 0;
    background: #222255;
    border-left: 1px solid rgba(130, 220, 255, .35);
    /* 侧面 transform 由 JS 显式设置（setSideTransform），自身过渡与 tile 同步升起；
       不依赖 scaleY(var(--k)) 间接驱动（Chrome 渲染层对 var() 引用的 transform 不做合成器过渡） */
    transition: transform .18s ease-out;
  }
  .side-s { /* 南侧面：地面线 y=56，向 y+ 立起（translateZ(-h) 抵消 tile 抬升，从地面立到顶面） */
    width: 56px; height: 100px;
    /* 底部（贴地端 y=0，rotateX 后即世界向上方向）透明→不透明渐变，用 mask 实现：
       背景保持纯色，mask 控制 alpha；元素被 scaleY(k) 缩放，mask 渐变位置取 20px/k，
       缩放后视觉渐变范围恒为 20px；k 过小时用 min() 收敛到 100px，侧面始终可见 */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 min(calc(20px / var(--k, 1)), 100px));
    mask-image: linear-gradient(to bottom, transparent 0, #000 min(calc(20px / var(--k, 1)), 100px));
    transform: translateZ(0px) translateY(56px) rotateX(90deg) scaleY(var(--k, 0));
  }
  .side-e { /* 东侧面：地面线 x=56，向 x+ 立起（对称构造，修正旧公式的 y 偏移） */
    width: 100px; height: 56px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 min(calc(20px / var(--k, 1)), 100px));
    mask-image: linear-gradient(to right, transparent 0, #000 min(calc(20px / var(--k, 1)), 100px));
    transform: translateZ(0px) translateX(56px) rotateY(-90deg) scaleX(var(--k, 0));
  }

  /* ---------- 霓虹入口 ---------- */
  .tile.entry .top {
    border-color: rgba(61, 255, 217, .95);
    box-shadow:
      inset 0 0 12px rgba(61, 255, 217, .55),
      inset 0 0 30px rgba(122, 92, 255, .45);
  }
  .icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 抵消场景旋转，让图案在屏幕上正立（站立于格面之上） */
    transform: translateX(35%) translateZ(30px) rotateX(-90deg) rotateY(45deg);
    transform-origin: 50% 88%;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity .25s ease-out;
  }
  .icon svg {
    width: 72%;
    height: 72%;
    overflow: visible;
    filter: drop-shadow(0 0 6px rgba(61,255,217,1)) drop-shadow(0 0 18px rgba(61,255,217,.65));
    animation: neon-pulse 300ms ease-in-out infinite;   /* 降频：66ms 持续占用合成器，改 300ms */
  }
  .icon.magenta svg {
    filter: drop-shadow(0 0 6px rgba(255,79,216,1)) drop-shadow(0 0 18px rgba(255,79,216,.65));
  }
  .icon:hover svg { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 28px rgba(61,255,217,1)); }
  @keyframes neon-pulse {
    0%, 100% { opacity: .92; }
    50%      { opacity: .85; }
  }
  .icon-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center bottom;
    transition: all 300ms;
    padding: 2px 8px;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--neon-cyan);
    background: rgba(3, 5, 14, .85);
    border: 1px solid rgba(61,255,217,.65);
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 0 14px rgba(61,255,217,.4);
  }
  .icon:hover {
    .icon-label {
      font-size: 22px;
    }
  }
  /* ---------- HUD ---------- */
  #hud {
    position: fixed;
    left: 50%; bottom: 22px;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 14px;
    padding: 8px 18px;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(215, 235, 255, .9);
    background: rgba(4, 7, 18, .82);
    border: 1px solid rgba(130, 220, 255, .45);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    pointer-events: none;
    white-space: nowrap;
  }
  #hud b { color: var(--neon-cyan); font-weight: 600; }
  #title {
    position: fixed;
    left: 24px; top: 20px;
    font-size: 15px;
    letter-spacing: 6px;
    color: rgba(185, 222, 255, .95);
    text-shadow: 0 0 16px rgba(61,255,217,.9);
    pointer-events: none;
  }
  #toast {
    position: fixed;
    left: 50%; top: 26px;
    transform: translateX(-50%) translateY(-6px);
    padding: 8px 20px;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--neon-cyan);
    background: rgba(3,6,16,.92);
    border: 1px solid rgba(61,255,217,.75);
    border-radius: 8px;
    box-shadow: 0 0 26px rgba(61,255,217,.55);
    opacity: 0;
    transition: opacity .25s, transform .25s;
    pointer-events: none;
    z-index: 5;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ---------- 视图复位按钮（镜头偏移后显示） ---------- */
  #reset-view {
    position: fixed;
    right: 24px; bottom: 22px;
    padding: 8px 16px;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--neon-cyan);
    background: rgba(4, 7, 18, .82);
    border: 1px solid rgba(61, 255, 217, .55);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(61, 255, 217, .3);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 6;
    user-select: none;
    -webkit-user-select: none;
  }
  #reset-view.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  #reset-view:hover {
    border-color: rgba(61, 255, 217, .85);
    box-shadow: 0 0 20px rgba(61, 255, 217, .5);
    background: rgba(8, 20, 40, .9);
  }

  /* ---------- 荧光网格地基（z=0 平面） ---------- */
  /* 性能优化：原实现每次 mousemove 重写 11200px 巨层的 mask-image（非合成属性），
     每帧强制大区域重绘，是鼠标移动掉帧的主因。
     改为：mask 静态固定于元素自身中心（JS 一次性构建），鼠标移动只改 transform（合成属性，零重绘），
     元素平移使圆形 mask 中心对准鼠标；可见性由 opacity（合成属性）控制，淡入淡出走合成器。 */
  #ground {
    position: absolute;
    left: 0; top: 0;
    background:
      linear-gradient(rgba(61, 255, 217, .88) 1px, rgba(61, 255, 217, .2) 2px, transparent 16px, transparent calc(100% - 8px), rgba(61, 255, 217, .2) calc(100% - 2px), rgba(61, 255, 217, .88) calc(100% - 1px)),
      linear-gradient(90deg, rgba(61, 255, 217, .88) 1px, rgba(61, 255, 217, .2) 2px, transparent 16px, transparent calc(100% - 8px), rgba(61, 255, 217, .2) calc(100% - 2px), rgba(61, 255, 217, .88) calc(100% - 1px)),
      radial-gradient(900px 900px at 50% 50%, rgba(20, 60, 140, .5), rgba(4, 7, 18, .78) 72%);
    background-size: 56px 56px, 56px 56px, 100% 100%;
    background-position: -28px -28px;
    box-shadow:
      0 0 70px rgba(61, 255, 217, .38),
      inset 0 0 70px rgba(61, 255, 217, .2);
    /* 初始完全隐藏（opacity 0），鼠标移入后由 updateGroundSpot 显示 */
    opacity: 0;
    transition: opacity .2s ease-out;
  }
  /* 实体区域地基网格线遮盖片：底色与 #ground 层3 径向渐变一致（背景由 JS 内联设置并逐像素对齐），
     盖住相邻实体格子共享边界上的网格线，使实体连通区域"无内线"（非实体区域网格线不变） */
  .ground-cover {
    position: absolute;
    left: 0; top: 0;
    pointer-events: none;
  }