统一样式

01_文档/原型设计/05_对战页面.html

@@ -8,73 +8,13 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     
+    <!-- 引入通用样式 -->
+    <link rel="stylesheet" href="common-styles.css">
+    
     <style>
+        /* 页面特定CSS变量 */
         :root {
-            /* 色彩系统 */
-            --primary-color: #6366f1;
-            --primary-light: #8b5cf6;
-            --primary-dark: #4f46e5;
-            --secondary-color: #40e0d0;
-            --secondary-light: #26d0ce;
-            --accent-color: #f59e0b;
-            --accent-light: #fbbf24;
-            --danger-color: #ff4757;
-            --danger-light: #ff6b6b;
-            --success-color: #10b981;
-            
-            /* 背景色系 */
-            --bg-primary: #0f1419;
-            --bg-secondary: #1a1d29;
-            --bg-tertiary: #252837;
-            --bg-elevated: #2d3142;
-            --gradient-bg: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
-            
-            /* 边框色系 */
-            --border-primary: #3d4159;
-            --border-secondary: #4a5073;
-            --border-highlight: #6366f1;
-            --border-accent: rgba(64, 224, 208, 0.3);
-            
-            /* 文字色系 */
-            --text-primary: #ffffff;
-            --text-secondary: #b4b7c9;
-            --text-tertiary: #9ca3af;
-            --text-disabled: #6b7280;
-            
-            /* 移动端适配 */
             --cell-size: min(8.5vw, 36px);
-            --safe-area-padding: 16px;
-            --touch-target-min: 44px;
-        }
-
-        * {
-            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;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft YaHei UI", sans-serif;
-        }
-
-        body {
-            background: var(--gradient-bg);
-            color: var(--text-primary);
-            -webkit-font-smoothing: antialiased;
-            touch-action: manipulation;
-            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%;
-            position: relative;
         }
 
         /* 顶部状态栏 */
@@ -380,73 +320,7 @@
             gap: 4px;
         }
 
-        /* 按钮样式 */
-        .btn {
-            min-height: var(--touch-target-min);
-            border: none;
-            border-radius: 8px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            padding: 10px 16px;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-            user-select: none;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .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:active {
-            transform: translateY(1px);
-            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
-        }
-
-        .btn-success {
-            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
-            color: #1a1a2e;
-            box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3);
-        }
-
-        .btn-danger {
-            background: linear-gradient(135deg, var(--danger-color), var(--danger-light));
-            color: white;
-            box-shadow: 0 4px 16px rgba(255, 71, 87, 0.3);
-        }
-
-        .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:active {
-            background: rgba(99, 102, 241, 0.25);
-            transform: translateY(1px);
-        }
-
-        .btn:disabled {
-            background: var(--bg-tertiary) !important;
-            color: var(--text-disabled) !important;
-            border: 1px solid var(--border-primary) !important;
-            opacity: 0.6;
-            cursor: not-allowed;
-            box-shadow: none !important;
-        }
-
-        .btn:disabled:active {
-            transform: none !important;
-        }
-
+        /* 页面特定按钮样式覆盖 */
         .plane-btn.placed {
             background: var(--primary-color) !important;
             color: white;