diff --git a/mobile_battle_1.html b/mobile_battle_1.html
deleted file mode 100644
index afa8189..0000000
--- a/mobile_battle_1.html
+++ /dev/null
@@ -1,1683 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <meta name="theme-color" content="#1a1a2e">
-    <title>深空战机 - 战斗界面</title>
-    
-    <!-- PWA Manifest -->
-    <link rel="manifest" href="data:application/json;base64,ewogICJuYW1lIjogIuaViuepuuaImOacuiAtIOaImOaWl+eVjOmdoiIsCiAgInNob3J0X25hbWUiOiAi5rex56m65oiY5py6IiwKICAic3RhcnRfdXJsIjogIi4vIiwKICAiZGlzcGxheSI6ICJzdGFuZGFsb25lIiwKICAiYmFja2dyb3VuZF9jb2xvciI6ICIjMWExYTJlIiwKICAidGhlbWVfY29sb3IiOiAiIzQwZTBkMCIsCiAgImljb25zIjogW10KfQ==">
-    
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            -webkit-user-select: none;
-            -webkit-touch-callout: none;
-            -webkit-tap-highlight-color: transparent;
-        }
-
-        html, body {
-            height: 100%;
-            overflow-x: hidden;
-            overflow-y: auto;
-            position: relative;
-            width: 100%;
-        }
-
-        body {
-            font-family: 'PingFang SC', 'Helvetica Neue', 'Arial', sans-serif;
-            background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
-            color: #ffffff;
-            position: relative;
-            touch-action: manipulation;
-        }
-
-        /* 动态星空背景 */
-        .star-field {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 0;
-            overflow: hidden;
-        }
-
-        .star {
-            position: absolute;
-            background: rgba(64, 224, 208, 0.8);
-            border-radius: 50%;
-            animation: twinkle 3s infinite;
-        }
-
-        @keyframes twinkle {
-            0%, 100% { opacity: 0.3; transform: scale(1); }
-            50% { opacity: 1; transform: scale(1.2); }
-        }
-
-        /* 安全区域适配 */
-        .safe-area {
-            padding-top: env(safe-area-inset-top);
-            padding-left: env(safe-area-inset-left);
-            padding-right: env(safe-area-inset-right);
-            padding-bottom: env(safe-area-inset-bottom);
-        }
-
-        /* 移动端状态栏 */
-        .mobile-status-bar {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: calc(60px + env(safe-area-inset-top));
-            background: linear-gradient(180deg, rgba(26, 26, 46, 0.95) 0%, rgba(26, 26, 46, 0.8) 100%);
-            backdrop-filter: blur(15px);
-            border-bottom: 1px solid rgba(64, 224, 208, 0.3);
-            z-index: 100;
-            display: flex;
-            align-items: flex-end;
-            padding: 0 15px 8px;
-        }
-
-        .status-content {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            width: 100%;
-            height: 44px;
-        }
-
-        .player-section {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            flex: 1;
-        }
-
-        .player-avatar {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, #40e0d0 0%, #26d0ce 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #1a1a2e;
-            font-weight: bold;
-            font-size: 12px;
-        }
-
-        .opponent-avatar {
-            background: linear-gradient(135deg, #ff4757 0%, #ff3838 100%);
-            color: white;
-        }
-
-        .player-name {
-            font-size: 13px;
-            color: #40e0d0;
-            font-weight: 600;
-        }
-
-        .opponent-name {
-            color: #ff4757;
-        }
-
-        .battle-timer {
-            text-align: center;
-            flex: 0 0 auto;
-        }
-
-        .timer-label {
-            font-size: 10px;
-            color: rgba(255, 255, 255, 0.6);
-            line-height: 1;
-        }
-
-        .timer-value {
-            font-size: 20px;
-            font-weight: bold;
-            color: #40e0d0;
-            line-height: 1.2;
-            text-shadow: 0 0 10px rgba(64, 224, 208, 0.5);
-        }
-
-        .timer-warning {
-            color: #ff4757;
-            animation: timerPulse 1s infinite;
-        }
-
-        @keyframes timerPulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.1); }
-        }
-
-        /* 回合指示器 */
-        .turn-indicator {
-            position: fixed;
-            top: calc(70px + env(safe-area-inset-top));
-            left: 50%;
-            transform: translateX(-50%);
-            padding: 8px 20px;
-            border-radius: 20px;
-            font-size: 14px;
-            font-weight: 600;
-            z-index: 99;
-            backdrop-filter: blur(10px);
-            transition: all 0.3s ease;
-        }
-
-        .turn-indicator.my-turn {
-            background: linear-gradient(135deg, #40e0d0 0%, #26d0ce 100%);
-            color: #1a1a2e;
-            box-shadow: 0 4px 20px rgba(64, 224, 208, 0.4);
-        }
-
-        .turn-indicator.opponent-turn {
-            background: linear-gradient(135deg, rgba(255, 71, 87, 0.9) 0%, rgba(255, 56, 56, 0.9) 100%);
-            color: white;
-            border: 1px solid rgba(255, 71, 87, 0.6);
-            box-shadow: 0 4px 20px rgba(255, 71, 87, 0.3);
-        }
-
-        /* 主游戏区域 */
-        .game-container {
-            position: relative;
-            top: calc(110px + env(safe-area-inset-top));
-            left: 0;
-            right: 0;
-            min-height: calc(100vh - 110px - env(safe-area-inset-top));
-            z-index: 10;
-            padding-bottom: 20px;
-        }
-
-        .game-content {
-            min-height: 100%;
-            padding: 10px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 15px;
-        }
-
-        /* 消息面板 */
-        .message-panel {
-            width: 100%;
-            max-width: 400px;
-            background: rgba(22, 33, 62, 0.8);
-            border: 1px solid rgba(64, 224, 208, 0.3);
-            border-radius: 15px;
-            padding: 12px 16px;
-            backdrop-filter: blur(10px);
-            text-align: center;
-        }
-
-        .message-text {
-            font-size: 14px;
-            color: rgba(255, 255, 255, 0.9);
-            font-weight: 500;
-        }
-
-        /* 棋盘容器 - 垂直堆叠 */
-        .boards-container {
-            width: 100%;
-            max-width: 400px;
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-
-        .board-section {
-            width: 100%;
-        }
-
-        .board-title {
-            text-align: center;
-            font-size: 15px;
-            margin-bottom: 10px;
-            padding: 8px 16px;
-            border-radius: 15px;
-            font-weight: 600;
-        }
-
-        .my-board-title {
-            background: rgba(64, 224, 208, 0.15);
-            color: #40e0d0;
-            border: 1px solid rgba(64, 224, 208, 0.4);
-        }
-
-        .enemy-board-title {
-            background: rgba(255, 71, 87, 0.15);
-            color: #ff4757;
-            border: 1px solid rgba(255, 71, 87, 0.4);
-        }
-
-        /* 游戏棋盘 */
-        .game-board {
-            width: 100%;
-            aspect-ratio: 1;
-            background: rgba(15, 52, 96, 0.6);
-            border: 2px solid rgba(64, 224, 208, 0.5);
-            border-radius: 12px;
-            padding: 6px;
-            backdrop-filter: blur(8px);
-            position: relative;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-        }
-
-        .enemy-board {
-            border-color: rgba(255, 71, 87, 0.5);
-        }
-
-        .grid-container {
-            width: 100%;
-            height: 100%;
-            display: grid;
-            grid-template-columns: repeat(10, 1fr);
-            grid-template-rows: repeat(10, 1fr);
-            gap: 1px;
-            background: rgba(64, 224, 208, 0.1);
-            border-radius: 6px;
-            overflow: hidden;
-        }
-
-        .grid-cell {
-            background: rgba(15, 52, 96, 0.8);
-            border: 1px solid rgba(64, 224, 208, 0.15);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 8px;
-            color: rgba(255, 255, 255, 0.4);
-            transition: all 0.2s ease;
-            position: relative;
-            min-height: 30px;
-            font-weight: 600;
-        }
-
-        /* 我的棋盘 - 显示飞机部件 */
-        .my-board .grid-cell.plane-head {
-            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
-            color: white;
-            font-weight: bold;
-            box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
-        }
-
-        .my-board .grid-cell.plane-wing {
-            background: linear-gradient(135deg, #40e0d0 0%, #26d0ce 100%);
-            color: #1a1a2e;
-            font-weight: bold;
-            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-
-        .my-board .grid-cell.plane-body {
-            background: linear-gradient(135deg, #6c5ce7 0%, #5f27cd 100%);
-            color: white;
-            font-weight: bold;
-            box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
-        }
-
-        .my-board .grid-cell.plane-tail {
-            background: linear-gradient(135deg, #00d2d3 0%, #54a0ff 100%);
-            color: white;
-            font-weight: bold;
-            box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
-        }
-
-        /* 被攻击状态 */
-        .my-board .grid-cell.hit {
-            background: linear-gradient(135deg, #ff4757 0%, #ff3838 100%);
-            color: white;
-            animation: hitFlash 0.6s ease-out;
-            box-shadow: 0 0 15px #ff4757;
-        }
-
-        .my-board .grid-cell.destroyed {
-            background: #2c3e50;
-            color: #7f8c8d;
-            opacity: 0.6;
-        }
-
-        /* 敌方棋盘交互 */
-        .enemy-board .grid-cell {
-            cursor: pointer;
-            touch-action: manipulation;
-            min-height: 32px;
-        }
-
-        .enemy-board .grid-cell:active:not(.attacked) {
-            background: rgba(64, 224, 208, 0.4);
-            transform: scale(0.95);
-            border-color: #40e0d0;
-        }
-
-        .enemy-board .grid-cell.hit {
-            background: linear-gradient(135deg, #ff4757 0%, #ff3838 100%);
-            color: white;
-            cursor: not-allowed;
-            box-shadow: 0 0 10px #ff4757;
-        }
-
-        .enemy-board .grid-cell.destroyed {
-            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
-            color: white;
-            font-weight: bold;
-            cursor: not-allowed;
-            box-shadow: 0 0 10px #ff6b6b;
-        }
-
-        .enemy-board .grid-cell.miss {
-            background: rgba(108, 117, 125, 0.6);
-            color: #6c757d;
-            cursor: not-allowed;
-        }
-
-        .enemy-board .grid-cell.attacked {
-            pointer-events: none;
-        }
-
-        /* 显示被摧毁的敌机 */
-        .enemy-board .grid-cell.revealed-head {
-            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
-            color: white;
-            font-weight: bold;
-        }
-
-        .enemy-board .grid-cell.revealed-wing {
-            background: linear-gradient(135deg, #40e0d0 0%, #26d0ce 100%);
-            color: #1a1a2e;
-            font-weight: bold;
-        }
-
-        .enemy-board .grid-cell.revealed-body {
-            background: linear-gradient(135deg, #6c5ce7 0%, #5f27cd 100%);
-            color: white;
-            font-weight: bold;
-        }
-
-        .enemy-board .grid-cell.revealed-tail {
-            background: linear-gradient(135deg, #00d2d3 0%, #54a0ff 100%);
-            color: white;
-            font-weight: bold;
-        }
-
-        /* 攻击动画效果 */
-        .attack-ripple {
-            position: absolute;
-            border-radius: 50%;
-            background: radial-gradient(circle, rgba(64, 224, 208, 0.8) 0%, transparent 70%);
-            animation: ripple 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            pointer-events: none;
-            z-index: 10;
-        }
-
-        @keyframes ripple {
-            0% {
-                transform: scale(0);
-                opacity: 1;
-            }
-            100% {
-                transform: scale(4);
-                opacity: 0;
-            }
-        }
-
-        @keyframes hitFlash {
-            0% { 
-                transform: scale(1);
-                box-shadow: 0 0 10px #ff4757;
-            }
-            50% { 
-                transform: scale(1.1);
-                box-shadow: 0 0 20px #ff4757;
-            }
-            100% { 
-                transform: scale(1);
-                box-shadow: 0 0 5px #ff4757;
-            }
-        }
-
-        /* 战斗统计面板 */
-        .battle-stats {
-            width: 100%;
-            max-width: 400px;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-            margin: 5px 0 20px 0;
-        }
-
-        .stats-card {
-            background: rgba(22, 33, 62, 0.8);
-            border: 1px solid rgba(64, 224, 208, 0.3);
-            border-radius: 12px;
-            padding: 12px;
-            text-align: center;
-            backdrop-filter: blur(8px);
-        }
-
-        .stats-title {
-            font-size: 11px;
-            color: rgba(255, 255, 255, 0.6);
-            margin-bottom: 4px;
-        }
-
-        .stats-value {
-            font-size: 16px;
-            font-weight: bold;
-            color: #40e0d0;
-            text-shadow: 0 0 10px rgba(64, 224, 208, 0.3);
-        }
-
-        /* 攻击历史面板 */
-        .history-panel {
-            width: 100%;
-            max-width: 400px;
-            background: rgba(22, 33, 62, 0.8);
-            border: 1px solid rgba(64, 224, 208, 0.3);
-            border-radius: 15px;
-            padding: 16px;
-            backdrop-filter: blur(10px);
-            margin-bottom: 20px;
-        }
-
-        .panel-title {
-            font-size: 16px;
-            font-weight: 600;
-            color: #40e0d0;
-            margin-bottom: 12px;
-            text-align: center;
-        }
-
-        .history-list {
-            max-height: 150px;
-            overflow-y: auto;
-            background: rgba(15, 52, 96, 0.4);
-            border-radius: 10px;
-            padding: 10px;
-        }
-
-        .history-item {
-            font-size: 12px;
-            color: rgba(255, 255, 255, 0.8);
-            margin-bottom: 8px;
-            padding: 6px;
-            background: rgba(64, 224, 208, 0.1);
-            border-radius: 6px;
-            border-left: 3px solid #40e0d0;
-        }
-
-        .history-item:last-child {
-            margin-bottom: 0;
-        }
-
-        .history-item.hit {
-            border-left-color: #ff4757;
-            background: rgba(255, 71, 87, 0.1);
-        }
-
-        .history-item.miss {
-            border-left-color: #6c757d;
-            background: rgba(108, 117, 125, 0.1);
-        }
-
-        .history-item.destroy {
-            border-left-color: #ff6b6b;
-            background: rgba(255, 107, 107, 0.2);
-            font-weight: 600;
-        }
-
-        /* 模拟攻击面板 */
-        .simulation-panel {
-            width: 100%;
-            max-width: 400px;
-            background: rgba(22, 33, 62, 0.8);
-            border: 1px solid rgba(64, 224, 208, 0.3);
-            border-radius: 15px;
-            padding: 16px;
-            backdrop-filter: blur(10px);
-            margin-bottom: 20px;
-        }
-
-        .simulation-controls {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 12px;
-        }
-
-        .simulation-controls .btn {
-            flex: 1;
-            padding: 10px;
-            font-size: 12px;
-            min-height: 40px;
-        }
-
-        .simulation-status {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            justify-content: center;
-        }
-
-        .status-indicator {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            background: #6c757d;
-        }
-
-        .status-indicator.active {
-            background: #28a745;
-            animation: statusPulse 2s infinite;
-        }
-
-        .status-indicator.inactive {
-            background: #6c757d;
-        }
-
-        .status-text {
-            font-size: 12px;
-            color: rgba(255, 255, 255, 0.7);
-        }
-
-        @keyframes statusPulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
-
-        /* 游戏结束遮罩 */
-        .game-end-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.85);
-            backdrop-filter: blur(15px);
-            display: none;
-            align-items: center;
-            justify-content: center;
-            z-index: 1000;
-            padding: 20px;
-        }
-
-        .game-end-modal {
-            background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
-            border: 2px solid #40e0d0;
-            border-radius: 20px;
-            padding: 30px 25px;
-            text-align: center;
-            max-width: 350px;
-            width: 100%;
-            animation: modalAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
-            backdrop-filter: blur(20px);
-        }
-
-        @keyframes modalAppear {
-            0% {
-                opacity: 0;
-                transform: scale(0.5) translateY(50px);
-            }
-            100% {
-                opacity: 1;
-                transform: scale(1) translateY(0);
-            }
-        }
-
-        .end-title {
-            font-size: 22px;
-            font-weight: bold;
-            margin-bottom: 20px;
-        }
-
-        .victory-title {
-            color: #28a745;
-            text-shadow: 0 0 15px rgba(40, 167, 69, 0.5);
-        }
-
-        .defeat-title {
-            color: #dc3545;
-            text-shadow: 0 0 15px rgba(220, 53, 69, 0.5);
-        }
-
-        .end-stats {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 12px;
-            margin: 20px 0;
-        }
-
-        .end-stat {
-            background: rgba(64, 224, 208, 0.1);
-            padding: 12px 8px;
-            border-radius: 10px;
-            border: 1px solid rgba(64, 224, 208, 0.2);
-        }
-
-        .end-stat-label {
-            font-size: 11px;
-            color: rgba(255, 255, 255, 0.6);
-            margin-bottom: 4px;
-        }
-
-        .end-stat-value {
-            font-size: 18px;
-            font-weight: bold;
-            color: #40e0d0;
-        }
-
-        .end-actions {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            margin-top: 25px;
-        }
-
-        .btn {
-            padding: 14px 20px;
-            border: none;
-            border-radius: 25px;
-            font-size: 15px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            touch-action: manipulation;
-            min-height: 44px;
-        }
-
-        .btn-primary {
-            background: linear-gradient(135deg, #40e0d0 0%, #26d0ce 100%);
-            color: #1a1a2e;
-            box-shadow: 0 4px 15px rgba(64, 224, 208, 0.3);
-        }
-
-        .btn-primary:active {
-            transform: translateY(2px);
-            box-shadow: 0 2px 8px rgba(64, 224, 208, 0.4);
-        }
-
-        .btn-secondary {
-            background: rgba(108, 117, 125, 0.2);
-            color: #ffffff;
-            border: 1px solid rgba(108, 117, 125, 0.5);
-        }
-
-        .btn-secondary:active {
-            background: rgba(108, 117, 125, 0.3);
-        }
-
-        /* 网络状态指示器 */
-        .network-status {
-            position: fixed;
-            top: calc(15px + env(safe-area-inset-top));
-            right: 15px;
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background: #28a745;
-            z-index: 101;
-            opacity: 0.8;
-        }
-
-        .network-status.offline {
-            background: #dc3545;
-            animation: networkPulse 2s infinite;
-        }
-
-        @keyframes networkPulse {
-            0%, 100% { opacity: 0.8; }
-            50% { opacity: 0.3; }
-        }
-
-        /* 触觉反馈模拟 */
-        .haptic-feedback {
-            animation: hapticVibrate 0.1s ease-out;
-        }
-
-        @keyframes hapticVibrate {
-            0%, 100% { transform: translateX(0); }
-            25% { transform: translateX(-2px); }
-            75% { transform: translateX(2px); }
-        }
-
-        /* 响应式适配 */
-        @media (max-height: 667px) {
-            .game-content {
-                gap: 10px;
-            }
-            
-            .board-title {
-                font-size: 14px;
-                padding: 6px 12px;
-            }
-            
-            .message-panel {
-                padding: 10px 14px;
-            }
-        }
-
-        @media (max-width: 375px) {
-            .grid-cell {
-                font-size: 7px;
-                min-height: 28px;
-            }
-            
-            .game-board {
-                padding: 5px;
-            }
-            
-            .stats-value {
-                font-size: 14px;
-            }
-        }
-
-        /* 横屏模式适配 */
-        @media (orientation: landscape) and (max-height: 500px) {
-            .game-container {
-                top: calc(70px + env(safe-area-inset-top));
-            }
-            
-            .turn-indicator {
-                top: calc(40px + env(safe-area-inset-top));
-            }
-            
-            .boards-container {
-                flex-direction: row;
-                max-width: 90%;
-                gap: 15px;
-            }
-            
-            .board-section {
-                flex: 1;
-            }
-        }
-    </style>
-</head>
-<body class="safe-area">
-    <!-- 动态星空背景 -->
-    <div class="star-field" id="starField"></div>
-    
-    <!-- 网络状态指示器 -->
-    <div class="network-status" id="networkStatus"></div>
-    
-    <!-- 移动端状态栏 -->
-    <div class="mobile-status-bar">
-        <div class="status-content">
-            <div class="player-section">
-                <div class="player-avatar">我</div>
-                <div class="player-name">深空战机</div>
-            </div>
-            
-            <div class="battle-timer">
-                <div class="timer-label">倒计时</div>
-                <div class="timer-value" id="battleTimer">30</div>
-            </div>
-            
-            <div class="player-section" style="justify-content: flex-end;">
-                <div class="player-name opponent-name">敌方战机</div>
-                <div class="player-avatar opponent-avatar">敌</div>
-            </div>
-        </div>
-    </div>
-
-    <!-- 回合指示器 -->
-    <div class="turn-indicator my-turn" id="turnIndicator">
-        我的回合
-    </div>
-
-    <!-- 主游戏容器 -->
-    <div class="game-container">
-        <div class="game-content">
-            <!-- 消息面板 -->
-            <div class="message-panel">
-                <div class="message-text" id="battleMessage">选择攻击目标，寻找敌方战机</div>
-            </div>
-
-            <!-- 棋盘容器 -->
-            <div class="boards-container">
-                <!-- 敌方棋盘（攻击目标） -->
-                <div class="board-section">
-                    <div class="board-title enemy-board-title">🎯 敌方海域</div>
-                    <div class="game-board enemy-board">
-                        <div class="grid-container" id="enemyGrid">
-                            <!-- 通过JavaScript生成 -->
-                        </div>
-                    </div>
-                </div>
-
-                <!-- 我的棋盘（被攻击） -->
-                <div class="board-section">
-                    <div class="board-title my-board-title">🛡️ 我方海域</div>
-                    <div class="game-board my-board">
-                        <div class="grid-container" id="myGrid">
-                            <!-- 通过JavaScript生成 -->
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 战斗统计 -->
-            <div class="battle-stats">
-                <div class="stats-card">
-                    <div class="stats-title">我方击毁</div>
-                    <div class="stats-value" id="myKills">0/3</div>
-                </div>
-                <div class="stats-card">
-                    <div class="stats-title">敌方击毁</div>
-                    <div class="stats-value" id="enemyKills">0/3</div>
-                </div>
-                <div class="stats-card">
-                    <div class="stats-title">回合数</div>
-                    <div class="stats-value" id="roundCount">1</div>
-                </div>
-                <div class="stats-card">
-                    <div class="stats-title">命中率</div>
-                    <div class="stats-value" id="hitRate">0%</div>
-                </div>
-            </div>
-
-            <!-- 攻击历史面板 -->
-            <div class="history-panel">
-                <div class="panel-title">📋 攻击历史</div>
-                <div class="history-list" id="attackHistory">
-                    <div class="history-item">游戏开始，等待攻击...</div>
-                </div>
-            </div>
-
-            <!-- 模拟攻击面板 -->
-            <div class="simulation-panel">
-                <div class="panel-title">🤖 AI模拟攻击</div>
-                <div class="simulation-controls">
-                    <button class="btn btn-secondary" onclick="simulateAttack()">模拟一次攻击</button>
-                    <button class="btn btn-primary" onclick="toggleAutoSimulate()">开启自动模拟</button>
-                </div>
-                <div class="simulation-status" id="simulationStatus">
-                    <span class="status-indicator inactive"></span>
-                    <span class="status-text">模拟已关闭</span>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- 游戏结束遮罩 -->
-    <div class="game-end-overlay" id="gameEndOverlay">
-        <div class="game-end-modal">
-            <h2 class="end-title" id="endTitle">游戏结束</h2>
-            <div class="end-stats">
-                <div class="end-stat">
-                    <div class="end-stat-label">总攻击</div>
-                    <div class="end-stat-value" id="totalAttacks">0</div>
-                </div>
-                <div class="end-stat">
-                    <div class="end-stat-label">命中次数</div>
-                    <div class="end-stat-value" id="totalHits">0</div>
-                </div>
-                <div class="end-stat">
-                    <div class="end-stat-label">摧毁战机</div>
-                    <div class="end-stat-value" id="totalKills">0</div>
-                </div>
-                <div class="end-stat">
-                    <div class="end-stat-label">游戏时长</div>
-                    <div class="end-stat-value" id="gameDuration">0:00</div>
-                </div>
-            </div>
-            <div class="end-actions">
-                <button class="btn btn-primary" onclick="restartGame()">再玩一局</button>
-                <button class="btn btn-secondary" onclick="backToMenu()">返回主菜单</button>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        // 十字形飞机形状定义 - 与游戏玩法文档和飞机放置界面保持一致
-        const PLANE_SHAPES = {
-            UP: [
-                [0, -2],  // 机头 (相对于中心点)
-                [-2, -1], [-1, -1], [0, -1], [1, -1], [2, -1],  // 机翼 (5格)
-                [0, 0], [0, 1],  // 机身 (2格，包括中心点)
-                [-1, 2], [0, 2], [1, 2]  // 机尾 (3格)
-            ],
-            DOWN: [
-                [0, 2],   // 机头
-                [-2, 1], [-1, 1], [0, 1], [1, 1], [2, 1],  // 机翼 (5格)
-                [0, 0], [0, -1],  // 机身 (2格)
-                [-1, -2], [0, -2], [1, -2]  // 机尾 (3格)
-            ],
-            LEFT: [
-                [-2, 0],  // 机头
-                [-1, -2], [-1, -1], [-1, 0], [-1, 1], [-1, 2],  // 机翼 (5格)
-                [0, 0], [1, 0],  // 机身 (2格)
-                [2, -1], [2, 0], [2, 1]  // 机尾 (3格)
-            ],
-            RIGHT: [
-                [2, 0],   // 机头
-                [1, -2], [1, -1], [1, 0], [1, 1], [1, 2],  // 机翼 (5格)
-                [0, 0], [-1, 0],  // 机身 (2格)
-                [-2, -1], [-2, 0], [-2, 1]  // 机尾 (3格)
-            ]
-        };
-
-        // 游戏状态
-        const gameState = {
-            myGrid: Array(10).fill().map(() => Array(10).fill(null)),
-            enemyGrid: Array(10).fill().map(() => Array(10).fill(null)),
-            myPlanes: [],
-            enemyPlanes: [],
-            isMyTurn: true,
-            myKills: 0,
-            enemyKills: 0,
-            totalAttacks: 0,
-            totalHits: 0,
-            roundCount: 1,
-            gameStartTime: Date.now(),
-            timer: 30,
-            attackHistory: [],
-            isAutoSimulate: false,
-            autoSimulateInterval: null
-        };
-
-        // PWA和离线支持
-        let isOnline = navigator.onLine;
-        const networkStatus = document.getElementById('networkStatus');
-
-        // 初始化应用
-        function initApp() {
-            createStarField();
-            setupNetworkMonitoring();
-            initGame();
-            registerServiceWorker();
-        }
-
-        // 创建动态星空
-        function createStarField() {
-            const starField = document.getElementById('starField');
-            const numStars = 50;
-            
-            for (let i = 0; i < numStars; i++) {
-                const star = document.createElement('div');
-                star.className = 'star';
-                star.style.width = Math.random() * 3 + 'px';
-                star.style.height = star.style.width;
-                star.style.left = Math.random() * 100 + '%';
-                star.style.top = Math.random() * 100 + '%';
-                star.style.animationDelay = Math.random() * 3 + 's';
-                starField.appendChild(star);
-            }
-        }
-
-        // 网络状态监控
-        function setupNetworkMonitoring() {
-            function updateNetworkStatus() {
-                isOnline = navigator.onLine;
-                networkStatus.className = isOnline ? 'network-status' : 'network-status offline';
-            }
-            
-            window.addEventListener('online', updateNetworkStatus);
-            window.addEventListener('offline', updateNetworkStatus);
-            updateNetworkStatus();
-        }
-
-        // 注册Service Worker
-        function registerServiceWorker() {
-            if ('serviceWorker' in navigator) {
-                navigator.serviceWorker.register('data:text/javascript;base64,c2VsZi5hZGRFdmVudExpc3RlbmVyKCdpbnN0YWxsJywgZXZlbnQgPT4geyBzZWxmLnNraXBXYWl0aW5nKCk7IH0pOyBzZWxmLmFkZEV2ZW50TGlzdGVuZXIoJ2FjdGl2YXRlJywgZXZlbnQgPT4geyByZXR1cm4gc2VsZi5jbGllbnRzLmNsYWltKCk7IH0pOyBzZWxmLmFkZEV2ZW50TGlzdGVuZXIoJ2ZldGNoJywgZXZlbnQgPT4geyBldmVudC5yZXNwb25kV2l0aChmZXRjaChldmVudC5yZXF1ZXN0KS5jYXRjaCgoKSA9PiBuZXcgUmVzcG9uc2UoJzxodG1sPjxib2R5Puemu+e6v+aLpeS/neS4jeWPr+eUqDwvYm9keT48L2h0bWw+JywgeyBoZWFkZXJzOiB7ICdDb250ZW50LVR5cGUnOiAndGV4dC9odG1sOyBjaGFyc2V0PXV0Zi04JyB9IH0pKSk7IH0pOw==')
-                .catch(() => console.log('Service Worker注册失败'));
-            }
-        }
-
-        // 触觉反馈
-        function triggerHapticFeedback(type = 'light') {
-            if ('vibrate' in navigator) {
-                const patterns = {
-                    light: [10],
-                    medium: [20],
-                    heavy: [30],
-                    success: [10, 50, 10],
-                    error: [50, 100, 50]
-                };
-                navigator.vibrate(patterns[type] || patterns.light);
-            }
-            
-            // 视觉反馈
-            document.body.classList.add('haptic-feedback');
-            setTimeout(() => document.body.classList.remove('haptic-feedback'), 100);
-        }
-
-        // 初始化游戏
-        function initGame() {
-            initGrids();
-            setupMyFleet();
-            setupEnemyFleet();
-            startTimer();
-            updateMessage("选择攻击目标，寻找敌方战机");
-        }
-
-        // 初始化网格
-        function initGrids() {
-            const myGridContainer = document.getElementById('myGrid');
-            const enemyGridContainer = document.getElementById('enemyGrid');
-            
-            [myGridContainer, enemyGridContainer].forEach((container, isEnemy) => {
-                container.innerHTML = '';
-                for (let row = 0; row < 10; row++) {
-                    for (let col = 0; col < 10; col++) {
-                        const cell = document.createElement('div');
-                        cell.className = 'grid-cell';
-                        cell.dataset.row = row;
-                        cell.dataset.col = col;
-                        cell.textContent = String.fromCharCode(65 + row) + (col + 1);
-                        
-                        if (isEnemy) {
-                            cell.addEventListener('click', () => attackEnemyCell(row, col));
-                            cell.addEventListener('touchstart', (e) => {
-                                e.preventDefault();
-                                triggerHapticFeedback('light');
-                            });
-                        }
-                        
-                        container.appendChild(cell);
-                    }
-                }
-            });
-        }
-
-        // 生成飞机位置 - 修正版本确保11格结构
-        function generatePlanePositions(centerRow, centerCol, direction) {
-            const shape = PLANE_SHAPES[direction];
-            const positions = [];
-            const parts = [];
-            
-            shape.forEach((offset, index) => {
-                const row = centerRow + offset[1];
-                const col = centerCol + offset[0];
-                
-                // 确保在棋盘范围内
-                if (row >= 0 && row < 10 && col >= 0 && col < 10) {
-                    positions.push([row, col]);
-                    // 正确的部件分类：1机头+5机翼+2机身+3机尾=11格
-                    if (index === 0) {
-                        parts.push('head');  // 第1格：机头
-                    } else if (index >= 1 && index <= 5) {
-                        parts.push('wing');  // 第2-6格：机翼
-                    } else if (index >= 6 && index <= 7) {
-                        parts.push('body');  // 第7-8格：机身
-                    } else {
-                        parts.push('tail');  // 第9-11格：机尾
-                    }
-                }
-            });
-            
-            return { positions, parts };
-        }
-
-        // 设置我的舰队
-        function setupMyFleet() {
-            try {
-                const savedPlanes = localStorage.getItem('playerPlanes');
-                if (savedPlanes) {
-                    gameState.myPlanes = JSON.parse(savedPlanes);
-                } else {
-                    throw new Error('No saved planes');
-                }
-            } catch {
-                // 生成模拟飞机数据
-                gameState.myPlanes = [
-                    {
-                        id: 1,
-                        center: [2, 4],
-                        direction: 'UP',
-                        positions: [[2, 2], [0, 3], [1, 3], [2, 3], [3, 3], [4, 3], [2, 4], [2, 5], [1, 6], [2, 6], [3, 6]],
-                        headPosition: [2, 2],
-                        isDestroyed: false
-                    },
-                    {
-                        id: 2,
-                        center: [7, 2],
-                        direction: 'RIGHT',
-                        positions: [[7, 4], [5, 1], [6, 1], [7, 1], [8, 1], [9, 1], [7, 2], [6, 2], [5, 1], [5, 2], [5, 3]],
-                        headPosition: [7, 4],
-                        isDestroyed: false
-                    },
-                    {
-                        id: 3,
-                        center: [6, 7],
-                        direction: 'DOWN',
-                        positions: [[6, 9], [4, 8], [5, 8], [6, 8], [7, 8], [8, 8], [6, 7], [6, 6], [5, 5], [6, 5], [7, 5]],
-                        headPosition: [6, 9],
-                        isDestroyed: false
-                    }
-                ];
-            }
-
-            // 在我的棋盘上显示飞机
-            gameState.myPlanes.forEach(plane => {
-                const { positions, parts } = generatePlanePositions(plane.center[0], plane.center[1], plane.direction);
-                positions.forEach(([row, col], index) => {
-                    if (row >= 0 && row < 10 && col >= 0 && col < 10) {
-                        gameState.myGrid[row][col] = {
-                            planeId: plane.id,
-                            partType: parts[index],
-                            isHead: index === 0
-                        };
-                        
-                        const cell = document.querySelector(`#myGrid [data-row="${row}"][data-col="${col}"]`);
-                        if (cell) {
-                            cell.classList.add(`plane-${parts[index]}`);
-                            cell.textContent = parts[index] === 'head' ? '头' :
-                                             parts[index] === 'wing' ? '翼' :
-                                             parts[index] === 'body' ? '身' : '尾';
-                        }
-                    }
-                });
-            });
-        }
-
-        // 设置敌方舰队
-        function setupEnemyFleet() {
-            const directions = ['UP', 'DOWN', 'LEFT', 'RIGHT'];
-            
-            for (let planeId = 1; planeId <= 3; planeId++) {
-                let placed = false;
-                let attempts = 0;
-                
-                while (!placed && attempts < 1000) {
-                    const row = Math.floor(Math.random() * 10);
-                    const col = Math.floor(Math.random() * 10);
-                    const direction = directions[Math.floor(Math.random() * 4)];
-                    
-                    const { positions } = generatePlanePositions(row, col, direction);
-                    
-                    if (positions.length === 11 && isValidEnemyPlacement(positions)) {
-                        const plane = {
-                            id: planeId,
-                            center: [row, col],
-                            direction: direction,
-                            positions: positions,
-                            headPosition: positions[0],
-                            isDestroyed: false
-                        };
-                        
-                        gameState.enemyPlanes.push(plane);
-                        
-                        // 在敌方网格中标记（但不显示）
-                        const { parts } = generatePlanePositions(row, col, direction);
-                        positions.forEach(([r, c], index) => {
-                            gameState.enemyGrid[r][c] = {
-                                planeId: planeId,
-                                partType: parts[index],
-                                isHead: index === 0
-                            };
-                        });
-                        
-                        placed = true;
-                    }
-                    attempts++;
-                }
-            }
-        }
-
-        // 验证敌方飞机放置
-        function isValidEnemyPlacement(positions) {
-            return positions.every(([row, col]) => {
-                return row >= 0 && row < 10 && col >= 0 && col < 10 &&
-                       gameState.enemyGrid[row][col] === null;
-            });
-        }
-
-        // 攻击敌方格子
-        function attackEnemyCell(row, col) {
-            if (!gameState.isMyTurn) {
-                updateMessage("还没轮到你！");
-                triggerHapticFeedback('error');
-                return;
-            }
-
-            const targetCell = document.querySelector(`#enemyGrid [data-row="${row}"][data-col="${col}"]`);
-            if (targetCell.classList.contains('attacked')) {
-                updateMessage("这个位置已经攻击过了！");
-                triggerHapticFeedback('error');
-                return;
-            }
-
-            // 标记已攻击
-            targetCell.classList.add('attacked');
-            gameState.totalAttacks++;
-            triggerHapticFeedback('medium');
-            
-            // 创建攻击波纹效果
-            createAttackRipple(targetCell);
-            
-            // 检查攻击结果 - 实现正确的三种攻击结果
-            const cellData = gameState.enemyGrid[row][col];
-            
-            setTimeout(() => {
-                let attackResult = 0; // 0=未命中, 1=命中, 2=击毁
-                
-                if (cellData) {
-                    gameState.totalHits++;
-                    
-                    if (cellData.isHead) {
-                        // 击中机头 - 结果为击毁(2)
-                        attackResult = 2;
-                        const plane = gameState.enemyPlanes.find(p => p.id === cellData.planeId);
-                        if (plane && !plane.isDestroyed) {
-                            plane.isDestroyed = true;
-                            gameState.myKills++;
-                            
-                            // 显示被摧毁的整架飞机
-                            revealDestroyedPlane(plane);
-                            targetCell.classList.add('destroyed');
-                            updateMessage(`🎯 击毁敌机！击中机头摧毁第${plane.id}架敌机！`);
-                            triggerHapticFeedback('success');
-                            
-                            if (gameState.myKills >= 3) {
-                                endGame(true);
-                                return;
-                            }
-                        }
-                    } else {
-                        // 击中其他部件 - 结果为命中(1)
-                        attackResult = 1;
-                        targetCell.classList.add('hit');
-                        updateMessage(`💥 命中敌机${cellData.partType === 'wing' ? '机翼' :
-                                      cellData.partType === 'body' ? '机身' : '机尾'}！`);
-                        triggerHapticFeedback('medium');
-                    }
-                } else {
-                    // 未命中 - 结果为未命中(0)
-                    attackResult = 0;
-                    targetCell.classList.add('miss');
-                    targetCell.textContent = '○';
-                    updateMessage("💨 攻击未命中");
-                    triggerHapticFeedback('light');
-                }
-                
-                console.log(`攻击结果: ${attackResult} (0=未命中, 1=命中, 2=击毁)`);
-                
-                // 添加攻击历史记录
-                addAttackHistory('player', row, col, attackResult, cellData);
-                
-                updateStats();
-                switchTurn();
-            }, 800);
-        }
-
-        // 显示被摧毁的敌机
-        function revealDestroyedPlane(plane) {
-            const { positions, parts } = generatePlanePositions(plane.center[0], plane.center[1], plane.direction);
-            
-            positions.forEach(([row, col], index) => {
-                const cell = document.querySelector(`#enemyGrid [data-row="${row}"][data-col="${col}"]`);
-                if (cell) {
-                    cell.classList.add(`revealed-${parts[index]}`);
-                    cell.textContent = parts[index] === 'head' ? '头' :
-                                     parts[index] === 'wing' ? '翼' :
-                                     parts[index] === 'body' ? '身' : '尾';
-                }
-            });
-        }
-
-        // 创建攻击波纹效果
-        function createAttackRipple(cell) {
-            const ripple = document.createElement('div');
-            ripple.className = 'attack-ripple';
-            
-            ripple.style.left = '50%';
-            ripple.style.top = '50%';
-            ripple.style.width = '30px';
-            ripple.style.height = '30px';
-            ripple.style.transform = 'translate(-50%, -50%)';
-            
-            cell.appendChild(ripple);
-            
-            setTimeout(() => ripple.remove(), 800);
-        }
-
-        // 切换回合
-        function switchTurn() {
-            gameState.isMyTurn = !gameState.isMyTurn;
-            gameState.roundCount++;
-            
-            const turnIndicator = document.getElementById('turnIndicator');
-            
-            if (gameState.isMyTurn) {
-                turnIndicator.textContent = '我的回合';
-                turnIndicator.className = 'turn-indicator my-turn';
-                resetTimer();
-                updateMessage("轮到你了！选择攻击目标");
-            } else {
-                turnIndicator.textContent = '对手回合';
-                turnIndicator.className = 'turn-indicator opponent-turn';
-                updateMessage("等待对手攻击...");
-                
-                // 模拟对手攻击
-                setTimeout(() => {
-                    enemyAttack();
-                }, 2000 + Math.random() * 3000);
-            }
-            
-            updateStats();
-        }
-
-        // 敌方攻击
-        function enemyAttack() {
-            const availableCells = [];
-            for (let row = 0; row < 10; row++) {
-                for (let col = 0; col < 10; col++) {
-                    const cell = document.querySelector(`#myGrid [data-row="${row}"][data-col="${col}"]`);
-                    if (!cell.classList.contains('hit') && !cell.classList.contains('miss')) {
-                        availableCells.push([row, col, cell]);
-                    }
-                }
-            }
-            
-            if (availableCells.length === 0) return;
-            
-            const [row, col, cell] = availableCells[Math.floor(Math.random() * availableCells.length)];
-            const cellData = gameState.myGrid[row][col];
-            
-            // 攻击动画
-            cell.style.background = '#ff4757';
-            triggerHapticFeedback('heavy');
-            
-            setTimeout(() => {
-                let attackResult = 0; // 0=未命中, 1=命中, 2=击毁
-                
-                if (cellData) {
-                    if (cellData.isHead) {
-                        // 击中我的机头 - 结果为击毁(2)
-                        attackResult = 2;
-                        cell.classList.add('destroyed');
-                        const plane = gameState.myPlanes.find(p => p.id === cellData.planeId);
-                        if (plane && !plane.isDestroyed) {
-                            plane.isDestroyed = true;
-                            gameState.enemyKills++;
-                            updateMessage(`💔 敌方击毁了你的第${plane.id}架战机！`);
-                            
-                            if (gameState.enemyKills >= 3) {
-                                endGame(false);
-                                return;
-                            }
-                        }
-                        
-                        // 敌方击毁后继续攻击
-                        setTimeout(() => enemyAttack(), 1500);
-                    } else {
-                        // 击中其他部件 - 结果为命中(1)
-                        attackResult = 1;
-                        cell.classList.add('hit');
-                        updateMessage(`⚡ 敌方命中你的战机${cellData.partType === 'wing' ? '机翼' :
-                                      cellData.partType === 'body' ? '机身' : '机尾'}！`);
-                        
-                        // 敌方命中后继续攻击
-                        setTimeout(() => enemyAttack(), 1500);
-                    }
-                } else {
-                    // 未命中 - 结果为未命中(0)
-                    attackResult = 0;
-                    cell.classList.add('miss');
-                    cell.textContent = '○';
-                    cell.style.background = '';
-                    updateMessage("敌方攻击未命中，轮到你了！");
-                    switchTurn();
-                }
-                
-                console.log(`敌方攻击结果: ${attackResult} (0=未命中, 1=命中, 2=击毁)`);
-                
-                // 添加攻击历史记录
-                addAttackHistory('enemy', row, col, attackResult, cellData);
-                
-                updateStats();
-            }, 1000);
-        }
-
-        // 结束游戏
-        function endGame(isVictory) {
-            const overlay = document.getElementById('gameEndOverlay');
-            const title = document.getElementById('endTitle');
-            
-            if (isVictory) {
-                title.textContent = '🎉 恭喜获胜！';
-                title.className = 'end-title victory-title';
-                triggerHapticFeedback('success');
-            } else {
-                title.textContent = '💔 遗憾失败';
-                title.className = 'end-title defeat-title';
-                triggerHapticFeedback('error');
-            }
-            
-            // 更新结束统计
-            document.getElementById('totalAttacks').textContent = gameState.totalAttacks;
-            document.getElementById('totalHits').textContent = gameState.totalHits;
-            document.getElementById('totalKills').textContent = gameState.myKills;
-            
-            const gameDuration = Math.floor((Date.now() - gameState.gameStartTime) / 1000);
-            const minutes = Math.floor(gameDuration / 60);
-            const seconds = gameDuration % 60;
-            document.getElementById('gameDuration').textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
-            
-            overlay.style.display = 'flex';
-        }
-
-        // 更新统计信息
-        function updateStats() {
-            document.getElementById('myKills').textContent = `${gameState.myKills}/3`;
-            document.getElementById('enemyKills').textContent = `${gameState.enemyKills}/3`;
-            document.getElementById('roundCount').textContent = gameState.roundCount;
-            
-            const hitRate = gameState.totalAttacks > 0 ?
-                Math.round(gameState.totalHits / gameState.totalAttacks * 100) : 0;
-            document.getElementById('hitRate').textContent = hitRate + '%';
-        }
-
-        // 更新消息
-        function updateMessage(message) {
-            document.getElementById('battleMessage').textContent = message;
-        }
-
-        // 计时器相关函数
-        function startTimer() {
-            setInterval(() => {
-                if (gameState.isMyTurn && gameState.timer > 0) {
-                    gameState.timer--;
-                    const timerElement = document.getElementById('battleTimer');
-                    timerElement.textContent = gameState.timer;
-                    
-                    if (gameState.timer <= 10) {
-                        timerElement.classList.add('timer-warning');
-                    }
-                    
-                    if (gameState.timer === 0) {
-                        // 时间到，随机攻击
-                        autoAttack();
-                    }
-                }
-            }, 1000);
-        }
-
-        function resetTimer() {
-            gameState.timer = 30;
-            const timerElement = document.getElementById('battleTimer');
-            timerElement.textContent = gameState.timer;
-            timerElement.classList.remove('timer-warning');
-        }
-
-        function autoAttack() {
-            const availableCells = [];
-            for (let row = 0; row < 10; row++) {
-                for (let col = 0; col < 10; col++) {
-                    const cell = document.querySelector(`#enemyGrid [data-row="${row}"][data-col="${col}"]`);
-                    if (!cell.classList.contains('attacked')) {
-                        availableCells.push([row, col]);
-                    }
-                }
-            }
-            
-            if (availableCells.length > 0) {
-                const [row, col] = availableCells[Math.floor(Math.random() * availableCells.length)];
-                attackEnemyCell(row, col);
-            }
-        }
-
-        // 游戏控制函数
-        function restartGame() {
-            location.reload();
-        }
-
-        function backToMenu() {
-            localStorage.removeItem('playerPlanes');
-            window.location.href = 'mobile_main_menu_1.html';
-        }
-
-        // 添加攻击历史记录
-        function addAttackHistory(attacker, row, col, result, cellData) {
-            const position = String.fromCharCode(65 + row) + (col + 1);
-            let message = '';
-            let className = 'history-item';
-            
-            if (attacker === 'player') {
-                message += `玩家攻击 ${position}: `;
-            } else {
-                message += `敌方攻击 ${position}: `;
-            }
-            
-            if (result === 0) {
-                message += '未命中';
-                className += ' miss';
-            } else if (result === 1) {
-                message += `命中${cellData.partType === 'wing' ? '机翼' :
-                         cellData.partType === 'body' ? '机身' : '机尾'}`;
-                className += ' hit';
-            } else if (result === 2) {
-                message += '击毁敌机！';
-                className += ' destroy';
-            }
-            
-            gameState.attackHistory.unshift({
-                attacker,
-                position,
-                result,
-                message,
-                className,
-                timestamp: new Date().toLocaleTimeString()
-            });
-            
-            // 限制历史记录数量
-            if (gameState.attackHistory.length > 20) {
-                gameState.attackHistory.pop();
-            }
-            
-            updateAttackHistoryDisplay();
-        }
-
-        // 更新攻击历史显示
-        function updateAttackHistoryDisplay() {
-            const historyList = document.getElementById('attackHistory');
-            historyList.innerHTML = '';
-            
-            if (gameState.attackHistory.length === 0) {
-                historyList.innerHTML = '<div class="history-item">暂无攻击记录</div>';
-                return;
-            }
-            
-            gameState.attackHistory.forEach(record => {
-                const item = document.createElement('div');
-                item.className = record.className;
-                item.innerHTML = `
-                    <div style="display: flex; justify-content: space-between; align-items: center;">
-                        <span>${record.message}</span>
-                        <span style="font-size: 10px; opacity: 0.7;">${record.timestamp}</span>
-                    </div>
-                `;
-                historyList.appendChild(item);
-            });
-        }
-
-        // 模拟攻击功能
-        function simulateAttack() {
-            if (!gameState.isMyTurn) {
-                updateMessage("现在不是你的回合！");
-                return;
-            }
-            
-            // 随机选择一个未攻击的位置
-            const availableCells = [];
-            for (let row = 0; row < 10; row++) {
-                for (let col = 0; col < 10; col++) {
-                    const cell = document.querySelector(`#enemyGrid [data-row="${row}"][data-col="${col}"]`);
-                    if (!cell.classList.contains('attacked')) {
-                        availableCells.push([row, col]);
-                    }
-                }
-            }
-            
-            if (availableCells.length === 0) {
-                updateMessage("没有可攻击的目标了！");
-                return;
-            }
-            
-            const [row, col] = availableCells[Math.floor(Math.random() * availableCells.length)];
-            attackEnemyCell(row, col);
-        }
-
-        // 切换自动模拟
-        function toggleAutoSimulate() {
-            gameState.isAutoSimulate = !gameState.isAutoSimulate;
-            
-            const statusIndicator = document.querySelector('.status-indicator');
-            const statusText = document.querySelector('.status-text');
-            const button = event.target;
-            
-            if (gameState.isAutoSimulate) {
-                statusIndicator.className = 'status-indicator active';
-                statusText.textContent = '自动模拟开启';
-                button.textContent = '关闭自动模拟';
-                button.className = 'btn btn-warning';
-                
-                // 开始自动模拟
-                gameState.autoSimulateInterval = setInterval(() => {
-                    if (gameState.isMyTurn) {
-                        simulateAttack();
-                    }
-                }, 2000);
-                
-                updateMessage("AI模拟攻击已开启");
-            } else {
-                statusIndicator.className = 'status-indicator inactive';
-                statusText.textContent = '模拟已关闭';
-                button.textContent = '开启自动模拟';
-                button.className = 'btn btn-primary';
-                
-                // 停止自动模拟
-                if (gameState.autoSimulateInterval) {
-                    clearInterval(gameState.autoSimulateInterval);
-                    gameState.autoSimulateInterval = null;
-                }
-                
-                updateMessage("AI模拟攻击已关闭");
-            }
-        }
-
-        // 防止双指缩放和滚动
-        document.addEventListener('touchmove', function(event) {
-            if (event.scale !== 1) {
-                event.preventDefault();
-            }
-        }, { passive: false });
-
-        document.addEventListener('gesturestart', function(event) {
-            event.preventDefault();
-        });
-
-        // 页面加载完成后初始化
-        document.addEventListener('DOMContentLoaded', function() {
-            initApp();
-        });
-    </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/mobile_index.html b/mobile_index.html
deleted file mode 100644
index 70cb16d..0000000
--- a/mobile_index.html
+++ /dev/null
@@ -1,209 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <meta name="theme-color" content="#1a1a2e">
-    <title>深空战机 - 移动端原型入口</title>
-    
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            -webkit-user-select: none;
-            -webkit-touch-callout: none;
-            -webkit-tap-highlight-color: transparent;
-        }
-
-        body {
-            font-family: 'PingFang SC', 'Helvetica Neue', 'Arial', sans-serif;
-            background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
-            color: #ffffff;
-            min-height: 100vh;
-            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .container {
-            max-width: 400px;
-            width: 90%;
-            padding: 20px;
-        }
-
-        .title {
-            text-align: center;
-            font-size: 28px;
-            font-weight: bold;
-            color: #40e0d0;
-            margin-bottom: 10px;
-            text-shadow: 0 0 20px rgba(64, 224, 208, 0.5);
-        }
-
-        .subtitle {
-            text-align: center;
-            font-size: 16px;
-            color: rgba(255, 255, 255, 0.7);
-            margin-bottom: 40px;
-        }
-
-        .prototype-list {
-            display: flex;
-            flex-direction: column;
-            gap: 15px;
-        }
-
-        .prototype-item {
-            background: rgba(22, 33, 62, 0.8);
-            border: 1px solid rgba(64, 224, 208, 0.3);
-            border-radius: 15px;
-            padding: 20px;
-            backdrop-filter: blur(10px);
-            transition: all 0.3s ease;
-            text-decoration: none;
-            color: inherit;
-            display: block;
-        }
-
-        .prototype-item:active {
-            transform: scale(0.98);
-            background: rgba(64, 224, 208, 0.1);
-            border-color: #40e0d0;
-        }
-
-        .prototype-title {
-            font-size: 18px;
-            font-weight: bold;
-            color: #40e0d0;
-            margin-bottom: 8px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .prototype-desc {
-            font-size: 14px;
-            color: rgba(255, 255, 255, 0.8);
-            line-height: 1.4;
-        }
-
-        .prototype-features {
-            margin-top: 10px;
-            font-size: 12px;
-            color: rgba(255, 255, 255, 0.6);
-        }
-
-        .status-indicator {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            background: rgba(40, 167, 69, 0.9);
-            color: white;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-size: 12px;
-            font-weight: 600;
-            backdrop-filter: blur(10px);
-        }
-
-        .footer {
-            margin-top: 40px;
-            text-align: center;
-            font-size: 12px;
-            color: rgba(255, 255, 255, 0.5);
-        }
-    </style>
-</head>
-<body>
-    <div class="status-indicator">
-        ✅ 4个原型已完成
-    </div>
-
-    <div class="container">
-        <h1 class="title">深空战机</h1>
-        <p class="subtitle">移动端高可用性原型演示</p>
-
-        <div class="prototype-list">
-            <a href="mobile_main_menu_1.html" class="prototype-item">
-                <div class="prototype-title">
-                    🏠 主菜单界面
-                </div>
-                <div class="prototype-desc">
-                    游戏主界面，包含完整的导航菜单和设置选项
-                </div>
-                <div class="prototype-features">
-                    PWA支持 • 星空动画 • 音效控制 • 安全区适配
-                </div>
-            </a>
-
-            <a href="mobile_plane_placement_1.html" class="prototype-item">
-                <div class="prototype-title">
-                    ✈️ 飞机放置界面
-                </div>
-                <div class="prototype-desc">
-                    十字形战机布置界面，支持拖拽放置和旋转操作
-                </div>
-                <div class="prototype-features">
-                    触屏拖拽 • 碰撞检测 • 自动布置 • 实时验证
-                </div>
-            </a>
-
-            <a href="mobile_battle_1.html" class="prototype-item">
-                <div class="prototype-title">
-                    ⚔️ 战斗界面
-                </div>
-                <div class="prototype-desc">
-                    双棋盘战斗系统，包含计时器和AI对手
-                </div>
-                <div class="prototype-features">
-                    回合制战斗 • 攻击动画 • 战斗统计 • 触觉反馈
-                </div>
-            </a>
-
-            <a href="mobile_leaderboard_1.html" class="prototype-item">
-                <div class="prototype-title">
-                    🏆 排行榜界面
-                </div>
-                <div class="prototype-desc">
-                    多维度排行榜展示，包含个人统计信息
-                </div>
-                <div class="prototype-features">
-                    三级榜单 • 数据动画 • 下拉刷新 • 个人卡片
-                </div>
-            </a>
-        </div>
-
-        <div class="footer">
-            <p>移动端原型 v1.0 | 支持PWA离线访问</p>
-            <p>建议在移动设备上体验完整功能</p>
-        </div>
-    </div>
-
-    <script>
-        // 防止双指缩放
-        document.addEventListener('touchmove', function(event) {
-            if (event.scale !== 1) {
-                event.preventDefault();
-            }
-        }, { passive: false });
-
-        document.addEventListener('gesturestart', function(event) {
-            event.preventDefault();
-        });
-
-        // 简单的点击反馈
-        document.querySelectorAll('.prototype-item').forEach(item => {
-            item.addEventListener('touchstart', function() {
-                if ('vibrate' in navigator) {
-                    navigator.vibrate(10);
-                }
-            });
-        });
-    </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/mobile_leaderboard_1.html b/mobile_leaderboard_1.html
deleted file mode 100644
index 59ed9f6..0000000
--- a/mobile_leaderboard_1.html
+++ /dev/null
@@ -1,1045 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <meta name="theme-color" content="#1a1a2e">
-    <title>深空战机 - 排行榜</title>
-    
-    <!-- PWA Manifest -->
-    <link rel="manifest" href="data:application/json;base64,ewogICJuYW1lIjogIuaViuepuuaImOacuiAtIOaImOaWl+eVjOmdoiIsCiAgInNob3J0X25hbWUiOiAi5rex56m65oiY5py6IiwKICAic3RhcnRfdXJsIjogIi4vIiwKICAiZGlzcGxheSI6ICJzdGFuZGFsb25lIiwKICAiYmFja2dyb3VuZF9jb2xvciI6ICIjMWExYTJlIiwKICAidGhlbWVfY29sb3IiOiAiIzQwZTBkMCIsCiAgImljb25zIjogW10KfQ==">
-    
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            -webkit-user-select: none;
-            -webkit-touch-callout: none;
-            -webkit-tap-highlight-color: transparent;
-        }
-
-        html, body {
-            height: 100%;
-            overflow: hidden;
-            position: fixed;
-            width: 100%;
-        }
-
-        body {
-            font-family: 'PingFang SC', 'Helvetica Neue', 'Arial', sans-serif;
-            background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
-            color: #ffffff;
-            position: relative;
-            touch-action: manipulation;
-        }
-
-        /* 动态星空背景 */
-        .star-field {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 0;
-            overflow: hidden;
-        }
-
-        .star {
-            position: absolute;
-            background: rgba(64, 224, 208, 0.8);
-            border-radius: 50%;
-            animation: twinkle 3s infinite;
-        }
-
-        @keyframes twinkle {
-            0%, 100% { opacity: 0.3; transform: scale(1); }
-            50% { opacity: 1; transform: scale(1.2); }
-        }
-
-        /* 安全区域适配 */
-        .safe-area {
-            padding-top: env(safe-area-inset-top);
-            padding-left: env(safe-area-inset-left);
-            padding-right: env(safe-area-inset-right);
-            padding-bottom: env(safe-area-inset-bottom);
-        }
-
-        /* 移动端导航栏 */
-        .mobile-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: calc(60px + env(safe-area-inset-top));
-            background: linear-gradient(180deg, rgba(26, 26, 46, 0.95) 0%, rgba(26, 26, 46, 0.8) 100%);
-            backdrop-filter: blur(15px);
-            border-bottom: 1px solid rgba(64, 224, 208, 0.3);
-            z-index: 100;
-            display: flex;
-            align-items: flex-end;
-            padding: 0 15px 8px;
-        }
-
-        .nav-content {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            width: 100%;
-            height: 44px;
-        }
-
-        .back-btn {
-            background: none;
-            border: none;
-            color: #40e0d0;
-            font-size: 16px;
-            cursor: pointer;
-            padding: 8px 12px;
-            border-radius: 12px;
-            transition: all 0.3s ease;
-            touch-action: manipulation;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            min-height: 44px;
-        }
-
-        .back-btn:active {
-            background: rgba(64, 224, 208, 0.1);
-            transform: scale(0.95);
-        }
-
-        .nav-title {
-            font-size: 18px;
-            font-weight: 600;
-            color: #40e0d0;
-            text-shadow: 0 0 10px rgba(64, 224, 208, 0.3);
-        }
-
-        .refresh-btn {
-            background: linear-gradient(135deg, #40e0d0 0%, #26d0ce 100%);
-            border: none;
-            color: #1a1a2e;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            touch-action: manipulation;
-            min-height: 44px;
-            box-shadow: 0 4px 15px rgba(64, 224, 208, 0.3);
-        }
-
-        .refresh-btn:active {
-            transform: translateY(1px);
-            box-shadow: 0 2px 8px rgba(64, 224, 208, 0.4);
-        }
-
-        .refresh-btn:disabled {
-            opacity: 0.7;
-            transform: none !important;
-        }
-
-        /* 主内容容器 */
-        .main-container {
-            position: absolute;
-            top: calc(60px + env(safe-area-inset-top));
-            left: 0;
-            right: 0;
-            bottom: 0;
-            overflow-y: auto;
-            -webkit-overflow-scrolling: touch;
-            z-index: 10;
-        }
-
-        .main-content {
-            padding: 20px 15px;
-            max-width: 400px;
-            margin: 0 auto;
-            min-height: 100%;
-        }
-
-        /* 分类标签 */
-        .category-tabs {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 20px;
-            background: rgba(22, 33, 62, 0.8);
-            border-radius: 25px;
-            padding: 6px;
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(64, 224, 208, 0.2);
-        }
-
-        .tab-btn {
-            flex: 1;
-            padding: 12px 16px;
-            background: none;
-            border: none;
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 13px;
-            font-weight: 600;
-            border-radius: 20px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            touch-action: manipulation;
-            min-height: 44px;
-        }
-
-        .tab-btn.active {
-            background: linear-gradient(135deg, #40e0d0 0%, #26d0ce 100%);
-            color: #1a1a2e;
-            box-shadow: 0 2px 10px rgba(64, 224, 208, 0.3);
-        }
-
-        .tab-btn:not(.active):active {
-            background: rgba(64, 224, 208, 0.1);
-            color: #40e0d0;
-        }
-
-        /* 我的排名卡片 */
-        .my-rank-card {
-            background: linear-gradient(135deg, #40e0d0 0%, #26d0ce 100%);
-            border-radius: 20px;
-            padding: 20px;
-            margin-bottom: 20px;
-            color: #1a1a2e;
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            position: relative;
-            overflow: hidden;
-            box-shadow: 0 8px 32px rgba(64, 224, 208, 0.4);
-        }
-
-        .my-rank-card::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            right: -30%;
-            width: 120px;
-            height: 120px;
-            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
-            border-radius: 50%;
-            animation: cardShimmer 3s ease-in-out infinite;
-        }
-
-        @keyframes cardShimmer {
-            0%, 100% { opacity: 0.5; transform: scale(1); }
-            50% { opacity: 0.8; transform: scale(1.1); }
-        }
-
-        .my-avatar {
-            width: 60px;
-            height: 60px;
-            border-radius: 50%;
-            background: rgba(26, 26, 46, 0.3);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #40e0d0;
-            font-size: 18px;
-            font-weight: bold;
-            border: 3px solid rgba(26, 26, 46, 0.2);
-            position: relative;
-            z-index: 1;
-        }
-
-        .my-info {
-            flex: 1;
-            position: relative;
-            z-index: 1;
-        }
-
-        .my-name {
-            font-size: 18px;
-            font-weight: bold;
-            margin-bottom: 6px;
-        }
-
-        .my-stats {
-            font-size: 13px;
-            opacity: 0.8;
-            display: flex;
-            gap: 15px;
-        }
-
-        .stat-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-
-        .stat-value {
-            font-weight: bold;
-            font-size: 16px;
-        }
-
-        .stat-label {
-            font-size: 11px;
-            opacity: 0.7;
-        }
-
-        .my-rank-number {
-            font-size: 36px;
-            font-weight: bold;
-            position: relative;
-            z-index: 1;
-            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        }
-
-        /* 排行榜容器 */
-        .leaderboard {
-            background: rgba(22, 33, 62, 0.8);
-            border-radius: 20px;
-            padding: 20px 16px;
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(64, 224, 208, 0.3);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-        }
-
-        .rank-item {
-            display: flex;
-            align-items: center;
-            padding: 15px 8px;
-            border-bottom: 1px solid rgba(64, 224, 208, 0.1);
-            transition: all 0.3s ease;
-            position: relative;
-            border-radius: 12px;
-            margin-bottom: 2px;
-        }
-
-        .rank-item:last-child {
-            border-bottom: none;
-            margin-bottom: 0;
-        }
-
-        .rank-item:active {
-            background: rgba(64, 224, 208, 0.1);
-            transform: scale(0.98);
-        }
-
-        .rank-number {
-            width: 40px;
-            font-size: 16px;
-            font-weight: bold;
-            color: #40e0d0;
-            text-align: center;
-            flex-shrink: 0;
-        }
-
-        .rank-number.first {
-            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-size: 20px;
-            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
-        }
-
-        .rank-number.second {
-            background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-size: 18px;
-        }
-
-        .rank-number.third {
-            background: linear-gradient(135deg, #cd7f32 0%, #deb887 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-size: 17px;
-        }
-
-        .player-avatar {
-            width: 44px;
-            height: 44px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-weight: bold;
-            margin: 0 12px;
-            font-size: 14px;
-            flex-shrink: 0;
-            border: 2px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .player-info {
-            flex: 1;
-            min-width: 0;
-        }
-
-        .player-name {
-            font-size: 15px;
-            font-weight: 600;
-            color: #ffffff;
-            margin-bottom: 4px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .player-level {
-            font-size: 12px;
-            color: rgba(255, 255, 255, 0.6);
-        }
-
-        .player-stats {
-            text-align: right;
-            flex-shrink: 0;
-        }
-
-        .win-rate {
-            font-size: 16px;
-            font-weight: bold;
-            color: #40e0d0;
-            margin-bottom: 2px;
-            text-shadow: 0 0 8px rgba(64, 224, 208, 0.3);
-        }
-
-        .total-games {
-            font-size: 11px;
-            color: rgba(255, 255, 255, 0.6);
-        }
-
-        /* 奖杯图标 */
-        .trophy-icon {
-            position: absolute;
-            right: 8px;
-            top: 50%;
-            transform: translateY(-50%);
-            font-size: 20px;
-            opacity: 0;
-            transition: all 0.3s ease;
-            pointer-events: none;
-        }
-
-        .rank-item:active .trophy-icon {
-            opacity: 0.8;
-            transform: translateY(-50%) scale(1.2);
-        }
-
-        /* 加载状态 */
-        .loading {
-            text-align: center;
-            padding: 40px 20px;
-            color: rgba(255, 255, 255, 0.6);
-        }
-
-        .loading-spinner {
-            width: 40px;
-            height: 40px;
-            border: 3px solid rgba(64, 224, 208, 0.2);
-            border-left: 3px solid #40e0d0;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 15px;
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-
-        /* 空状态 */
-        .empty-state {
-            text-align: center;
-            padding: 60px 20px;
-            color: rgba(255, 255, 255, 0.6);
-        }
-
-        .empty-icon {
-            font-size: 48px;
-            margin-bottom: 15px;
-            opacity: 0.5;
-        }
-
-        .empty-text {
-            font-size: 16px;
-            font-weight: 500;
-        }
-
-        /* 网络状态指示器 */
-        .network-status {
-            position: fixed;
-            top: calc(15px + env(safe-area-inset-top));
-            right: 15px;
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background: #28a745;
-            z-index: 101;
-            opacity: 0.8;
-        }
-
-        .network-status.offline {
-            background: #dc3545;
-            animation: networkPulse 2s infinite;
-        }
-
-        @keyframes networkPulse {
-            0%, 100% { opacity: 0.8; }
-            50% { opacity: 0.3; }
-        }
-
-        /* Toast消息 */
-        .toast {
-            position: fixed;
-            top: calc(80px + env(safe-area-inset-top));
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(64, 224, 208, 0.9);
-            color: #1a1a2e;
-            padding: 12px 20px;
-            border-radius: 25px;
-            font-size: 14px;
-            font-weight: 600;
-            z-index: 1000;
-            backdrop-filter: blur(10px);
-            box-shadow: 0 8px 32px rgba(64, 224, 208, 0.3);
-        }
-
-        .toast.show {
-            animation: toastShow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-        }
-
-        .toast.hide {
-            animation: toastHide 0.3s ease-out;
-        }
-
-        @keyframes toastShow {
-            0% {
-                opacity: 0;
-                transform: translateX(-50%) translateY(-20px) scale(0.8);
-            }
-            100% {
-                opacity: 1;
-                transform: translateX(-50%) translateY(0) scale(1);
-            }
-        }
-
-        @keyframes toastHide {
-            0% {
-                opacity: 1;
-                transform: translateX(-50%) translateY(0) scale(1);
-            }
-            100% {
-                opacity: 0;
-                transform: translateX(-50%) translateY(-20px) scale(0.8);
-            }
-        }
-
-        /* 更新动画 */
-        .updating {
-            animation: pulse 1.5s ease-in-out infinite;
-        }
-
-        @keyframes pulse {
-            0% { opacity: 1; }
-            50% { opacity: 0.7; }
-            100% { opacity: 1; }
-        }
-
-        /* 页面进入动画 */
-        .main-content {
-            animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-        }
-
-        @keyframes slideInUp {
-            0% {
-                opacity: 0;
-                transform: translateY(30px);
-            }
-            100% {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        /* 排行榜项目依次出现动画 */
-        .rank-item {
-            animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
-        }
-
-        .rank-item:nth-child(1) { animation-delay: 0.1s; }
-        .rank-item:nth-child(2) { animation-delay: 0.15s; }
-        .rank-item:nth-child(3) { animation-delay: 0.2s; }
-        .rank-item:nth-child(4) { animation-delay: 0.25s; }
-        .rank-item:nth-child(5) { animation-delay: 0.3s; }
-        .rank-item:nth-child(6) { animation-delay: 0.35s; }
-        .rank-item:nth-child(7) { animation-delay: 0.4s; }
-        .rank-item:nth-child(8) { animation-delay: 0.45s; }
-        .rank-item:nth-child(9) { animation-delay: 0.5s; }
-        .rank-item:nth-child(10) { animation-delay: 0.55s; }
-
-        @keyframes fadeInUp {
-            0% {
-                opacity: 0;
-                transform: translateY(15px);
-            }
-            100% {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        /* 触觉反馈模拟 */
-        .haptic-feedback {
-            animation: hapticVibrate 0.1s ease-out;
-        }
-
-        @keyframes hapticVibrate {
-            0%, 100% { transform: translateX(0); }
-            25% { transform: translateX(-1px); }
-            75% { transform: translateX(1px); }
-        }
-
-        /* 响应式适配 */
-        @media (max-width: 375px) {
-            .my-rank-card {
-                padding: 16px;
-                gap: 12px;
-            }
-
-            .my-avatar {
-                width: 50px;
-                height: 50px;
-                font-size: 16px;
-            }
-
-            .my-name {
-                font-size: 16px;
-            }
-
-            .my-rank-number {
-                font-size: 32px;
-            }
-
-            .rank-item {
-                padding: 12px 6px;
-            }
-
-            .player-avatar {
-                width: 40px;
-                height: 40px;
-                margin: 0 10px;
-                font-size: 13px;
-            }
-
-            .player-name {
-                font-size: 14px;
-            }
-        }
-
-        @media (max-height: 667px) {
-            .main-content {
-                padding: 15px;
-            }
-
-            .my-rank-card {
-                margin-bottom: 15px;
-            }
-
-            .category-tabs {
-                margin-bottom: 15px;
-            }
-        }
-
-        /* 横屏模式适配 */
-        @media (orientation: landscape) and (max-height: 500px) {
-            .my-rank-card {
-                padding: 12px 16px;
-                gap: 10px;
-            }
-
-            .my-avatar {
-                width: 50px;
-                height: 50px;
-            }
-
-            .my-rank-number {
-                font-size: 28px;
-            }
-
-            .rank-item {
-                padding: 10px 6px;
-            }
-        }
-    </style>
-</head>
-<body class="safe-area">
-    <!-- 动态星空背景 -->
-    <div class="star-field" id="starField"></div>
-    
-    <!-- 网络状态指示器 -->
-    <div class="network-status" id="networkStatus"></div>
-    
-    <!-- 移动端导航栏 -->
-    <div class="mobile-nav">
-        <div class="nav-content">
-            <button class="back-btn" onclick="goBack()">
-                ← 返回
-            </button>
-            <div class="nav-title">排行榜</div>
-            <button class="refresh-btn" onclick="refreshLeaderboard()" id="refreshBtn">
-                刷新
-            </button>
-        </div>
-    </div>
-
-    <!-- 主内容容器 -->
-    <div class="main-container">
-        <div class="main-content">
-            <!-- 分类标签 -->
-            <div class="category-tabs">
-                <button class="tab-btn active" data-category="overall">总排行</button>
-                <button class="tab-btn" data-category="weekly">本周</button>
-                <button class="tab-btn" data-category="daily">今日</button>
-            </div>
-
-            <!-- 我的排名卡片 -->
-            <div class="my-rank-card">
-                <div class="my-avatar">我</div>
-                <div class="my-info">
-                    <div class="my-name">深空战机指挥官</div>
-                    <div class="my-stats">
-                        <div class="stat-item">
-                            <div class="stat-value">68%</div>
-                            <div class="stat-label">胜率</div>
-                        </div>
-                        <div class="stat-item">
-                            <div class="stat-value">156</div>
-                            <div class="stat-label">总局数</div>
-                        </div>
-                        <div class="stat-item">
-                            <div class="stat-value">15</div>
-                            <div class="stat-label">等级</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="my-rank-number" id="myRank">15</div>
-            </div>
-
-            <!-- 排行榜列表 -->
-            <div class="leaderboard" id="leaderboard">
-                <!-- 通过JavaScript动态生成 -->
-            </div>
-        </div>
-    </div>
-
-    <script>
-        // 排行榜数据
-        const leaderboardData = {
-            overall: [
-                { id: 1, name: '深空霸主', level: 25, winRate: 89, totalGames: 234, avatar: '霸' },
-                { id: 2, name: '战机猎手', level: 23, winRate: 85, totalGames: 198, avatar: '猎' },
-                { id: 3, name: '银河司令', level: 22, winRate: 82, totalGames: 176, avatar: '司' },
-                { id: 4, name: '星际战神', level: 21, winRate: 79, totalGames: 165, avatar: '神' },
-                { id: 5, name: '虚空之王', level: 20, winRate: 77, totalGames: 152, avatar: '王' },
-                { id: 6, name: '量子战士', level: 19, winRate: 75, totalGames: 143, avatar: '量' },
-                { id: 7, name: '暗物质', level: 18, winRate: 73, totalGames: 134, avatar: '暗' },
-                { id: 8, name: '星云舰长', level: 17, winRate: 71, totalGames: 128, avatar: '星' },
-                { id: 9, name: '光速飞行', level: 16, winRate: 69, totalGames: 119, avatar: '光' },
-                { id: 10, name: '时空旅者', level: 15, winRate: 68, totalGames: 112, avatar: '时' }
-            ],
-            weekly: [
-                { id: 1, name: '本周新星', level: 18, winRate: 92, totalGames: 25, avatar: '星' },
-                { id: 2, name: '周末战神', level: 20, winRate: 88, totalGames: 32, avatar: '神' },
-                { id: 3, name: '快速崛起', level: 16, winRate: 85, totalGames: 27, avatar: '崛' },
-                { id: 4, name: '战术新人', level: 14, winRate: 81, totalGames: 21, avatar: '新' },
-                { id: 5, name: '深空霸主', level: 25, winRate: 78, totalGames: 45, avatar: '霸' }
-            ],
-            daily: [
-                { id: 1, name: '今日冠军', level: 15, winRate: 100, totalGames: 8, avatar: '冠' },
-                { id: 2, name: '连胜达人', level: 17, winRate: 95, totalGames: 12, avatar: '连' },
-                { id: 3, name: '精准打击', level: 19, winRate: 90, totalGames: 10, avatar: '精' },
-                { id: 4, name: '战术高手', level: 16, winRate: 87, totalGames: 15, avatar: '高' },
-                { id: 5, name: '银河司令', level: 18, winRate: 83, totalGames: 18, avatar: '司' }
-            ]
-        };
-
-        let currentCategory = 'overall';
-        let isLoading = false;
-        let isOnline = navigator.onLine;
-
-        // 应用初始化
-        function initApp() {
-            createStarField();
-            setupNetworkMonitoring();
-            setupTabs();
-            renderLeaderboard(currentCategory);
-            registerServiceWorker();
-        }
-
-        // 创建动态星空
-        function createStarField() {
-            const starField = document.getElementById('starField');
-            const numStars = 50;
-            
-            for (let i = 0; i < numStars; i++) {
-                const star = document.createElement('div');
-                star.className = 'star';
-                star.style.width = Math.random() * 3 + 'px';
-                star.style.height = star.style.width;
-                star.style.left = Math.random() * 100 + '%';
-                star.style.top = Math.random() * 100 + '%';
-                star.style.animationDelay = Math.random() * 3 + 's';
-                starField.appendChild(star);
-            }
-        }
-
-        // 网络状态监控
-        function setupNetworkMonitoring() {
-            const networkStatus = document.getElementById('networkStatus');
-            
-            function updateNetworkStatus() {
-                isOnline = navigator.onLine;
-                networkStatus.className = isOnline ? 'network-status' : 'network-status offline';
-            }
-            
-            window.addEventListener('online', updateNetworkStatus);
-            window.addEventListener('offline', updateNetworkStatus);
-            updateNetworkStatus();
-        }
-
-        // 注册Service Worker
-        function registerServiceWorker() {
-            if ('serviceWorker' in navigator) {
-                navigator.serviceWorker.register('data:text/javascript;base64,c2VsZi5hZGRFdmVudExpc3RlbmVyKCdpbnN0YWxsJywgZXZlbnQgPT4geyBzZWxmLnNraXBXYWl0aW5nKCk7IH0pOw==')
-                    .catch(() => console.log('Service Worker注册失败'));
-            }
-        }
-
-        // 触觉反馈
-        function triggerHapticFeedback(type = 'light') {
-            if ('vibrate' in navigator) {
-                const patterns = {
-                    light: [10],
-                    medium: [20],
-                    heavy: [30],
-                    success: [10, 50, 10],
-                    error: [50, 100, 50]
-                };
-                navigator.vibrate(patterns[type] || patterns.light);
-            }
-            
-            // 视觉反馈
-            document.body.classList.add('haptic-feedback');
-            setTimeout(() => document.body.classList.remove('haptic-feedback'), 100);
-        }
-
-        // 设置标签切换
-        function setupTabs() {
-            document.querySelectorAll('.tab-btn').forEach(btn => {
-                btn.addEventListener('click', function() {
-                    if (this.dataset.category === currentCategory || isLoading) return;
-                    
-                    triggerHapticFeedback('light');
-                    
-                    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
-                    this.classList.add('active');
-                    
-                    currentCategory = this.dataset.category;
-                    renderLeaderboard(currentCategory);
-                });
-            });
-        }
-
-        // 渲染排行榜
-        function renderLeaderboard(category) {
-            const leaderboard = document.getElementById('leaderboard');
-            const data = leaderboardData[category] || [];
-            
-            if (data.length === 0) {
-                leaderboard.innerHTML = `
-                    <div class="empty-state">
-                        <div class="empty-icon">🏆</div>
-                        <div class="empty-text">暂无排行榜数据</div>
-                    </div>
-                `;
-                return;
-            }
-
-            let html = '';
-            data.forEach((player, index) => {
-                const rank = index + 1;
-                let rankClass = '';
-                let trophyIcon = '';
-                
-                if (rank === 1) {
-                    rankClass = 'first';
-                    trophyIcon = '🥇';
-                } else if (rank === 2) {
-                    rankClass = 'second';
-                    trophyIcon = '🥈';
-                } else if (rank === 3) {
-                    rankClass = 'third';
-                    trophyIcon = '🥉';
-                } else if (rank <= 10) {
-                    trophyIcon = '🏆';
-                }
-
-                html += `
-                    <div class="rank-item">
-                        <div class="rank-number ${rankClass}">${rank}</div>
-                        <div class="player-avatar">${player.avatar}</div>
-                        <div class="player-info">
-                            <div class="player-name">${player.name}</div>
-                            <div class="player-level">等级 ${player.level}</div>
-                        </div>
-                        <div class="player-stats">
-                            <div class="win-rate">${player.winRate}%</div>
-                            <div class="total-games">${player.totalGames}局</div>
-                        </div>
-                        <div class="trophy-icon">${trophyIcon}</div>
-                    </div>
-                `;
-            });
-
-            leaderboard.innerHTML = html;
-            updateMyRank(category);
-        }
-
-        // 更新我的排名
-        function updateMyRank(category) {
-            const myRankElement = document.getElementById('myRank');
-            let myRank;
-            
-            switch(category) {
-                case 'overall':
-                    myRank = 15;
-                    break;
-                case 'weekly':
-                    myRank = 8;
-                    break;
-                case 'daily':
-                    myRank = 12;
-                    break;
-                default:
-                    myRank = 15;
-            }
-            
-            // 数字跳动动画
-            animateNumber(myRankElement, parseInt(myRankElement.textContent), myRank, 500);
-        }
-
-        // 数字动画
-        function animateNumber(element, start, end, duration) {
-            const startTime = performance.now();
-            const difference = end - start;
-            
-            function updateNumber(currentTime) {
-                const elapsed = currentTime - startTime;
-                const progress = Math.min(elapsed / duration, 1);
-                
-                // 使用缓动函数
-                const easeOutQuart = 1 - Math.pow(1 - progress, 4);
-                const currentValue = Math.round(start + difference * easeOutQuart);
-                
-                element.textContent = currentValue;
-                
-                if (progress < 1) {
-                    requestAnimationFrame(updateNumber);
-                }
-            }
-            
-            requestAnimationFrame(updateNumber);
-        }
-
-        // 刷新排行榜
-        function refreshLeaderboard() {
-            if (isLoading) return;
-            
-            if (!isOnline) {
-                showToast('网络连接断开，请检查网络');
-                triggerHapticFeedback('error');
-                return;
-            }
-            
-            isLoading = true;
-            const refreshBtn = document.getElementById('refreshBtn');
-            const leaderboard = document.getElementById('leaderboard');
-            
-            // 添加加载状态
-            refreshBtn.textContent = '刷新中...';
-            refreshBtn.disabled = true;
-            leaderboard.classList.add('updating');
-            triggerHapticFeedback('medium');
-            
-            // 模拟网络请求
-            setTimeout(() => {
-                // 模拟数据更新（随机调整胜率）
-                Object.keys(leaderboardData).forEach(category => {
-                    leaderboardData[category].forEach(player => {
-                        const change = Math.random() * 2 - 1; // -1 到 1 的随机变化
-                        player.winRate = Math.max(0, Math.min(100, Math.round(player.winRate + change)));
-                    });
-                    
-                    // 重新排序
-                    leaderboardData[category].sort((a, b) => b.winRate - a.winRate);
-                });
-                
-                // 重新渲染
-                renderLeaderboard(currentCategory);
-                
-                // 移除加载状态
-                refreshBtn.textContent = '刷新';
-                refreshBtn.disabled = false;
-                leaderboard.classList.remove('updating');
-                isLoading = false;
-                
-                // 显示刷新成功提示
-                showToast('排行榜已更新');
-                triggerHapticFeedback('success');
-            }, 1500);
-        }
-
-        // 显示Toast消息
-        function showToast(message) {
-            const toast = document.createElement('div');
-            toast.className = 'toast show';
-            toast.textContent = message;
-            
-            document.body.appendChild(toast);
-            
-            setTimeout(() => {
-                toast.classList.remove('show');
-                toast.classList.add('hide');
-                setTimeout(() => toast.remove(), 300);
-            }, 2000);
-        }
-
-        // 返回上一页
-        function goBack() {
-            triggerHapticFeedback('light');
-            if (document.referrer && document.referrer.includes('mobile_')) {
-                window.history.back();
-            } else {
-                window.location.href = 'mobile_main_menu_1.html';
-            }
-        }
-
-        // 防止双指缩放和滚动
-        document.addEventListener('touchmove', function(event) {
-            if (event.scale !== 1) {
-                event.preventDefault();
-            }
-        }, { passive: false });
-
-        document.addEventListener('gesturestart', function(event) {
-            event.preventDefault();
-        });
-
-        // 页面加载完成后初始化
-        document.addEventListener('DOMContentLoaded', function() {
-            initApp();
-        });
\ No newline at end of file
diff --git a/mobile_main_menu_1.html b/mobile_main_menu_1.html
deleted file mode 100644
index 5a8130a..0000000
--- a/mobile_main_menu_1.html
+++ /dev/null
@@ -1,1203 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>飞机大战 - 移动端高可用版</title>
-    <meta name="theme-color" content="#0f1419">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    
-    <style>
-        :root {
-            /* 深空科技主题色彩系统 */
-            --primary-color: #6366f1;
-            --primary-light: #8b5cf6;
-            --primary-dark: #4f46e5;
-            --secondary-color: #10b981;
-            --secondary-light: #34d399;
-            --accent-color: #f59e0b;
-            --accent-light: #fbbf24;
-            --danger-color: #ef4444;
-            
-            /* 移动端优化背景色系 */
-            --bg-primary: #0f1419;
-            --bg-secondary: #1a1d29;
-            --bg-tertiary: #252837;
-            --bg-elevated: #2d3142;
-            
-            /* 高对比度边框色系 */
-            --border-primary: #3d4159;
-            --border-secondary: #4a5073;
-            --border-highlight: #6366f1;
-            
-            /* 文字色系 */
-            --text-primary: #ffffff;
-            --text-secondary: #b4b7c9;
-            --text-tertiary: #9ca3af;
-            --text-disabled: #6b7280;
-            
-            /* 移动端触摸区域尺寸 */
-            --touch-target-min: 44px;
-            --safe-area-padding: 20px;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        html, body {
-            height: 100%;
-            overflow-x: hidden;
-            -webkit-text-size-adjust: 100%;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft YaHei UI", sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            touch-action: manipulation;
-        }
-
-        /* PWA 支持的安全区域适配 */
-        .safe-area {
-            padding-left: env(safe-area-inset-left);
-            padding-right: env(safe-area-inset-right);
-            padding-top: env(safe-area-inset-top);
-            padding-bottom: env(safe-area-inset-bottom);
-        }
-
-        /* 动态背景星空效果 */
-        .background-constellation {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            z-index: -1;
-        }
-
-        .star {
-            position: absolute;
-            width: 2px;
-            height: 2px;
-            background: var(--primary-color);
-            border-radius: 50%;
-            opacity: 0.6;
-            animation: twinkle 3s infinite ease-in-out;
-        }
-
-        .star:nth-child(2n) {
-            background: var(--accent-color);
-            animation-delay: 1s;
-        }
-
-        .star:nth-child(3n) {
-            background: var(--secondary-color);
-            animation-delay: 2s;
-        }
-
-        @keyframes twinkle {
-            0%, 100% { opacity: 0.3; transform: scale(0.8); }
-            50% { opacity: 1; transform: scale(1.2); }
-        }
-
-        /* 主容器 - 全屏布局 */
-        .app-container {
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-            position: relative;
-            z-index: 1;
-        }
-
-        /* 状态栏 */
-        .status-bar {
-            background: rgba(26, 29, 41, 0.95);
-            backdrop-filter: blur(20px);
-            padding: 8px var(--safe-area-padding);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-size: 12px;
-            color: var(--text-tertiary);
-            position: sticky;
-            top: 0;
-            z-index: 100;
-        }
-
-        .network-status {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .connection-dot {
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: var(--secondary-color);
-            animation: pulse 2s infinite;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.4; transform: scale(1.3); }
-        }
-
-        /* 主内容区域 */
-        .main-content {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            padding: var(--safe-area-padding);
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            position: relative;
-        }
-
-        /* 游戏Logo区域 */
-        .game-header {
-            margin-bottom: 40px;
-        }
-
-        .game-logo {
-            font-size: clamp(28px, 8vw, 36px);
-            font-weight: 800;
-            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--accent-color) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 12px;
-            letter-spacing: 2px;
-            animation: logoGlow 4s ease-in-out infinite alternate;
-        }
-
-        @keyframes logoGlow {
-            0% { filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.3)); }
-            100% { filter: drop-shadow(0 0 25px rgba(139, 92, 246, 0.6)); }
-        }
-
-        .game-subtitle {
-            font-size: 14px;
-            color: var(--text-secondary);
-            font-weight: 500;
-            letter-spacing: 1px;
-        }
-
-        /* 游戏特色展示 */
-        .game-preview {
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-primary);
-            border-radius: 16px;
-            padding: 24px;
-            margin: 30px 0;
-            max-width: 340px;
-            width: 100%;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .game-preview::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
-            animation: shimmer 3s infinite;
-        }
-
-        @keyframes shimmer {
-            0% { left: -100%; }
-            100% { left: 100%; }
-        }
-
-        .preview-title {
-            font-size: 16px;
-            font-weight: bold;
-            color: var(--text-primary);
-            margin-bottom: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-        }
-
-        .plane-icon {
-            font-size: 18px;
-            color: var(--accent-color);
-        }
-
-        /* 十字形飞机演示 */
-        .cross-plane-display {
-            font-family: 'Courier New', monospace;
-            font-size: 12px;
-            line-height: 1.1;
-            background: var(--bg-primary);
-            border: 1px solid var(--border-secondary);
-            border-radius: 12px;
-            padding: 16px;
-            margin: 16px 0;
-            position: relative;
-        }
-
-        .plane-structure {
-            color: var(--text-primary);
-            text-align: center;
-            position: relative;
-            z-index: 2;
-        }
-
-        .plane-head { color: var(--accent-color); }
-        .plane-wing { color: var(--primary-light); }
-        .plane-body { color: var(--primary-color); }
-        .plane-tail { color: var(--text-tertiary); }
-
-        .structure-legend {
-            font-size: 10px;
-            color: var(--text-tertiary);
-            margin-top: 12px;
-            line-height: 1.4;
-        }
-
-        /* 游戏规则简介 */
-        .game-rules-brief {
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.5;
-            margin-top: 16px;
-        }
-
-        .highlight-text {
-            color: var(--accent-light);
-            font-weight: 600;
-        }
-
-        /* 主操作按钮组 */
-        .action-buttons {
-            width: 100%;
-            max-width: 300px;
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            margin: 30px 0 20px 0;
-        }
-
-        .btn {
-            min-height: var(--touch-target-min);
-            border: none;
-            border-radius: 12px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            position: relative;
-            overflow: hidden;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            text-decoration: none;
-            user-select: none;
-            -webkit-tap-highlight-color: transparent;
-            padding: 0 24px;
-        }
-
-        /* 按钮触摸反馈效果 */
-        .btn::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 0;
-            height: 0;
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            transform: translate(-50%, -50%);
-            transition: width 0.3s, height 0.3s;
-        }
-
-        .btn:active::before {
-            width: 100%;
-            height: 100%;
-        }
-
-        .btn-primary {
-            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
-            color: #ffffff;
-            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
-        }
-
-        .btn-primary:hover, .btn-primary:focus {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
-        }
-
-        .btn-primary:active {
-            transform: translateY(0);
-        }
-
-        .btn-success {
-            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
-            color: #ffffff;
-            box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
-        }
-
-        .btn-success:hover, .btn-success:focus {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
-        }
-
-        .btn-secondary {
-            background: rgba(99, 102, 241, 0.15);
-            color: var(--primary-color);
-            border: 1px solid var(--primary-color);
-            backdrop-filter: blur(10px);
-        }
-
-        .btn-secondary:hover, .btn-secondary:focus {
-            background: rgba(99, 102, 241, 0.25);
-            transform: translateY(-1px);
-        }
-
-        /* 快速操作区域 */
-        .quick-actions {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 12px;
-            width: 100%;
-            max-width: 300px;
-            margin-top: 20px;
-        }
-
-        .quick-btn {
-            min-height: 40px;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border-primary);
-            border-radius: 10px;
-            color: var(--text-secondary);
-            font-size: 14px;
-            font-weight: 500;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            text-decoration: none;
-        }
-
-        .quick-btn:hover, .quick-btn:focus {
-            background: var(--bg-elevated);
-            border-color: var(--border-highlight);
-            color: var(--text-primary);
-            transform: translateY(-1px);
-        }
-
-        /* 底部信息栏 */
-        .bottom-info {
-            background: rgba(26, 29, 41, 0.8);
-            backdrop-filter: blur(20px);
-            padding: 16px var(--safe-area-padding);
-            border-top: 1px solid var(--border-primary);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-size: 12px;
-            color: var(--text-tertiary);
-        }
-
-        .offline-indicator {
-            display: none;
-            color: var(--danger-color);
-            font-weight: 500;
-        }
-
-        .offline .offline-indicator {
-            display: block;
-        }
-
-        .offline .connection-dot {
-            background: var(--danger-color);
-            animation: none;
-        }
-
-        /* 加载状态 */
-        .loading-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(15, 20, 25, 0.95);
-            backdrop-filter: blur(10px);
-            display: none;
-            align-items: center;
-            justify-content: center;
-            z-index: 1000;
-        }
-
-        .loading-spinner {
-            width: 40px;
-            height: 40px;
-            border: 3px solid rgba(99, 102, 241, 0.3);
-            border-top: 3px solid var(--primary-color);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-
-        .loading-text {
-            margin-top: 16px;
-            color: var(--text-secondary);
-            font-size: 14px;
-        }
-
-        /* 响应式设计增强 */
-        @media (max-width: 375px) {
-            .game-preview {
-                padding: 20px;
-                margin: 20px 0;
-            }
-            
-            .action-buttons {
-                max-width: 280px;
-                gap: 14px;
-            }
-            
-            .btn {
-                font-size: 15px;
-                min-height: 42px;
-            }
-        }
-
-        @media (max-height: 640px) {
-            .main-content {
-                justify-content: flex-start;
-                padding-top: 20px;
-            }
-            
-            .game-header {
-                margin-bottom: 20px;
-            }
-            
-            .game-preview {
-                margin: 20px 0;
-                padding: 20px;
-            }
-        }
-
-        /* 高对比度支持 */
-        @media (prefers-contrast: high) {
-            :root {
-                --text-primary: #ffffff;
-                --text-secondary: #e5e5e5;
-                --border-primary: #ffffff;
-                --bg-secondary: #000000;
-            }
-        }
-
-        /* 减少动画偏好 */
-        @media (prefers-reduced-motion: reduce) {
-            *, *::before, *::after {
-                animation-duration: 0.01ms !important;
-                animation-iteration-count: 1 !important;
-                transition-duration: 0.01ms !important;
-            }
-        }
-
-        /* 暗色模式强制支持 */
-        @media (prefers-color-scheme: dark) {
-            body {
-                background: var(--bg-primary);
-                color: var(--text-primary);
-            }
-        }
-    </style>
-</head>
-<body class="safe-area">
-    <!-- 动态星空背景 -->
-    <div class="background-constellation" id="starField"></div>
-    
-    <!-- 加载遮罩 -->
-    <div class="loading-overlay" id="loadingOverlay">
-        <div>
-            <div class="loading-spinner"></div>
-            <div class="loading-text">正在启动游戏...</div>
-        </div>
-    </div>
-
-    <div class="app-container">
-        <!-- 状态栏 -->
-        <header class="status-bar">
-            <div class="network-status">
-                <div class="connection-dot"></div>
-                <span id="networkStatus">在线</span>
-                <span class="offline-indicator">离线模式</span>
-            </div>
-            <div class="app-version">v2.0.0</div>
-        </header>
-
-        <!-- 主内容 -->
-        <main class="main-content">
-            <header class="game-header">
-                <h1 class="game-logo">飞机大战</h1>
-                <p class="game-subtitle">十字飞机 • 战略博弈</p>
-            </header>
-
-            <section class="game-preview">
-                <h2 class="preview-title">
-                    <span class="plane-icon">✈</span>
-                    游戏特色
-                </h2>
-                
-                <div class="cross-plane-display">
-                    <div class="plane-structure">
-                        十字形飞机结构 (11格):<br><br>
-                        <span class="plane-head">　　●　　</span><br>
-                        <span class="plane-wing">　◆</span><span class="plane-body">■</span><span class="plane-wing">◆　</span><br>
-                        <span class="plane-body">　　■　　</span><br>
-                        <span class="plane-wing">　◆</span><span class="plane-body">■</span><span class="plane-wing">◆　</span><br>
-                        <span class="plane-tail">　　▲　　</span><br>
-                        <span class="plane-tail">　　▲　　</span>
-                    </div>
-                    <div class="structure-legend">
-                        ● 机头 (击中摧毁) | ■ 机身 | ◆ 机翼 | ▲ 机尾
-                    </div>
-                </div>
-                
-                <div class="game-rules-brief">
-                    在 <span class="highlight-text">10×10 网格</span> 中布置 <span class="highlight-text">3架飞机</span><br>
-                    轮流攻击寻找敌机，<span class="highlight-text">击中机头</span> 即可摧毁整架飞机
-                </div>
-            </section>
-
-            <div class="action-buttons">
-                <button class="btn btn-primary" id="startGameBtn">
-                    <span>🎮</span>
-                    开始游戏
-                </button>
-                
-                <button class="btn btn-success" id="quickMatchBtn">
-                    <span>⚡</span>
-                    快速匹配
-                </button>
-                
-                <button class="btn btn-secondary" id="tutorialBtn">
-                    <span>📖</span>
-                    游戏教程
-                </button>
-            </div>
-
-            <div class="quick-actions">
-                <a href="#" class="quick-btn" id="rankingBtn">
-                    <span>🏆</span>
-                    排行榜
-                </a>
-                <a href="#" class="quick-btn" id="settingsBtn">
-                    <span>⚙️</span>
-                    设置
-                </a>
-            </div>
-        </main>
-
-        <!-- 底部信息栏 -->
-        <footer class="bottom-info">
-            <div class="game-info">移动端优化版 | 支持离线游戏</div>
-            <div class="build-info">Build 2025.03</div>
-        </footer>
-    </div>
-
-    <script>
-        // 应用状态管理
-        class MobileGameApp {
-            constructor() {
-                this.isOnline = navigator.onLine;
-                this.isLoading = false;
-                this.touchStartTime = 0;
-                
-                this.initializeApp();
-                this.bindEvents();
-                this.createStarField();
-                this.checkNetworkStatus();
-            }
-
-            initializeApp() {
-                // 防止双击缩放
-                document.addEventListener('touchstart', this.handleTouchStart.bind(this), {passive: false});
-                document.addEventListener('touchend', this.handleTouchEnd.bind(this), {passive: false});
-                
-                // PWA 支持检测
-                if ('serviceWorker' in navigator) {
-                    this.registerServiceWorker();
-                }
-                
-                // 页面可见性变化处理
-                document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
-                
-                console.log('🎮 移动端飞机大战应用已启动');
-            }
-
-            bindEvents() {
-                // 主要按钮事件
-                document.getElementById('startGameBtn').addEventListener('click', this.startGame.bind(this));
-                document.getElementById('quickMatchBtn').addEventListener('click', this.quickMatch.bind(this));
-                document.getElementById('tutorialBtn').addEventListener('click', this.showTutorial.bind(this));
-                document.getElementById('rankingBtn').addEventListener('click', this.showRanking.bind(this));
-                document.getElementById('settingsBtn').addEventListener('click', this.showSettings.bind(this));
-                
-                // 网络状态监听
-                window.addEventListener('online', this.handleOnline.bind(this));
-                window.addEventListener('offline', this.handleOffline.bind(this));
-                
-                // 内存警告处理
-                if ('memory' in performance) {
-                    this.monitorMemoryUsage();
-                }
-            }
-
-            // 触摸事件处理 - 防止意外操作
-            handleTouchStart(e) {
-                this.touchStartTime = Date.now();
-                
-                // 防止多点触控导致的缩放
-                if (e.touches.length > 1) {
-                    e.preventDefault();
-                }
-            }
-
-            handleTouchEnd(e) {
-                const touchDuration = Date.now() - this.touchStartTime;
-                
-                // 处理长按事件
-                if (touchDuration > 500) {
-                    this.handleLongPress(e);
-                }
-            }
-
-            handleLongPress(e) {
-                // 长按反馈
-                if (e.target.classList.contains('btn')) {
-                    this.showContextMenu(e.target);
-                }
-            }
-
-            // 游戏功能实现
-            async startGame() {
-                this.showLoading('正在准备游戏...');
-                
-                try {
-                    // 模拟游戏加载过程
-                    await this.delay(1200);
-                    
-                    // 检查设备性能
-                    const deviceInfo = this.getDeviceInfo();
-                    console.log('设备信息:', deviceInfo);
-                    
-                    // 跳转到飞机放置界面
-                    this.navigateToPlacement();
-                    
-                } catch (error) {
-                    this.handleError('游戏启动失败', error);
-                } finally {
-                    this.hideLoading();
-                }
-            }
-
-            async quickMatch() {
-                if (!this.isOnline) {
-                    this.showToast('需要网络连接才能进行快速匹配', 'warning');
-                    return;
-                }
-                
-                this.showLoading('正在匹配对手...');
-                
-                try {
-                    // 模拟匹配过程
-                    await this.delay(2000);
-                    
-                    // 模拟匹配成功
-                    this.showToast('匹配成功！即将开始对战', 'success');
-                    await this.delay(800);
-                    
-                    this.navigateToPlacement();
-                    
-                } catch (error) {
-                    this.handleError('匹配失败', error);
-                } finally {
-                    this.hideLoading();
-                }
-            }
-
-            showTutorial() {
-                // 创建教程弹窗
-                const tutorialHTML = `
-                    <div class="modal-overlay" id="tutorialModal">
-                        <div class="modal-content">
-                            <div class="modal-header">
-                                <h3>🎯 游戏教程</h3>
-                                <button class="modal-close">&times;</button>
-                            </div>
-                            <div class="modal-body">
-                                <div class="tutorial-step">
-                                    <h4>📋 基本规则</h4>
-                                    <ul>
-                                        <li>游戏使用10×10网格</li>
-                                        <li>每位玩家放置3架十字形飞机</li>
-                                        <li>每架飞机占据11个格子</li>
-                                        <li>飞机可以朝4个方向放置</li>
-                                    </ul>
-                                </div>
-                                
-                                <div class="tutorial-step">
-                                    <h4>✈️ 飞机结构</h4>
-                                    <div class="plane-demo">
-                                        <div style="font-family: monospace; text-align: center; font-size: 12px; line-height: 1.2;">
-                                            <span style="color: #f59e0b;">　●</span> ← 机头（关键目标）<br>
-                                            <span style="color: #8b5cf6;">◆■◆</span> ← 机翼+机身<br>
-                                            <span style="color: #6366f1;">　■</span> ← 机身<br>
-                                            <span style="color: #8b5cf6;">◆■◆</span> ← 机翼+机身<br>
-                                            <span style="color: #6b7280;">　▲</span> ← 机尾<br>
-                                            <span style="color: #6b7280;">　▲</span> ← 机尾
-                                        </div>
-                                    </div>
-                                </div>
-                                
-                                <div class="tutorial-step">
-                                    <h4>🎮 游戏流程</h4>
-                                    <ol>
-                                        <li><strong>布置阶段:</strong> 拖拽放置3架飞机</li>
-                                        <li><strong>战斗阶段:</strong> 轮流点击攻击目标</li>
-                                        <li><strong>胜利条件:</strong> 摧毁敌方3架飞机</li>
-                                    </ol>
-                                </div>
-                                
-                                <div class="tutorial-step">
-                                    <h4>💡 策略提示</h4>
-                                    <ul>
-                                        <li>机头是唯一的致命弱点</li>
-                                        <li>通过命中信息推断飞机位置</li>
-                                        <li>合理布局避免飞机被发现</li>
-                                        <li>优先攻击可能的机头位置</li>
-                                    </ul>
-                                </div>
-                            </div>
-                            <div class="modal-footer">
-                                <button class="btn btn-primary" onclick="this.closest('.modal-overlay').remove()">
-                                    开始游戏
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                `;
-                
-                this.showModal(tutorialHTML);
-            }
-
-            showRanking() {
-                window.location.href = 'mobile_leaderboard_1.html';
-            }
-
-            showSettings() {
-                const settingsHTML = `
-                    <div class="modal-overlay" id="settingsModal">
-                        <div class="modal-content">
-                            <div class="modal-header">
-                                <h3>⚙️ 游戏设置</h3>
-                                <button class="modal-close">&times;</button>
-                            </div>
-                            <div class="modal-body">
-                                <div class="setting-group">
-                                    <h4>🎨 界面设置</h4>
-                                    <div class="setting-item">
-                                        <label>
-                                            <input type="checkbox" checked> 显示网格坐标
-                                        </label>
-                                    </div>
-                                    <div class="setting-item">
-                                        <label>
-                                            <input type="checkbox" checked> 启用触摸振动
-                                        </label>
-                                    </div>
-                                </div>
-                                
-                                <div class="setting-group">
-                                    <h4>🎮 游戏设置</h4>
-                                    <div class="setting-item">
-                                        <label>
-                                            <select>
-                                                <option>30秒</option>
-                                                <option selected>60秒</option>
-                                                <option>90秒</option>
-                                            </select>
-                                            回合时间限制
-                                        </label>
-                                    </div>
-                                    <div class="setting-item">
-                                        <label>
-                                            <input type="checkbox" checked> 启用攻击动画
-                                        </label>
-                                    </div>
-                                </div>
-                                
-                                <div class="setting-group">
-                                    <h4>💾 数据管理</h4>
-                                    <div class="setting-item">
-                                        <button class="btn btn-secondary" style="width: 100%; margin-top: 8px;">清除游戏记录</button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="modal-footer">
-                                <button class="btn btn-primary" onclick="this.closest('.modal-overlay').remove()">
-                                    保存设置
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                `;
-                
-                this.showModal(settingsHTML);
-            }
-
-            // 工具方法
-            navigateToPlacement() {
-                // 这里应该导航到飞机放置界面
-                window.location.href = 'mobile_plane_placement_1.html';
-            }
-
-            showLoading(message = '加载中...') {
-                this.isLoading = true;
-                const overlay = document.getElementById('loadingOverlay');
-                const text = overlay.querySelector('.loading-text');
-                text.textContent = message;
-                overlay.style.display = 'flex';
-            }
-
-            hideLoading() {
-                this.isLoading = false;
-                const overlay = document.getElementById('loadingOverlay');
-                overlay.style.display = 'none';
-            }
-
-            showToast(message, type = 'info') {
-                const toast = document.createElement('div');
-                toast.className = `toast toast-${type}`;
-                toast.textContent = message;
-                
-                // 添加toast样式到文档
-                if (!document.querySelector('#toastStyles')) {
-                    const style = document.createElement('style');
-                    style.id = 'toastStyles';
-                    style.textContent = `
-                        .toast {
-                            position: fixed;
-                            top: 80px;
-                            left: 50%;
-                            transform: translateX(-50%);
-                            background: var(--bg-elevated);
-                            color: var(--text-primary);
-                            padding: 12px 20px;
-                            border-radius: 8px;
-                            border: 1px solid var(--border-primary);
-                            z-index: 1001;
-                            animation: toastSlide 0.3s ease-out;
-                            max-width: 300px;
-                            text-align: center;
-                            font-size: 14px;
-                        }
-                        .toast-success { border-color: var(--secondary-color); }
-                        .toast-warning { border-color: var(--accent-color); }
-                        .toast-error { border-color: var(--danger-color); }
-                        @keyframes toastSlide {
-                            0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
-                            100% { opacity: 1; transform: translateX(-50%) translateY(0); }
-                        }
-                    `;
-                    document.head.appendChild(style);
-                }
-                
-                document.body.appendChild(toast);
-                
-                setTimeout(() => {
-                    toast.remove();
-                }, 3000);
-            }
-
-            showModal(htmlContent) {
-                // 添加模态框样式
-                if (!document.querySelector('#modalStyles')) {
-                    const style = document.createElement('style');
-                    style.id = 'modalStyles';
-                    style.textContent = `
-                        .modal-overlay {
-                            position: fixed;
-                            top: 0;
-                            left: 0;
-                            width: 100%;
-                            height: 100%;
-                            background: rgba(0, 0, 0, 0.8);
-                            backdrop-filter: blur(10px);
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            z-index: 1000;
-                            padding: 20px;
-                            animation: modalFadeIn 0.3s ease-out;
-                        }
-                        .modal-content {
-                            background: var(--bg-secondary);
-                            border: 1px solid var(--border-primary);
-                            border-radius: 16px;
-                            max-width: 400px;
-                            width: 100%;
-                            max-height: 80vh;
-                            overflow-y: auto;
-                            animation: modalSlideIn 0.3s ease-out;
-                        }
-                        .modal-header {
-                            padding: 20px 20px 0;
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-                        }
-                        .modal-header h3 {
-                            color: var(--text-primary);
-                            font-size: 18px;
-                            margin: 0;
-                        }
-                        .modal-close {
-                            background: none;
-                            border: none;
-                            color: var(--text-secondary);
-                            font-size: 24px;
-                            cursor: pointer;
-                            padding: 0;
-                            width: 30px;
-                            height: 30px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                        }
-                        .modal-body {
-                            padding: 20px;
-                        }
-                        .modal-footer {
-                            padding: 0 20px 20px;
-                        }
-                        .tutorial-step {
-                            margin-bottom: 24px;
-                        }
-                        .tutorial-step h4 {
-                            color: var(--primary-color);
-                            margin-bottom: 12px;
-                            font-size: 16px;
-                        }
-                        .tutorial-step ul, .tutorial-step ol {
-                            color: var(--text-secondary);
-                            font-size: 14px;
-                            line-height: 1.6;
-                            padding-left: 20px;
-                        }
-                        .tutorial-step li {
-                            margin-bottom: 6px;
-                        }
-                        .plane-demo {
-                            background: var(--bg-primary);
-                            border: 1px solid var(--border-secondary);
-                            border-radius: 8px;
-                            padding: 12px;
-                            margin: 12px 0;
-                        }
-                        .setting-group {
-                            margin-bottom: 20px;
-                        }
-                        .setting-group h4 {
-                            color: var(--primary-color);
-                            margin-bottom: 12px;
-                            font-size: 16px;
-                        }
-                        .setting-item {
-                            margin-bottom: 12px;
-                        }
-                        .setting-item label {
-                            display: flex;
-                            align-items: center;
-                            gap: 8px;
-                            color: var(--text-secondary);
-                            font-size: 14px;
-                            cursor: pointer;
-                        }
-                        .setting-item select {
-                            background: var(--bg-tertiary);
-                            border: 1px solid var(--border-primary);
-                            border-radius: 6px;
-                            color: var(--text-primary);
-                            padding: 4px 8px;
-                            font-size: 14px;
-                        }
-                        @keyframes modalFadeIn {
-                            0% { opacity: 0; }
-                            100% { opacity: 1; }
-                        }
-                        @keyframes modalSlideIn {
-                            0% { transform: translateY(30px) scale(0.9); opacity: 0; }
-                            100% { transform: translateY(0) scale(1); opacity: 1; }
-                        }
-                    `;
-                    document.head.appendChild(style);
-                }
-                
-                const modalContainer = document.createElement('div');
-                modalContainer.innerHTML = htmlContent;
-                document.body.appendChild(modalContainer.firstElementChild);
-                
-                // 绑定关闭事件
-                const modal = document.querySelector('.modal-overlay:last-child');
-                const closeBtn = modal.querySelector('.modal-close');
-                
-                closeBtn.addEventListener('click', () => modal.remove());
-                modal.addEventListener('click', (e) => {
-                    if (e.target === modal) modal.remove();
-                });
-            }
-
-            showContextMenu(element) {
-                // 长按上下文菜单功能（预留）
-                if (navigator.vibrate) {
-                    navigator.vibrate(50);
-                }
-            }
-
-            createStarField() {
-                const starField = document.getElementById('starField');
-                const starCount = Math.floor(Math.random() * 50) + 30;
-                
-                for (let i = 0; i < starCount; i++) {
-                    const star = document.createElement('div');
-                    star.className = 'star';
-                    star.style.left = Math.random() * 100 + '%';
-                    star.style.top = Math.random() * 100 + '%';
-                    star.style.animationDelay = Math.random() * 3 + 's';
-                    starField.appendChild(star);
-                }
-            }
-
-            checkNetworkStatus() {
-                const updateStatus = () => {
-                    this.isOnline = navigator.onLine;
-                    const statusText = document.getElementById('networkStatus');
-                    const body = document.body;
-                    
-                    if (this.isOnline) {
-                        statusText.textContent = '在线';
-                        body.classList.remove('offline');
-                    } else {
-                        statusText.textContent = '离线';
-                        body.classList.add('offline');
-                    }
-                };
-                
-                updateStatus();
-                setInterval(updateStatus, 5000);
-            }
-
-            handleOnline() {
-                this.isOnline = true;
-                this.showToast('网络连接已恢复', 'success');
-                this.checkNetworkStatus();
-            }
-
-            handleOffline() {
-                this.isOnline = false;
-                this.showToast('网络连接已断开，切换到离线模式', 'warning');
-                this.checkNetworkStatus();
-            }
-
-            handleVisibilityChange() {
-                if (document.hidden) {
-                    // 应用进入后台
-                    console.log('应用进入后台');
-                } else {
-                    // 应用回到前台
-                    console.log('应用回到前台');
-                    this.checkNetworkStatus();
-                }
-            }
-
-            getDeviceInfo() {
-                return {
-                    userAgent: navigator.userAgent,
-                    platform: navigator.platform,
-                    memory: navigator.deviceMemory || 'unknown',
-                    cores: navigator.hardwareConcurrency || 'unknown',
-                    connection: navigator.connection?.effectiveType || 'unknown',
-                    viewport: {
-                        width: window.innerWidth,
-                        height: window.innerHeight
-                    }
-                };
-            }
-
-            monitorMemoryUsage() {
-                if ('memory' in performance) {
-                    setInterval(() => {
-                        const memory = performance.memory;
-                        if (memory.usedJSHeapSize / memory.jsHeapSizeLimit > 0.9) {
-                            console.warn('内存使用率过高:', (memory.usedJSHeapSize / memory.jsHeapSizeLimit * 100).toFixed(1) + '%');
-                        }
-                    }, 10000);
-                }
-            }
-
-            async registerServiceWorker() {
-                try {
-                    // 这里可以注册Service Worker实现离线功能
-                    console.log('Service Worker 支持可用');
-                } catch (error) {
-                    console.warn('Service Worker 注册失败:', error);
-                }
-            }
-
-            handleError(message, error) {
-                console.error(message, error);
-                this.showToast(message, 'error');
-            }
-
-            delay(ms) {
-                return new Promise(resolve => setTimeout(resolve, ms));
-            }
-        }
-
-        // 应用启动
-        document.addEventListener('DOMContentLoaded', () => {
-            new MobileGameApp();
-        });
-
-        // 页面加载完成动画
-        window.addEventListener('load', () => {
-            const appContainer = document.querySelector('.app-container');
-            appContainer.style.opacity = '0';
-            appContainer.style.transform = 'translateY(20px)';
-            appContainer.style.transition = 'all 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
-            
-            setTimeout(() => {
-                appContainer.style.opacity = '1';
-                appContainer.style.transform = 'translateY(0)';
-            }, 100);
-        });
-    </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/mobile_prototypes_integration.md b/mobile_prototypes_integration.md
deleted file mode 100644
index 1be998b..0000000
--- a/mobile_prototypes_integration.md
+++ /dev/null
@@ -1,209 +0,0 @@
-# 深空战机移动端原型整合文档
-
-## 📱 移动端高可用性原型系列
-
-本文档描述了为深空战机游戏创建的完整移动端原型系列，包括四个核心界面的高可用性移动端优化版本。
-
-## 🎯 项目概述
-
-**项目名称**: 深空战机移动端原型  
-**设计理念**: 高可用性、PWA支持、移动优先  
-**技术栈**: HTML5 + CSS3 + JavaScript (原生)  
-**兼容性**: iOS Safari 12+, Android Chrome 70+  
-
-## 📋 原型清单
-
-### 1. 主菜单界面 - [`mobile_main_menu_1.html`](mobile_main_menu_1.html)
-**功能特性**:
-- 🌟 动态星空背景动画
-- 🔌 PWA离线支持
-- 📶 网络状态监控
-- 🔊 音效切换控制
-- 📱 安全区域适配(刘海屏)
-- ⚡ 触觉反馈支持
-
-**核心导航**:
-- 开始游戏 → 飞机放置界面
-- 排行榜 → 排行榜界面
-- 设置面板(音效/教程)
-- 关于信息
-
-### 2. 飞机放置界面 - [`mobile_plane_placement_1.html`](mobile_plane_placement_1.html)
-**功能特性**:
-- ✈️ 十字形飞机拖拽放置
-- 🔄 四方向旋转功能
-- ✅ 实时碰撞检测
-- 🎯 智能自动布置
-- 📏 10x10坐标网格
-- 🖱️ 触屏优化交互
-
-**游戏机制**:
-- 支持放置3架十字形战机
-- 每架战机包含11个格子(头1+翼4+身4+尾2)
-- 完整的边界检查和重叠验证
-- 数据本地存储用于战斗界面调用
-
-### 3. 战斗界面 - [`mobile_battle_1.html`](mobile_battle_1.html)  
-**功能特性**:
-- ⚔️ 双棋盘战斗系统
-- ⏱️ 30秒回合计时器
-- 🎯 攻击动画效果
-- 📊 实时战斗统计
-- 🤖 AI对手模拟
-- 💥 击中机头摧毁整机
-
-**移动优化**:
-- 垂直布局适配小屏幕
-- 触屏优化的攻击交互
-- 视觉/触觉双重反馈
-- 游戏结束弹窗及统计
-
-### 4. 排行榜界面 - [`mobile_leaderboard_1.html`](mobile_leaderboard_1.html)
-**功能特性**:
-- 🏆 三级排行榜(总/周/日)
-- 👤 个人排名卡片
-- 🥇 前三名特殊样式
-- 🔄 下拉刷新数据
-- 📈 数字跳动动画
-- 🎖️ 奖杯图标系统
-
-**数据展示**:
-- 玩家头像、昵称、等级
-- 胜率、总局数统计
-- 排名变化动画效果
-- 空状态和加载状态
-
-## 🔧 技术架构特性
-
-### PWA支持
-- **离线缓存**: Service Worker自动缓存
-- **安装支持**: Add to Home Screen
-- **网络监控**: 实时在线/离线状态
-- **数据持久**: LocalStorage游戏数据
-
-### 移动端优化
-- **响应式设计**: 适配各种屏幕尺寸
-- **触屏交互**: 44px最小触控区域
-- **手势支持**: 防双指缩放和误触
-- **性能优化**: 硬件加速动画
-
-### 高可用性特性
-- **安全区域**: 支持刘海屏和圆角屏
-- **网络容错**: 离线模式和错误处理
-- **触觉反馈**: 原生震动API支持
-- **可访问性**: 语义化HTML结构
-
-### 视觉设计系统
-- **深空主题**: 星空背景+科技蓝色调
-- **渐变设计**: 高质量CSS渐变效果  
-- **动画系统**: 流畅的页面转场和交互
-- **一致性**: 统一的组件和交互模式
-
-## 🔗 页面导航流程
-
-```
-主菜单 (mobile_main_menu_1.html)
-├── 开始游戏 → 飞机放置 (mobile_plane_placement_1.html)
-│   └── 开始战斗 → 战斗界面 (mobile_battle_1.html)
-│       └── 游戏结束 → 返回主菜单 or 再玩一局
-├── 排行榜 → 排行榜界面 (mobile_leaderboard_1.html)
-│   └── 返回 → 主菜单
-├── 设置面板 → 音效/教程控制
-└── 关于信息 → 游戏说明
-```
-
-## 📊 数据流管理
-
-### LocalStorage数据结构
-```javascript
-// 玩家飞机布置数据
-playerPlanes: [
-  {
-    id: 1,
-    center: [row, col],
-    direction: 'UP|DOWN|LEFT|RIGHT',
-    positions: [[r1,c1], [r2,c2], ...],
-    headPosition: [row, col],
-    isDestroyed: false
-  },
-  // ... 更多飞机
-]
-
-// 游戏设置
-gameSettings: {
-  soundEnabled: true,
-  musicEnabled: true,
-  hapticEnabled: true
-}
-
-// 玩家统计
-playerStats: {
-  totalGames: 156,
-  wins: 106,
-  winRate: 68,
-  level: 15
-}
-```
-
-## 🎮 游戏规则实现
-
-### 十字形飞机结构
-- **机头**(1格): 被击中时整机摧毁
-- **机翼**(4格): 左右各2格，呈十字形
-- **机身**(4格): 中心轴线垂直分布  
-- **机尾**(2格): 尾部扇形分布
-
-### 战斗机制
-- **攻击规则**: 每回合攻击一个格子
-- **胜利条件**: 率先摧毁对方3架飞机
-- **摧毁判定**: 击中机头即摧毁整机
-- **时间限制**: 30秒回合计时
-
-## 🔍 质量保证检查清单
-
-### 功能测试
-- [x] 所有页面JavaScript无语法错误
-- [x] 页面间导航流程完整
-- [x] 数据存储和读取正常
-- [x] 触屏交互响应灵敏
-- [x] 网络状态监控有效
-
-### 兼容性测试  
-- [x] iOS Safari刘海屏适配
-- [x] Android Chrome手势支持
-- [x] 横竖屏切换适配
-- [x] 不同分辨率响应式
-- [x] PWA功能离线可用
-
-### 性能优化
-- [x] CSS动画硬件加速
-- [x] JavaScript代码优化
-- [x] 图片和资源压缩
-- [x] 首屏加载时间<3秒
-- [x] 交互延迟<100ms
-
-## 🚀 部署建议
-
-### 生产环境优化
-1. **资源压缩**: HTML/CSS/JS代码压缩
-2. **图片优化**: WebP格式+响应式图片
-3. **CDN加速**: 静态资源CDN部署
-4. **HTTPS部署**: PWA功能需要HTTPS
-5. **缓存策略**: 合理的Cache-Control设置
-
-### 监控指标
-- **页面加载时间**: 目标<3秒
-- **首次内容绘制**: 目标<1.5秒  
-- **累计布局偏移**: 目标<0.1
-- **首次输入延迟**: 目标<100ms
-- **离线可用率**: 目标>95%
-
-## 📞 技术支持
-
-本原型系列为深空战机移动端游戏的完整高保真原型，支持：
-- 完整的游戏流程演示
-- 移动设备原生体验
-- PWA离线功能验证
-- 高可用性特性展示
-
-所有原型均经过移动端实机测试，确保在主流移动设备上具备良好的用户体验和稳定性。
\ No newline at end of file
diff --git a/准备页面-终稿.html b/准备页面-终稿.html
deleted file mode 100644
index 67ecd85..0000000
--- a/准备页面-终稿.html
+++ /dev/null
@@ -1,630 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>飞机布置 - 新版</title>
-    <meta name="theme-color" content="#0f1419">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    
-    <style>
-        :root {
-            --primary-color: #6366f1;
-            --primary-light: #8b5cf6;
-            --accent-color: #f59e0b;
-            --danger-color: #ef4444;
-            --success-color: #10b981;
-            --bg-primary: #0f1419;
-            --bg-secondary: #1a1d29;
-            --bg-tertiary: #252837;
-            --border-primary: #3d4159;
-            --border-secondary: #4a5073;
-            --border-highlight: #6366f1;
-            --text-primary: #ffffff;
-            --text-secondary: #b4b7c9;
-            --text-tertiary: #9ca3af;
-            --text-disabled: #6b7280;
-            --cell-size: min(8.5vw, 38px);
-            --safe-area-padding: 16px;
-        }
-
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        html, body { height: 100%; overflow: hidden; -webkit-user-select: none; user-select: none; }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft YaHei UI", sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            -webkit-font-smoothing: antialiased;
-            touch-action: none;
-            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
-        }
-
-        .app-container { display: flex; flex-direction: column; height: 100%; }
-
-        .top-nav {
-            padding: 12px var(--safe-area-padding);
-            border-bottom: 1px solid var(--border-primary);
-            text-align: center;
-            font-weight: 600;
-            background: rgba(15, 20, 25, 0.8);
-            backdrop-filter: blur(10px);
-        }
-
-        .main-content {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
-            padding: var(--safe-area-padding);
-        }
-
-        .board-wrapper { position: relative; }
-        .game-board {
-            display: grid;
-            grid-template-columns: repeat(10, var(--cell-size));
-            grid-template-rows: repeat(10, var(--cell-size));
-            gap: 1px;
-            background: var(--border-primary);
-            border: 1px solid var(--border-primary);
-        }
-        .board-cell {
-            background: var(--bg-secondary);
-            transition: background-color 0.2s;
-        }
-        .board-cell:active { background-color: var(--border-highlight); }
-        .board-cell.plane-part { background-color: var(--primary-color); }
-        .board-cell.plane-head { background-color: var(--accent-color); }
-        .board-cell.plane-body { background-color: var(--primary-light); }
-        .board-cell.plane-wing { background-color: var(--primary-light); }
-        .board-cell.plane-tail { background-color: var(--primary-color); }
-        .board-cell.selected { box-shadow: inset 0 0 0 2px var(--success-color); z-index: 1; }
-        
-        .col-label, .row-label {
-            position: absolute;
-            font-size: 10px;
-            color: var(--text-tertiary);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .col-label { top: -20px; height: 15px; width: var(--cell-size); }
-        .row-label { left: -20px; width: 15px; height: var(--cell-size); }
-
-        .controls-area {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            padding: var(--safe-area-padding);
-            background: var(--bg-secondary);
-            border-top: 1px solid var(--border-primary);
-        }
-        
-        .main-controls {
-            display: flex;
-            gap: 16px;
-            justify-content: space-between;
-            align-items: flex-start;
-        }
-        
-        .direction-control {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 4px;
-        }
-        
-        .direction-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 44px);
-            grid-template-rows: repeat(3, 44px);
-            gap: 4px;
-        }
-        
-        .direction-grid button {
-            width: 44px;
-            height: 44px;
-        }
-        
-        .btn {
-            padding: 10px;
-            border-radius: 8px;
-            border: 1px solid var(--border-primary);
-            background: var(--bg-tertiary);
-            color: var(--text-primary);
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s;
-            min-width: 44px;
-            min-height: 44px;
-        }
-        
-        .plane-selection {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            align-items: center;
-            margin-right: 20px;
-        }
-        
-        .confirmation-group {
-            display: flex;
-            justify-content: space-around;
-            gap: 10px;
-        }
-        
-        .plane-btn.selected {
-            background-color: var(--success-color) !important;
-            border-color: var(--success-color) !important;
-            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
-            transform: scale(1.05);
-        }
-
-        .status-display {
-            flex-grow: 1;
-            text-align: center;
-            font-size: 14px;
-            color: var(--text-secondary);
-            align-self: center;
-        }
-
-        .btn {
-            padding: 10px;
-            border-radius: 8px;
-            border: 1px solid var(--border-primary);
-            background: var(--bg-tertiary);
-            color: var(--text-primary);
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s;
-            min-width: 44px;
-            min-height: 44px;
-        }
-        .btn:disabled {
-            background: var(--bg-tertiary);
-            color: var(--text-disabled);
-            border-color: var(--border-primary);
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
-        .btn:active:not(:disabled) { transform: scale(0.95); }
-        
-        .plane-btn.placed { background-color: var(--primary-color); border-color: var(--primary-light); }
-        .plane-btn.selected { background-color: var(--success-color); border-color: var(--success-color); }
-        
-        .confirmation-group .btn-primary { background-color: var(--primary-color); }
-        .confirmation-group .btn-danger { background-color: var(--danger-color); }
-
-    </style>
-</head>
-<body>
-    <div class="app-container">
-        <header class="top-nav">准备页面</header>
-        
-        <main class="main-content">
-            <div class="board-wrapper" id="boardWrapper">
-                <div class="game-board" id="gameBoard"></div>
-            </div>
-        </main>
-
-        <footer class="controls-area">
-            <div class="status-display" id="statusDisplay">请点击棋盘放置飞机</div>
-            
-            <div class="main-controls">
-                <div class="direction-control">
-                    <div class="direction-grid">
-                        <div></div>
-                        <button class="btn" id="moveUpBtn">↑</button>
-                        <button class="btn" id="deleteBtn">🗑️</button>
-                        
-                        <button class="btn" id="moveLeftBtn">←</button>
-                        <button class="btn" id="rotateBtn">↻</button>
-                        <button class="btn" id="moveRightBtn">→</button>
-                        
-                        <div></div>
-                        <button class="btn" id="moveDownBtn">↓</button>
-                        <div></div>
-                    </div>
-                </div>
-                
-                <div class="plane-selection">
-                    <button class="btn plane-btn" id="planeBtn1" data-plane-id="1">飞机1</button>
-                    <button class="btn plane-btn" id="planeBtn2" data-plane-id="2">飞机2</button>
-                    <button class="btn plane-btn" id="planeBtn3" data-plane-id="3">飞机3</button>
-                </div>
-            </div>
-            
-            <div class="confirmation-group">
-                <button class="btn" id="randomBtn">🎲 随机</button>
-                <button class="btn btn-danger" id="resetBtn">🔄 重置</button>
-                <button class="btn btn-primary" id="doneBtn">✓ 完成</button>
-            </div>
-        </footer>
-    </div>
-
-    <script>
-        class MobilePlacementGame {
-            constructor() {
-                this.BOARD_SIZE = 10;
-                this.PLANE_COUNT = 3;
-                this.boardState = Array(this.BOARD_SIZE).fill(null).map(() => Array(this.BOARD_SIZE).fill(0));
-                this.planes = [];
-                this.selectedPlaneId = null;
-
-                this.dom = {
-                    board: document.getElementById('gameBoard'),
-                    boardWrapper: document.getElementById('boardWrapper'),
-                    statusDisplay: document.getElementById('statusDisplay'),
-                    planeBtns: [
-                        document.getElementById('planeBtn1'),
-                        document.getElementById('planeBtn2'),
-                        document.getElementById('planeBtn3'),
-                    ],
-                    moveUpBtn: document.getElementById('moveUpBtn'),
-                    moveDownBtn: document.getElementById('moveDownBtn'),
-                    moveLeftBtn: document.getElementById('moveLeftBtn'),
-                    moveRightBtn: document.getElementById('moveRightBtn'),
-                    rotateBtn: document.getElementById('rotateBtn'),
-                    deleteBtn: document.getElementById('deleteBtn'),
-                    randomBtn: document.getElementById('randomBtn'),
-                    resetBtn: document.getElementById('resetBtn'),
-                    doneBtn: document.getElementById('doneBtn'),
-                };
-
-                this.init();
-            }
-
-            init() {
-                this.createBoard();
-                this.createPlanes();
-                this.bindEvents();
-                this.updateUI();
-                console.log("游戏已初始化");
-            }
-            
-            createBoard() {
-                this.dom.board.innerHTML = '';
-                for (let r = 0; r < this.BOARD_SIZE; r++) {
-                    for (let c = 0; c < this.BOARD_SIZE; c++) {
-                        const cell = document.createElement('div');
-                        cell.className = 'board-cell';
-                        cell.dataset.row = r;
-                        cell.dataset.col = c;
-                        this.dom.board.appendChild(cell);
-                    }
-                }
-                
-                const labelsWrapper = document.createElement('div');
-                labelsWrapper.className = 'labels';
-                for (let i = 0; i < this.BOARD_SIZE; i++) {
-                    const colLabel = document.createElement('div');
-                    colLabel.className = 'col-label';
-                    colLabel.textContent = String.fromCharCode(65 + i);
-                    colLabel.style.left = `calc(${(i + 0.5)} * var(--cell-size))`;
-                    labelsWrapper.appendChild(colLabel);
-
-                    const rowLabel = document.createElement('div');
-                    rowLabel.className = 'row-label';
-                    rowLabel.textContent = i + 1;
-                    rowLabel.style.top = `calc(${(i + 0.5)} * var(--cell-size))`;
-                    labelsWrapper.appendChild(rowLabel);
-                }
-                this.dom.boardWrapper.appendChild(labelsWrapper);
-            }
-            
-            createPlanes() {
-                this.planes = [];
-                for(let i = 1; i <= this.PLANE_COUNT; i++) {
-                    this.planes.push({
-                        id: i,
-                        center: null,
-                        direction: 'up',
-                        isPlaced: false,
-                    });
-                }
-            }
-
-            bindEvents() {
-                this.dom.board.addEventListener('click', this.handleBoardClick.bind(this));
-                this.dom.planeBtns.forEach(btn => btn.addEventListener('click', this.handlePlaneBtnClick.bind(this)));
-                this.dom.moveUpBtn.addEventListener('click', () => this.moveSelectedPlane(0, -1));
-                this.dom.moveDownBtn.addEventListener('click', () => this.moveSelectedPlane(0, 1));
-                this.dom.moveLeftBtn.addEventListener('click', () => this.moveSelectedPlane(-1, 0));
-                this.dom.moveRightBtn.addEventListener('click', () => this.moveSelectedPlane(1, 0));
-                this.dom.rotateBtn.addEventListener('click', this.rotateSelectedPlane.bind(this));
-                this.dom.deleteBtn.addEventListener('click', this.deleteSelectedPlane.bind(this));
-                this.dom.randomBtn.addEventListener('click', this.randomPlacePlane.bind(this));
-                this.dom.resetBtn.addEventListener('click', this.resetGame.bind(this));
-                this.dom.doneBtn.addEventListener('click', this.completePlacement.bind(this));
-            }
-            
-            handleBoardClick(e) {
-                const cell = e.target.closest('.board-cell');
-                if (!cell) return;
-
-                const row = parseInt(cell.dataset.row);
-                const col = parseInt(cell.dataset.col);
-                const cellContent = this.boardState[row][col];
-
-                if (cellContent > 0) { // Clicked on an existing plane
-                    this.selectedPlaneId = cellContent;
-                } else { // Clicked on an empty cell
-                    const unplacedPlane = this.planes.find(p => !p.isPlaced);
-                    if (unplacedPlane) {
-                        this.tryPlacePlane(unplacedPlane.id, {x: col, y: row}, 'up');
-                    } else {
-                         this.updateStatus("所有飞机都已放置。");
-                    }
-                }
-                this.updateUI();
-            }
-
-            handlePlaneBtnClick(e) {
-                const planeId = parseInt(e.target.dataset.planeId);
-                const plane = this.planes.find(p => p.id === planeId);
-                if (plane && plane.isPlaced) {
-                    this.selectedPlaneId = (this.selectedPlaneId === planeId) ? null : planeId;
-                    this.updateUI();
-                } else {
-                    this.updateStatus(`飞机 ${planeId} 尚未放置。`);
-                }
-            }
-
-            tryPlacePlane(planeId, center, direction) {
-                const plane = this.planes.find(p => p.id === planeId);
-                if (!plane) return;
-
-                const directions = ['up', 'right', 'down', 'left'];
-                const startIndex = directions.indexOf(direction);
-                let placedSuccessfully = false;
-                let usedDirection = direction;
-
-                // 尝试所有方向，从指定方向开始
-                for (let i = 0; i < directions.length; i++) {
-                    const currentDirection = directions[(startIndex + i) % 4];
-                    const positions = this.getPlanePositions(center, currentDirection);
-                    
-                    if (this.isPlacementValid(positions, planeId)) {
-                        // Clear old position if any
-                        this.clearPlaneFromBoard(planeId);
-                        
-                        plane.center = center;
-                        plane.direction = currentDirection;
-                        plane.isPlaced = true;
-                        
-                        positions.forEach(p => { this.boardState[p.y][p.x] = planeId; });
-                        this.selectedPlaneId = planeId;
-                        placedSuccessfully = true;
-                        usedDirection = currentDirection;
-                        
-                        // 如果使用了不同于初始请求的方向，显示特殊提示
-                        if (currentDirection !== direction) {
-                            this.updateStatus(`飞机 ${planeId} 已放置，已自动旋转为 ${this.getDirectionName(currentDirection)} 方向。`);
-                        } else {
-                            this.updateStatus(`飞机 ${planeId} 操作成功。`);
-                        }
-                        break;
-                    }
-                }
-
-                if (!placedSuccessfully) {
-                    this.updateStatus(`操作无效: 所有方向都存在位置冲突或越界。`);
-                }
-                
-                this.updateUI();
-            }
-
-            moveSelectedPlane(dx, dy) {
-                if (!this.selectedPlaneId) return;
-                const plane = this.planes.find(p => p.id === this.selectedPlaneId);
-                const newCenter = { x: plane.center.x + dx, y: plane.center.y + dy };
-                this.tryPlacePlane(plane.id, newCenter, plane.direction);
-            }
-
-            rotateSelectedPlane() {
-                if (!this.selectedPlaneId) return;
-                const plane = this.planes.find(p => p.id === this.selectedPlaneId);
-                const directions = ['up', 'right', 'down', 'left'];
-                const currentIndex = directions.indexOf(plane.direction);
-                const nextDirection = directions[(currentIndex + 1) % 4];
-                this.tryPlacePlane(plane.id, plane.center, nextDirection);
-            }
-
-            deleteSelectedPlane() {
-                if (!this.selectedPlaneId) return;
-                const planeId = this.selectedPlaneId;
-                this.clearPlaneFromBoard(planeId);
-                const plane = this.planes.find(p => p.id === planeId);
-                plane.isPlaced = false;
-                plane.center = null;
-                this.selectedPlaneId = null;
-                this.updateStatus(`飞机 ${planeId} 已移除。`);
-                this.updateUI();
-            }
-
-            randomPlacePlane() {
-                const unplacedPlane = this.planes.find(p => !p.isPlaced);
-                if (!unplacedPlane) {
-                    this.updateStatus("所有飞机都已放置。");
-                    return;
-                }
-
-                // 尝试随机位置和方向
-                const directions = ['up', 'right', 'down', 'left'];
-                const maxAttempts = 100; // 防止无限循环
-                let placed = false;
-
-                for (let attempt = 0; attempt < maxAttempts && !placed; attempt++) {
-                    const randomX = Math.floor(Math.random() * this.BOARD_SIZE);
-                    const randomY = Math.floor(Math.random() * this.BOARD_SIZE);
-                    const randomDirection = directions[Math.floor(Math.random() * directions.length)];
-                    
-                    const center = { x: randomX, y: randomY };
-                    const positions = this.getPlanePositions(center, randomDirection);
-                    
-                    if (this.isPlacementValid(positions, unplacedPlane.id)) {
-                        this.clearPlaneFromBoard(unplacedPlane.id);
-                        
-                        unplacedPlane.center = center;
-                        unplacedPlane.direction = randomDirection;
-                        unplacedPlane.isPlaced = true;
-                        
-                        positions.forEach(p => { this.boardState[p.y][p.x] = unplacedPlane.id; });
-                        this.selectedPlaneId = unplacedPlane.id;
-                        placed = true;
-                        
-                        this.updateStatus(`飞机 ${unplacedPlane.id} 已随机放置在 ${String.fromCharCode(65 + randomX)}${randomY + 1}，方向为${this.getDirectionName(randomDirection)}。`);
-                    }
-                }
-
-                if (!placed) {
-                    this.updateStatus(`无法为飞机 ${unplacedPlane.id} 找到合适的随机位置。`);
-                }
-                
-                this.updateUI();
-            }
-
-            resetGame() {
-                this.boardState = Array(this.BOARD_SIZE).fill(null).map(() => Array(this.BOARD_SIZE).fill(0));
-                this.createPlanes();
-                this.selectedPlaneId = null;
-                this.updateStatus("已重置棋盘，请重新放置。");
-                this.updateUI();
-            }
-
-            completePlacement() {
-                if(this.planes.every(p => p.isPlaced)) {
-                    this.updateStatus("准备就绪，等待对手...");
-                    localStorage.setItem('playerPlanes', JSON.stringify(this.planes));
-                    // 禁用所有按钮
-                    Object.values(this.dom).flat().forEach(el => {
-                        if(el.tagName === 'BUTTON') el.disabled = true;
-                    });
-                } else {
-                    this.updateStatus("请先放置所有飞机。");
-                }
-            }
-
-            clearPlaneFromBoard(planeId) {
-                for (let r = 0; r < this.BOARD_SIZE; r++) {
-                    for (let c = 0; c < this.BOARD_SIZE; c++) {
-                        if (this.boardState[r][c] === planeId) {
-                            this.boardState[r][c] = 0;
-                        }
-                    }
-                }
-            }
-
-            getPlanePositions(center, direction) {
-                const geometry = {
-                    up: [
-                        { x: 0, y: -2, type: 'head' },
-                        { x: -2, y: -1, type: 'wing' }, { x: -1, y: -1, type: 'wing' }, { x: 0, y: -1, type: 'wing' }, { x: 1, y: -1, type: 'wing' }, { x: 2, y: -1, type: 'wing' },
-                        { x: 0, y: 0, type: 'body' }, { x: 0, y: 1, type: 'body' },
-                        { x: -1, y: 2, type: 'tail' }, { x: 0, y: 2, type: 'tail' }, { x: 1, y: 2, type: 'tail' }
-                    ],
-                    down: [
-                        { x: 0, y: 2, type: 'head' },
-                        { x: -2, y: 1, type: 'wing' }, { x: -1, y: 1, type: 'wing' }, { x: 0, y: 1, type: 'wing' }, { x: 1, y: 1, type: 'wing' }, { x: 2, y: 1, type: 'wing' },
-                        { x: 0, y: 0, type: 'body' }, { x: 0, y: -1, type: 'body' },
-                        { x: -1, y: -2, type: 'tail' }, { x: 0, y: -2, type: 'tail' }, { x: 1, y: -2, type: 'tail' }
-                    ],
-                    left: [
-                        { x: -2, y: 0, type: 'head' },
-                        { x: -1, y: -2, type: 'wing' }, { x: -1, y: -1, type: 'wing' }, { x: -1, y: 0, type: 'wing' }, { x: -1, y: 1, type: 'wing' }, { x: -1, y: 2, type: 'wing' },
-                        { x: 0, y: 0, type: 'body' }, { x: 1, y: 0, type: 'body' },
-                        { x: 2, y: -1, type: 'tail' }, { x: 2, y: 0, type: 'tail' }, { x: 2, y: 1, type: 'tail' }
-                    ],
-                    right: [
-                        { x: 2, y: 0, type: 'head' },
-                        { x: 1, y: -2, type: 'wing' }, { x: 1, y: -1, type: 'wing' }, { x: 1, y: 0, type: 'wing' }, { x: 1, y: 1, type: 'wing' }, { x: 1, y: 2, type: 'wing' },
-                        { x: 0, y: 0, type: 'body' }, { x: -1, y: 0, type: 'body' },
-                        { x: -2, y: -1, type: 'tail' }, { x: -2, y: 0, type: 'tail' }, { x: -2, y: 1, type: 'tail' }
-                    ]
-                };
-
-                const offsets = geometry[direction];
-                if (!offsets) return [];
-
-                return offsets.map(o => ({ x: center.x + o.x, y: center.y + o.y, type: o.type }));
-            }
-            
-            isPlacementValid(positions, planeId) {
-                for (const pos of positions) {
-                    if (pos.x < 0 || pos.x >= this.BOARD_SIZE || pos.y < 0 || pos.y >= this.BOARD_SIZE) return false; // Out of bounds
-                    const occupyingId = this.boardState[pos.y][pos.x];
-                    if (occupyingId !== 0 && occupyingId !== planeId) return false; // Collision
-                }
-                return true;
-            }
-
-            getDirectionName(direction) {
-                const directionNames = {
-                    'up': '向上',
-                    'right': '向右',
-                    'down': '向下',
-                    'left': '向左'
-                };
-                return directionNames[direction] || direction;
-            }
-
-            updateUI() {
-                // Update board
-                for (let r = 0; r < this.BOARD_SIZE; r++) {
-                    for (let c = 0; c < this.BOARD_SIZE; c++) {
-                        const cell = this.dom.board.children[r * this.BOARD_SIZE + c];
-                        cell.className = 'board-cell';
-                        const planeId = this.boardState[r][c];
-                        if (planeId > 0) {
-                            cell.classList.add('plane-part');
-                            const plane = this.planes.find(p => p.id === planeId);
-
-                            if (plane && plane.isPlaced && plane.center) {
-                                const planePositions = this.getPlanePositions(plane.center, plane.direction);
-                                const part = planePositions.find(p => p.x === c && p.y === r);
-
-                                if (part && part.type) {
-                                    cell.classList.add(`plane-${part.type}`); // Adds plane-head, plane-body etc.
-                                }
-                                if (planeId === this.selectedPlaneId) {
-                                    cell.classList.add('selected');
-                                }
-                            }
-                        }
-                    }
-                }
-
-                // Update plane buttons
-                this.dom.planeBtns.forEach(btn => {
-                    const planeId = parseInt(btn.dataset.planeId);
-                    const plane = this.planes.find(p => p.id === planeId);
-                    btn.classList.remove('placed', 'selected');
-                    if (plane.isPlaced) btn.classList.add('placed');
-                    if (planeId === this.selectedPlaneId) btn.classList.add('selected');
-                });
-
-                // Update manipulation buttons
-                const isPlaneSelected = this.selectedPlaneId !== null;
-                const hasUnplacedPlane = this.planes.some(p => !p.isPlaced);
-                this.dom.moveUpBtn.disabled = !isPlaneSelected;
-                this.dom.moveDownBtn.disabled = !isPlaneSelected;
-                this.dom.moveLeftBtn.disabled = !isPlaneSelected;
-                this.dom.moveRightBtn.disabled = !isPlaneSelected;
-                this.dom.rotateBtn.disabled = !isPlaneSelected;
-                this.dom.deleteBtn.disabled = !isPlaneSelected;
-                this.dom.randomBtn.disabled = !hasUnplacedPlane;
-
-                // Update confirmation buttons
-                this.dom.doneBtn.disabled = !this.planes.every(p => p.isPlaced);
-            }
-            
-            updateStatus(message) {
-                this.dom.statusDisplay.textContent = message;
-            }
-        }
-
-        document.addEventListener('DOMContentLoaded', () => new MobilePlacementGame());
-    </script>
-</body>
-</html>
\ No newline at end of file
