docs: 名单添加虞韫嘉

- 姓名按 4 列 × 9 行排列，仍保留右下角空位
- 大区块背景 alpha 0.5，不再为每个姓名单独绘制底板

assets/css/page3.css

@@ -4,10 +4,10 @@
 .sparrow { color: #ff7a3f; }
 .grass { color: #4fc353; }
 .hydrant { color: #a93b43; }
-/* 火山岩 / 熔岩参考色，按明度 50% 处理 */
-.rock { color: color-mix(in srgb, #d07a38 50%, #000); }
-.lava-a { color: color-mix(in srgb, #ff8f3f 50%, #000); }
-.lava-b { color: color-mix(in srgb, #ff5a2a 50%, #000); }
+/* 火山岩 / 熔岩参考色，按暗度 70% 压暗（保留 30% 明度） */
+.rock { color: color-mix(in srgb, #d07a38 30%, #000); }
+.lava-a { color: color-mix(in srgb, #ff8f3f 30%, #000); }
+.lava-b { color: color-mix(in srgb, #ff5a2a 30%, #000); }
 
 /* 前景标题：不参与网格，字号与位置自由；
    top 的 em 相对自身 1.6em 字号，3.125em = 距顶部 5 个背景格 */
@@ -26,19 +26,20 @@
   z-index: 1;
 }
 
-/* 演职员表 nametag：5 × 2 格，格内居中 */
-.nametag {
+/* 演职员表大区块：4 × 9 姓名网格，背景 alpha 0.5 */
+.nametag-block {
   position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 5em;
-  height: 2em;
-  background: rgba(10, 8, 6, 0.54);
+  display: grid;
+  background: rgba(10, 8, 6, 0.5);
 }
 
 .nametag-name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: #e6dac6;
   font-size: 1em;
   font-weight: 400;

assets/js/page3.js

@@ -123,44 +123,55 @@
   credits.textContent = '演职员表';
   scene.append(credits);
 
-  /* 36 个 nametag：4 列 × 9 行，补满 */
+  /* 35 个姓名：4 列 × 9 行，放在一个半透明大区块上 */
   const NAMES = [
     '郑滕飞', '秦雪莹', '关宸宇', '王天晓', '谢雨舟', '储明威', '庞熙若',
     '刘婉莹', '陈彦淇', '古雅文', '周胤伯', '郑佳欣', '娄敬庭', '张加弛',
     '李昀芷', '吴红霓', '鲍馨仪', '刘润泽', '李若熙', '马希予', '袁立桓',
     '蒋子模', '李有睿', '王海心', '朱丽烨', '朱彦阳', '汪楚钧', '吴玥',
     '张梓轩', '罗午阳', '郭柯言', '王之饶', '应玥', '湛茜茜', '黄钰涵',
-    '虞韫嘉',
   ];
 
   const TAG = {
     cols: 4,
     rows: 9,
-    width: 5,
-    height: 2,
+    width: 3,
+    height: 1,
     gapX: 1,
     gapY: 1,
-    left: 2,
+    padding: 1,
     top: 12,
   };
 
+  const blockWidth =
+    TAG.padding * 2 + TAG.cols * TAG.width + (TAG.cols - 1) * TAG.gapX;
+  const blockHeight =
+    TAG.padding * 2 + TAG.rows * TAG.height + (TAG.rows - 1) * TAG.gapY;
+
+  const block = document.createElement('div');
+  block.className = 'nametag-block';
+  block.style.top = `${TAG.top}em`;
+  block.style.width = `${blockWidth}em`;
+  block.style.height = `${blockHeight}em`;
+  block.style.padding = `${TAG.padding}em`;
+  block.style.gridTemplateColumns = `repeat(${TAG.cols}, ${TAG.width}em)`;
+  block.style.gridAutoRows = `${TAG.height}em`;
+  block.style.columnGap = `${TAG.gapX}em`;
+  block.style.rowGap = `${TAG.gapY}em`;
+  scene.append(block);
+
   let nameIndex = 0;
   for (let row = 0; row < TAG.rows; row++) {
     for (let col = 0; col < TAG.cols; col++) {
+      if (row === TAG.rows - 1 && col === TAG.cols - 1) continue;
+
       const name = NAMES[nameIndex++];
       if (!name) break;
 
-      const tag = document.createElement('div');
-      tag.className = 'nametag';
-      tag.style.left = `${TAG.left + col * (TAG.width + TAG.gapX)}em`;
-      tag.style.top = `${TAG.top + row * (TAG.height + TAG.gapY)}em`;
-
-      const label = document.createElement('span');
+      const label = document.createElement('div');
       label.className = 'nametag-name';
       label.textContent = name;
-
-      tag.append(label);
-      scene.append(tag);
+      block.append(label);
     }
   }
 })();