1

src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx

@@ -206,7 +206,7 @@ test('右上角设置按钮打开拼图设置并支持音量调节', () => {
   expect(authValue.setMusicVolume).toHaveBeenCalledWith(0.77);
 });
 
-test('拼图棋盘使用 9:16 竖屏舞台承载切块', () => {
+test('拼图棋盘使用贴近移动端边缘的正方形舞台承载切块', () => {
   const { container } = renderPuzzleRuntime(
     <PuzzleRuntimeShell
       run={{
@@ -229,9 +229,10 @@ test('拼图棋盘使用 9:16 竖屏舞台承载切块', () => {
   );
 
   const board = screen.getByTestId('puzzle-board');
-  expect(board.className).toContain('aspect-[9/16]');
+  expect(board.className).toContain('aspect-square');
+  expect(board.className).toContain('max-w-[min(99vw,calc(100vh_-_16.5rem))]');
   expect(board.className).not.toContain('aspect-video');
-  expect(board.className).not.toContain('aspect-square');
+  expect(board.className).not.toContain('aspect-[9/16]');
   expect(board.getAttribute('style')).toContain('grid-template-rows');
   expect(container.querySelector('.min-h-\\[4\\.5rem\\]')).toBeNull();
 });

src/components/puzzle-runtime/PuzzleRuntimeShell.tsx

@@ -331,7 +331,8 @@ type PuzzleHintDemoState = {
 
 /**
  * 拼图运行时壳层。
- * 前端仅维护轻量选中态与拖拽目标，交换、合并、拆分与通关全部以后端快照为准。
+ * 前端维护运行时即时交互：交换、拖动、合并、拆分与本关通关在前端裁决。
+ * 后端继续负责开始关卡、下一关候选、道具扣费、排行榜等服务侧能力。
  */
 export function PuzzleRuntimeShell({
   run,
@@ -1110,11 +1111,11 @@ export function PuzzleRuntimeShell({
           </div>
         </div>
 
-        <div className="absolute inset-0 flex items-center justify-center p-3 pt-28 pb-32 sm:p-4">
+        <div className="absolute inset-0 flex items-center justify-center px-1 py-3 pt-28 pb-32 sm:p-4">
           <div
             ref={boardRef}
             data-testid="puzzle-board"
-            className="relative grid aspect-[9/16] w-full max-w-[min(96vw,calc(56.25vh_-_8.5rem))] touch-none select-none overflow-hidden rounded-[1.2rem] border border-white/16 bg-white/8 shadow-[0_30px_80px_rgba(0,0,0,0.35)] backdrop-blur-sm sm:rounded-[1.45rem]"
+            className="relative grid aspect-square w-full max-w-[min(99vw,calc(100vh_-_16.5rem))] touch-none select-none overflow-hidden rounded-[1.2rem] border border-white/16 bg-white/8 shadow-[0_30px_80px_rgba(0,0,0,0.35)] backdrop-blur-sm sm:max-w-[min(92vw,calc(100vh_-_17rem))] sm:rounded-[1.45rem]"
             style={{
               gridTemplateColumns: `repeat(${board.cols}, minmax(0, 1fr))`,
               gridTemplateRows: `repeat(${board.rows}, minmax(0, 1fr))`,