feat(ui): modernize UI/UX with new design system

- Add modern CSS variables and color palette
- Implement smooth animations and transitions
- Improve responsive design for desktop/tablet/mobile
- Add Inter font for better typography
- Enhance visual feedback and micro-interactions
- Update all components with modern styling
- Add touch-friendly controls for mobile devices

static/index.html

@@ -8,7 +8,7 @@
     <!-- CJK Font Support -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
     
     <link rel="stylesheet" href="/static/styles.css">
 </head>

static/styles.css

@@ -2,63 +2,280 @@
 #production-source {
     display: flex;
     align-items: center;
-    gap: 6px;
-    margin: 6px 0 8px;
-    font-size: 12px;
+    gap: var(--space-sm);
+    margin: var(--space-sm) 0 var(--space-md);
+    padding: var(--space-sm);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-light);
+    font-size: 0.875rem;
+}
+
+#production-source .label {
+    opacity: 0.8;
+    color: var(--text-secondary);
+}
+
+#production-source-name {
+    font-weight: 600;
+    color: var(--primary);
+}
+
+#production-source-clear {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    padding: var(--space-xs);
+    border-radius: var(--radius-sm);
+    transition: all var(--transition-fast);
+    color: var(--text-muted);
+}
+
+#production-source-clear:hover {
+    background: var(--bg-hover);
+    color: var(--danger);
+}
+
+/* Modern Loading Screen */
+#loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-primary);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: var(--z-modal);
+    transition: opacity var(--transition-slow);
+}
+
+#loading-screen.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.loading-content {
+    text-align: center;
+    max-width: 400px;
+    padding: var(--space-2xl);
+}
+
+.loading-content h2 {
+    font-size: 2rem;
+    margin-bottom: var(--space-xl);
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 700;
+    letter-spacing: -0.025em;
+}
+
+.loading-bar {
+    width: 100%;
+    height: 8px;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    margin: var(--space-xl) auto;
+    position: relative;
+}
+
+.loading-progress {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary), var(--secondary));
+    animation: loading 2s ease-in-out infinite;
+    width: 60%;
+    border-radius: var(--radius-md);
+    position: relative;
+}
+
+.loading-progress::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    animation: shimmer 1.5s infinite;
+}
+
+@keyframes loading {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(200%); }
+}
+
+.loading-content p {
+    color: var(--text-secondary);
+    margin-top: var(--space-md);
+    font-size: 0.9rem;
 }
 
 /* Game Over Overlay */
 #game-over-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0,0,0,0.75);
+    background: rgba(15, 23, 42, 0.9);
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 9999;
+    z-index: var(--z-modal);
+    backdrop-filter: blur(10px);
+    transition: opacity var(--transition-slow);
+}
+
+#game-over-overlay.hidden { 
+    display: none; 
 }
-#game-over-overlay.hidden { display: none; }
+
 .game-over-content {
-    background: #111;
-    color: #fff;
-    padding: 24px 28px;
-    border-radius: 8px;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
-    min-width: 320px;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    padding: var(--space-2xl);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-xl);
+    min-width: 400px;
     text-align: center;
+    border: 1px solid var(--border-light);
+    animation: gameOverSlideIn 0.5s ease;
 }
-.game-over-content h2 { margin: 0 0 12px; font-size: 20px; }
-.game-over-actions { display: flex; gap: 12px; justify-content: center; }
+
+@keyframes gameOverSlideIn {
+    from {
+        transform: translateY(-50px) scale(0.9);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0) scale(1);
+        opacity: 1;
+    }
+}
+
+.game-over-content h2 { 
+    margin: 0 0 var(--space-lg); 
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary);
+}
+
+.game-over-actions { 
+    display: flex; 
+    gap: var(--space-md); 
+    justify-content: center;
+    margin-top: var(--space-lg);
+}
+
 .game-over-actions button {
-    background: #2d7ef7;
-    color: #fff;
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+    color: var(--text-primary);
     border: none;
-    border-radius: 6px;
-    padding: 8px 12px;
+    border-radius: var(--radius-lg);
+    padding: var(--space-md) var(--space-xl);
     cursor: pointer;
+    font-weight: 600;
+    transition: all var(--transition-fast);
+    font-size: 1rem;
 }
-.game-over-actions button:hover { background: #226ad1; }
-#production-source .label { opacity: 0.8; }
-#production-source-name { font-weight: 700; }
-#production-source-clear {
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    padding: 2px 4px;
+
+.game-over-actions button:hover { 
+    background: linear-gradient(135deg, var(--primary-light), var(--primary));
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
 }
-/* Modern RTS Game Styles */
-:root {
-    --primary-color: #4A90E2;
-    --secondary-color: #E74C3C;
-    --success-color: #2ECC71;
-    --warning-color: #F39C12;
-    --dark-bg: #1a1a2e;
-    --dark-panel: #16213e;
-    --light-text: #eaeaea;
-    --border-color: #0f3460;
-    --hover-color: #533483;
+
+.game-over-actions button:active {
+    transform: translateY(0);
 }
 
+/* Modern RTS Game Styles */
+:root {
+    /* Modern Color Palette */
+    --primary: #3B82F6;
+    --primary-dark: #2563EB;
+    --primary-light: #60A5FA;
+    --secondary: #10B981;
+    --secondary-dark: #059669;
+    --accent: #F59E0B;
+    --accent-dark: #D97706;
+    --danger: #EF4444;
+    --danger-dark: #DC2626;
+    --warning: #F59E0B;
+    --success: #10B981;
+    --info: #06B6D4;
+    
+    /* Dark Theme Colors */
+    --bg-primary: #0F172A;
+    --bg-secondary: #1E293B;
+    --bg-tertiary: #334155;
+    --bg-card: #1E293B;
+    --bg-hover: #334155;
+    --bg-active: #475569;
+    
+    /* Text Colors */
+    --text-primary: #F8FAFC;
+    --text-secondary: #CBD5E1;
+    --text-muted: #94A3B8;
+    --text-inverse: #0F172A;
+    
+    /* Border Colors */
+    --border-light: #334155;
+    --border-medium: #475569;
+    --border-dark: #64748B;
+    
+    /* Spacing Scale */
+    --space-xs: 0.25rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+    --space-2xl: 3rem;
+    
+    /* Border Radius */
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --shadow-glow: 0 0 20px rgba(0, 130, 246, 0.5);
+    
+    /* Transitions */
+    --transition-fast: 150ms ease;
+    --transition-normal: 250ms ease;
+    --transition-slow: 350ms ease;
+    
+    /* Z-Index Scale */
+    --z-dropdown: 1000;
+    --z-sticky: 1020;
+    --z-fixed: 1030;
+    --z-modal-backdrop: 1040;
+    --z-modal: 1050;
+    --z-popover: 1060;
+    --z-tooltip: 1070;
+    --z-toast: 1080;
+}
+
+/* Legacy Variables (for compatibility) */
+:root {
+    --primary-color: var(--primary);
+    --secondary-color: var(--secondary);
+    --success-color: var(--success);
+    --warning-color: var(--warning);
+    --dark-bg: var(--bg-primary);
+    --dark-panel: var(--bg-secondary);
+    --light-text: var(--text-primary);
+    --border-color: var(--border-light);
+    --hover-color: var(--bg-hover);
+}
+
+/* Modern Base Styles */
 * {
     margin: 0;
     padding: 0;
@@ -66,11 +283,15 @@
 }
 
 body {
-    font-family: 'Noto Sans', 'Noto Sans TC', 'Segoe UI', 'Microsoft JhengHei', 'PingFang TC', 'Apple LiGothic Medium', Tahoma, Geneva, Verdana, sans-serif;
-    background: var(--dark-bg);
-    color: var(--light-text);
+    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
     overflow: hidden;
     user-select: none;
+    line-height: 1.6;
+    font-size: 14px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 #app {
@@ -80,144 +301,273 @@ body {
     width: 100vw;
 }
 
+/* Modern Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-medium);
+    border-radius: var(--radius-md);
+    transition: background var(--transition-fast);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--border-dark);
+}
+
+/* Focus Styles */
+*:focus {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+}
+
+*:focus:not(:focus-visible) {
+    outline: none;
+}
+
+/* Selection Styles */
+::selection {
+    background: var(--primary);
+    color: var(--text-inverse);
+}
+
 /* Top Bar */
 #topbar {
-    background: var(--dark-panel);
-    padding: 10px 20px;
+    background: var(--bg-secondary);
+    padding: var(--space-md) var(--space-lg);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 2px solid var(--border-color);
-    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-    z-index: 100;
+    border-bottom: 1px solid var(--border-light);
+    box-shadow: var(--shadow-md);
+    z-index: var(--z-sticky);
+    backdrop-filter: blur(10px);
+    background: rgba(30, 41, 59, 0.8);
 }
 
 .topbar-left {
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: var(--space-xl);
 }
 
 .topbar-left h1 {
-    font-size: 24px;
-    font-weight: bold;
-    background: linear-gradient(45deg, var(--primary-color), var(--success-color));
+    font-size: 1.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
+    letter-spacing: -0.025em;
 }
 
 #game-info {
     display: flex;
-    gap: 10px;
+    gap: var(--space-md);
 }
 
 .info-badge {
-    background: rgba(74, 144, 226, 0.2);
-    padding: 5px 12px;
-    border-radius: 12px;
-    font-size: 14px;
-    border: 1px solid var(--primary-color);
+    background: var(--bg-tertiary);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-lg);
+    font-size: 0.875rem;
+    border: 1px solid var(--border-light);
+    font-weight: 500;
+    transition: all var(--transition-fast);
+}
+
+.info-badge:hover {
+    background: var(--bg-hover);
+    border-color: var(--primary);
+    transform: translateY(-1px);
 }
 
 .topbar-right {
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: var(--space-xl);
 }
 
 .resource-display {
     display: flex;
-    gap: 15px;
+    gap: var(--space-md);
 }
 
 .resource-item {
     display: flex;
     align-items: center;
-    gap: 5px;
-    background: rgba(46, 204, 113, 0.2);
-    padding: 8px 15px;
-    border-radius: 8px;
-    font-weight: bold;
-    border: 1px solid var(--success-color);
+    gap: var(--space-sm);
+    background: var(--bg-tertiary);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-lg);
+    font-weight: 600;
+    border: 1px solid var(--border-light);
+    transition: all var(--transition-fast);
+}
+
+.resource-item:hover {
+    background: var(--bg-hover);
+    border-color: var(--success);
+    transform: translateY(-1px);
 }
 
 .resource-icon {
-    font-size: 20px;
+    font-size: 1.25rem;
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
 }
 
-/* Nuke Indicator */
+/* Modern Nuke Indicator */
 #nuke-indicator {
-    background: rgba(231, 76, 60, 0.2);
-    border: 1px solid var(--danger-color);
-    padding: 8px 15px;
-    border-radius: 8px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-light);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-lg);
     min-width: 180px;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
+    position: relative;
+    overflow: hidden;
+}
+
+#nuke-indicator::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, transparent, rgba(239, 68, 68, 0.1), transparent);
+    transform: translateX(-100%);
+    transition: transform 0.6s ease;
+}
+
+#nuke-indicator.ready::before {
+    transform: translateX(100%);
 }
 
 #nuke-indicator.ready {
-    background: rgba(46, 204, 113, 0.3);
-    border-color: var(--success-color);
-    animation: nukeReady 1s ease-in-out infinite;
+    background: var(--bg-tertiary);
+    border-color: var(--success);
+    animation: nukeReady 2s ease-in-out infinite;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
 }
 
 @keyframes nukeReady {
-    0%, 100% { box-shadow: 0 0 10px rgba(46, 204, 113, 0.5); }
-    50% { box-shadow: 0 0 20px rgba(46, 204, 113, 0.8); }
+    0%, 100% { 
+        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
+        border-color: var(--success);
+    }
+    50% { 
+        box-shadow: 0 0 25px rgba(16, 185, 129, 0.6);
+        border-color: var(--secondary);
+    }
 }
 
 .nuke-status {
-    font-size: 12px;
-    font-weight: bold;
-    margin-bottom: 4px;
-    color: var(--light-text);
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-bottom: var(--space-xs);
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
 
 #nuke-indicator.ready .nuke-status {
-    color: var(--success-color);
+    color: var(--success);
 }
 
 .nuke-charge-container {
     width: 100%;
     height: 6px;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 3px;
+    background: var(--bg-primary);
+    border-radius: var(--radius-md);
     overflow: hidden;
+    position: relative;
 }
 
 .nuke-charge-bar {
     height: 100%;
     width: 0%;
-    background: linear-gradient(90deg, var(--danger-color), #f39c12);
-    transition: width 0.3s ease;
+    background: linear-gradient(90deg, var(--danger), var(--warning));
+    transition: width var(--transition-normal);
+    border-radius: var(--radius-md);
+    position: relative;
+    overflow: hidden;
+}
+
+.nuke-charge-bar::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transform: translateX(-100%);
+    animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
 }
 
 #nuke-indicator.ready .nuke-charge-bar {
-    background: linear-gradient(90deg, var(--success-color), #2ecc71);
+    background: linear-gradient(90deg, var(--success), var(--secondary));
 }
 
-/* Sound Control */
+/* Modern Sound Control */
 .sound-control {
     display: flex;
     align-items: center;
 }
 
 .sound-btn {
-    background: rgba(0,0,0,0.3);
-    border: 1px solid var(--border-color);
-    padding: 8px 15px;
-    border-radius: 8px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-light);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-lg);
     cursor: pointer;
-    transition: all 0.3s ease;
-    color: var(--light-text);
-    font-size: 20px;
+    transition: all var(--transition-fast);
+    color: var(--text-primary);
+    font-size: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    position: relative;
+    overflow: hidden;
+}
+
+.sound-btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(59, 130, 246, 0.2);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width var(--transition-normal), height var(--transition-normal);
 }
 
 .sound-btn:hover {
-    background: rgba(74, 144, 226, 0.2);
-    border-color: var(--primary-color);
+    background: var(--bg-hover);
+    border-color: var(--primary);
     transform: scale(1.05);
+    box-shadow: var(--shadow-md);
+}
+
+.sound-btn:hover::before {
+    width: 100%;
+    height: 100%;
 }
 
 .sound-btn:active {
@@ -225,118 +575,254 @@ body {
 }
 
 .sound-btn.muted {
-    opacity: 0.5;
-    border-color: var(--secondary-color);
+    opacity: 0.6;
+    border-color: var(--danger);
+    color: var(--text-muted);
 }
 
-.sound-btn.muted .sound-icon::before {
+.sound-btn.muted::after {
     content: '🔇';
     position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1rem;
 }
 
 .sound-icon {
     display: inline-block;
     position: relative;
+    z-index: 1;
 }
 
-/* Language Selector */
+/* Modern Language Selector */
 .language-selector {
     display: flex;
     align-items: center;
-    gap: 8px;
-    background: rgba(0,0,0,0.3);
-    padding: 8px 12px;
-    border-radius: 8px;
-    border: 1px solid var(--border-color);
+    gap: var(--space-sm);
+    background: var(--bg-tertiary);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-light);
+    transition: all var(--transition-fast);
+}
+
+.language-selector:hover {
+    border-color: var(--primary);
+    background: var(--bg-hover);
 }
 
 .language-selector label {
-    font-size: 18px;
+    font-size: 1.125rem;
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
 }
 
 #language-select {
-    background: var(--dark-bg);
-    color: var(--light-text);
-    border: 1px solid var(--border-color);
-    padding: 5px 10px;
-    border-radius: 5px;
-    font-size: 14px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-light);
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-md);
+    font-size: 0.875rem;
     cursor: pointer;
     outline: none;
-    transition: all 0.3s ease;
+    transition: all var(--transition-fast);
+    min-width: 100px;
 }
 
 #language-select:hover {
-    border-color: var(--primary-color);
+    border-color: var(--primary);
 }
 
 #language-select:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
-}
-
-.connection-status {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    background: rgba(0,0,0,0.3);
-    padding: 8px 15px;
-    border-radius: 8px;
-}
-
-.status-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    animation: pulse 2s infinite;
-}
-
-.status-dot.connected {
-    background: var(--success-color);
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
-.status-dot.disconnected {
-    background: var(--secondary-color);
+#language-select option {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    padding: var(--space-xs);
 }
 
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-}
-
-/* Game Container */
+/* Modern Game Container */
 #game-container {
     display: flex;
     flex: 1;
     overflow: hidden;
+    background: var(--bg-primary);
 }
 
-/* Sidebars */
+/* Modern Sidebars */
 #left-sidebar, #right-sidebar {
-    width: 280px;
-    background: var(--dark-panel);
-    border-right: 2px solid var(--border-color);
+    width: 320px;
+    background: var(--bg-secondary);
+    border-right: 1px solid var(--border-light);
     overflow-y: auto;
     overflow-x: hidden;
+    transition: all var(--transition-normal);
+    position: relative;
 }
 
 #right-sidebar {
     border-right: none;
-    border-left: 2px solid var(--border-color);
+    border-left: 1px solid var(--border-light);
 }
 
 .sidebar-section {
-    padding: 15px;
-    border-bottom: 1px solid var(--border-color);
+    padding: var(--space-lg);
+    border-bottom: 1px solid var(--border-light);
+    transition: background var(--transition-fast);
+}
+
+.sidebar-section:hover {
+    background: var(--bg-tertiary);
+}
+
+.sidebar-section:last-child {
+    border-bottom: none;
 }
 
 .sidebar-section h3 {
-    margin-bottom: 12px;
-    color: var(--primary-color);
-    font-size: 16px;
+    margin-bottom: var(--space-md);
+    color: var(--primary);
+    font-size: 1rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+/* Modern Intel Panel */
+.intel-section {
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
+    border: 1px solid var(--primary);
+    border-radius: var(--radius-lg);
+    padding: var(--space-lg);
+    position: relative;
+    overflow: hidden;
+}
+
+.intel-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, var(--primary), var(--secondary));
+    animation: intelGlow 3s ease-in-out infinite;
+}
+
+@keyframes intelGlow {
+    0%, 100% { opacity: 0.7; }
+    50% { opacity: 1; }
+}
+
+#intel-panel {
+    background: rgba(15, 23, 42, 0.6);
+    padding: var(--space-md);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-light);
+    min-height: 100px;
+    backdrop-filter: blur(10px);
+}
+
+.intel-status {
+    font-size: 0.875rem;
+    color: var(--warning);
+    margin-bottom: var(--space-sm);
+    font-style: italic;
+    opacity: 0.8;
+}
+
+.intel-summary {
+    font-size: 0.9rem;
+    color: var(--text-primary);
+    margin-bottom: var(--space-md);
+    line-height: 1.6;
+    font-weight: 500;
+}
+
+.intel-tips {
+    font-size: 0.875rem;
+    color: var(--success);
+    line-height: 1.5;
+}
+
+.intel-tips > div {
+    margin-bottom: var(--space-xs);
+    padding-left: var(--space-md);
+    position: relative;
+}
+
+.intel-tips > div::before {
+    content: "→";
+    position: absolute;
+    left: 0;
+    color: var(--primary);
+    font-weight: bold;
+}
+
+#intel-header {
+    color: var(--primary);
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin-bottom: var(--space-md);
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+#intel-header.offline {
+    color: var(--text-muted);
+}
+
+#intel-header.updating {
+    color: var(--warning);
+}
+
+#intel-header.active {
+    color: var(--success);
+}
+
+.intel-source-badge {
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-sm);
+    font-size: 0.75rem;
+    font-weight: 500;
+    border: 1px solid var(--border-light);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.intel-refresh-btn {
+    background: var(--primary);
+    color: white;
+    border: none;
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: all var(--transition-fast);
     display: flex;
     align-items: center;
-    gap: 8px;
+    justify-content: center;
+    min-width: 32px;
+    min-height: 32px;
+}
+
+.intel-refresh-btn:hover {
+    background: var(--primary-dark);
+    transform: rotate(180deg);
+}
+
+.intel-refresh-btn:active {
+    transform: scale(0.95) rotate(180deg);
 }
 
 /* Intel/AI Analysis Panel */
@@ -428,327 +914,131 @@ body {
     transform: scale(0.95) rotate(180deg);
 }
 
-/* Build & Unit Buttons */
-.build-buttons, .unit-buttons {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 10px;
-}
-
-.build-btn, .unit-btn {
-    background: linear-gradient(135deg, var(--dark-bg), var(--dark-panel));
-    border: 2px solid var(--border-color);
-    color: var(--light-text);
-    padding: 12px;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.3s ease;
+/* Modern Action Buttons */
+.action-buttons {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    gap: 5px;
-    position: relative;
-}
-
-.build-btn:hover, .unit-btn:hover {
-    transform: translateY(-2px);
-    border-color: var(--primary-color);
-    box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
+    gap: var(--space-sm);
 }
 
-.build-btn:active, .unit-btn:active {
-    transform: translateY(0);
-}
-
-.build-icon, .unit-icon {
-    font-size: 32px;
-}
-
-.build-name, .unit-name {
-    font-size: 12px;
-    font-weight: bold;
-}
-
-.build-cost, .unit-cost {
-    font-size: 11px;
-    color: var(--warning-color);
-}
-
-/* Canvas Container */
-#canvas-container {
-    flex: 1;
+.action-btn {
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+    border: 1px solid var(--primary);
+    color: white;
+    padding: var(--space-md);
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    font-weight: 600;
+    transition: all var(--transition-fast);
     position: relative;
-    background: #0a0a0a;
-    overflow: hidden;
-}
-
-#game-canvas {
-    width: 100%;
-    height: 100%;
-    display: block;
-    cursor: crosshair;
-}
-
-/* Minimap */
-#minimap-container {
-    position: absolute;
-    bottom: 20px;
-    right: 20px;
-    width: 240px;
-    height: 180px;
-    background: rgba(0, 0, 0, 0.8);
-    border: 2px solid var(--primary-color);
-    border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
-}
-
-#minimap {
-    width: 100%;
-    height: 100%;
-    display: block;
-}
-
-#minimap-viewport {
-    position: absolute;
-    border: 2px solid rgba(255, 255, 255, 0.8);
-    background: rgba(255, 255, 255, 0.1);
-    pointer-events: none;
+    text-align: left;
+    font-size: 0.875rem;
 }
 
-/* Camera Controls */
-#camera-controls {
+.action-btn::before {
+    content: '';
     position: absolute;
-    top: 20px;
-    right: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.camera-btn {
-    width: 50px;
-    height: 50px;
-    background: rgba(0, 0, 0, 0.7);
-    border: 2px solid var(--primary-color);
-    border-radius: 8px;
-    color: white;
-    font-size: 16px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.camera-btn:hover {
-    background: var(--primary-color);
-    transform: scale(1.1);
-}
-
-/* Selection Info */
-#selection-info {
-    background: rgba(0,0,0,0.3);
-    padding: 10px;
-    border-radius: 8px;
-    min-height: 100px;
-}
-
-.no-selection {
-    color: #888;
-    text-align: center;
-    padding: 20px 0;
-}
-
-.selection-item {
-    background: rgba(74, 144, 226, 0.2);
-    padding: 8px;
-    margin: 5px 0;
-    border-radius: 5px;
-    border-left: 3px solid var(--primary-color);
-}
-
-/* Control Groups */
-#control-groups-display {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 8px;
-    padding: 10px;
-    background: rgba(0,0,0,0.3);
-    border-radius: 8px;
-}
-
-.control-group {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: rgba(74, 144, 226, 0.1);
-    border: 2px solid rgba(74, 144, 226, 0.3);
-    border-radius: 8px;
-    padding: 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    min-height: 50px;
-}
-
-.control-group:hover {
-    background: rgba(74, 144, 226, 0.2);
-    border-color: var(--primary-color);
-    transform: scale(1.05);
-}
-
-.control-group.active {
-    background: rgba(46, 204, 113, 0.2);
-    border-color: var(--success-color);
-    box-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
-}
-
-.control-group.selected {
-    border-color: var(--warning-color);
-    box-shadow: 0 0 15px rgba(243, 156, 18, 0.5);
-}
-
-.group-num {
-    font-size: 18px;
-    font-weight: bold;
-    color: var(--primary-color);
-}
-
-.control-group.active .group-num {
-    color: var(--success-color);
-}
-
-.group-count {
-    font-size: 12px;
-    color: #888;
-    margin-top: 4px;
-}
-
-.control-group.active .group-count {
-    color: var(--light-text);
-}
-
-.control-groups-hint {
-    font-size: 11px;
-    color: #888;
-    text-align: center;
-    margin-top: 8px;
-    font-style: italic;
-}
-
-/* Production Queue */
-#production-queue {
-    background: rgba(0,0,0,0.3);
-    padding: 10px;
-    border-radius: 8px;
-    min-height: 120px;
-}
-
-.empty-queue {
-    color: #888;
-    text-align: center;
-    padding: 20px 0;
-}
-
-.queue-item {
-    background: rgba(243, 156, 18, 0.2);
-    padding: 10px;
-    margin: 5px 0;
-    border-radius: 5px;
-    border-left: 3px solid var(--warning-color);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.queue-progress {
+    top: 0;
+    left: -100%;
     width: 100%;
-    height: 6px;
-    background: rgba(0,0,0,0.5);
-    border-radius: 3px;
-    overflow: hidden;
-    margin-top: 5px;
-}
-
-.queue-progress-bar {
     height: 100%;
-    background: linear-gradient(90deg, var(--success-color), var(--warning-color));
-    transition: width 0.3s ease;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left var(--transition-slow);
 }
 
-/* Action Buttons */
-.action-buttons {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+.action-btn:hover {
+    transform: translateX(4px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary-light);
 }
 
-.action-btn {
-    background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
-    border: none;
-    color: white;
-    padding: 12px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-weight: bold;
-    transition: all 0.3s ease;
+.action-btn:hover::before {
+    left: 100%;
 }
 
-.action-btn:hover {
-    transform: translateX(5px);
-    box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4);
+.action-btn:active {
+    transform: translateX(2px);
 }
 
-/* Game Stats */
+/* Modern Game Stats */
 #game-stats {
-    background: rgba(0,0,0,0.3);
-    padding: 10px;
-    border-radius: 8px;
+    background: var(--bg-tertiary);
+    padding: var(--space-md);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-light);
 }
 
 .stat-row {
     display: flex;
     justify-content: space-between;
-    padding: 8px 0;
-    border-bottom: 1px solid rgba(255,255,255,0.1);
+    padding: var(--space-sm) 0;
+    border-bottom: 1px solid var(--border-light);
+    transition: all var(--transition-fast);
 }
 
 .stat-row:last-child {
     border-bottom: none;
 }
 
+.stat-row:hover {
+    background: var(--bg-hover);
+    margin: 0 calc(-1 * var(--space-md));
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-sm);
+}
+
 .stat-row span:last-child {
-    color: var(--primary-color);
-    font-weight: bold;
+    color: var(--primary);
+    font-weight: 600;
 }
 
-/* Notifications */
+/* Modern Notifications */
 #notifications {
     position: fixed;
     top: 80px;
-    right: 20px;
-    z-index: 1000;
+    right: var(--space-lg);
+    z-index: var(--z-toast);
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: var(--space-sm);
     pointer-events: none;
 }
 
 .notification {
-    background: rgba(0, 0, 0, 0.9);
-    border: 2px solid var(--primary-color);
-    padding: 15px 20px;
-    border-radius: 8px;
-    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
+    background: rgba(15, 23, 42, 0.95);
+    border: 1px solid var(--border-light);
+    padding: var(--space-md) var(--space-lg);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-xl);
+    backdrop-filter: blur(10px);
     animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s;
     pointer-events: all;
+    transition: all var(--transition-fast);
+    max-width: 400px;
+}
+
+.notification:hover {
+    transform: translateX(-4px);
+    box-shadow: var(--shadow-glow);
 }
 
-.notification.success { border-color: var(--success-color); }
-.notification.warning { border-color: var(--warning-color); }
-.notification.error { border-color: var(--secondary-color); }
+.notification.success { 
+    border-color: var(--success);
+    background: rgba(16, 185, 129, 0.1);
+}
+.notification.warning { 
+    border-color: var(--warning);
+    background: rgba(245, 158, 11, 0.1);
+}
+.notification.error { 
+    border-color: var(--danger);
+    background: rgba(239, 68, 68, 0.1);
+}
 
 @keyframes slideIn {
     from {
-        transform: translateX(400px);
+        transform: translateX(100%);
         opacity: 0;
     }
     to {
@@ -760,101 +1050,30 @@ body {
 @keyframes fadeOut {
     to {
         opacity: 0;
-        transform: translateX(400px);
+        transform: translateX(100%);
     }
 }
 
-/* Loading Screen */
-#loading-screen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--dark-bg);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 9999;
-    transition: opacity 0.5s ease;
-}
-
-#loading-screen.hidden {
-    opacity: 0;
-    pointer-events: none;
-}
-
-.loading-content {
-    text-align: center;
-}
-
-.loading-content h2 {
-    font-size: 32px;
-    margin-bottom: 20px;
-    background: linear-gradient(45deg, var(--primary-color), var(--success-color));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.loading-bar {
-    width: 300px;
-    height: 10px;
-    background: rgba(0,0,0,0.5);
-    border-radius: 5px;
-    overflow: hidden;
-    margin: 20px auto;
-}
-
-.loading-progress {
-    height: 100%;
-    background: linear-gradient(90deg, var(--primary-color), var(--success-color));
-    animation: loading 1.5s infinite;
-    width: 50%;
-}
-
-@keyframes loading {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(300%); }
-}
-
-/* Scrollbar Styling */
-::-webkit-scrollbar {
-    width: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--dark-bg);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--border-color);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--primary-color);
-}
-
-/* Hint System */
+/* Modern Hint System */
 .hint-container {
     position: fixed;
     left: 50%;
     transform: translateX(-50%);
-    background: rgba(74, 144, 226, 0.95);
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     color: white;
-    padding: 16px 32px;
-    border-radius: 8px;
-    font-size: 16px;
+    padding: var(--space-md) var(--space-xl);
+    border-radius: var(--radius-lg);
+    font-size: 1rem;
     font-weight: 500;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-    z-index: 10000;
+    box-shadow: var(--shadow-xl);
+    z-index: var(--z-tooltip);
     max-width: 600px;
     text-align: center;
     opacity: 0;
-    transition: opacity 0.5s ease, transform 0.5s ease;
+    transition: all var(--transition-normal);
     pointer-events: none;
-    border: 2px solid rgba(255, 255, 255, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
 }
 
 .hint-container.center {
@@ -882,11 +1101,11 @@ body {
 }
 
 .hint-container.top.visible {
-    transform: translateX(-50%) translateY(10px);
+    transform: translateX(-50%) translateY(8px);
 }
 
 .hint-container.bottom.visible {
-    transform: translateX(-50%) translateY(-10px);
+    transform: translateX(-50%) translateY(-8px);
 }
 
 /* Hint glow effect */
@@ -897,51 +1116,149 @@ body {
     left: -2px;
     right: -2px;
     bottom: -2px;
-    background: linear-gradient(45deg, #4A90E2, #2ECC71, #4A90E2);
-    border-radius: 8px;
+    background: linear-gradient(45deg, var(--primary), var(--secondary), var(--primary));
+    border-radius: var(--radius-lg);
     z-index: -1;
     opacity: 0;
-    transition: opacity 0.5s ease;
+    transition: opacity var(--transition-normal);
 }
 
 .hint-container.visible::before {
-    opacity: 0.5;
-    animation: hintGlow 2s ease-in-out infinite;
+    opacity: 0.6;
+    animation: hintGlow 3s ease-in-out infinite;
 }
 
 @keyframes hintGlow {
-    0%, 100% { opacity: 0.3; }
-    50% { opacity: 0.7; }
+    0%, 100% { opacity: 0.4; }
+    50% { opacity: 0.8; }
 }
 
 /* Responsive Design */
 @media (max-width: 1400px) {
     #left-sidebar, #right-sidebar {
-        width: 220px;
+        width: 280px;
     }
     
     .build-buttons, .unit-buttons {
         grid-template-columns: 1fr;
     }
+    
+    #minimap-container {
+        width: 200px;
+        height: 150px;
+    }
 }
 
 @media (max-width: 1024px) {
     #left-sidebar, #right-sidebar {
-        width: 180px;
+        width: 240px;
     }
     
     .sidebar-section {
-        padding: 10px;
+        padding: var(--space-md);
     }
     
     #minimap-container {
         width: 180px;
         height: 135px;
+        bottom: var(--space-md);
+        right: var(--space-md);
+    }
+    
+    #camera-controls {
+        top: var(--space-md);
+        right: var(--space-md);
+    }
+    
+    .camera-btn {
+        width: 40px;
+        height: 40px;
+        font-size: 1rem;
+    }
+    
+    .hint-container {
+        font-size: 0.875rem;
+        padding: var(--space-md) var(--space-lg);
+        max-width: 500px;
+    }
+    
+    .game-over-content {
+        min-width: 320px;
+        padding: var(--space-xl);
+    }
+}
+
+@media (max-width: 768px) {
+    #topbar {
+        padding: var(--space-sm) var(--space-md);
+        flex-wrap: wrap;
+        gap: var(--space-sm);
+    }
+    
+    .topbar-left h1 {
+        font-size: 1.25rem;
+    }
+    
+    .resource-display {
+        gap: var(--space-sm);
+    }
+    
+    .resource-item {
+        padding: var(--space-xs) var(--space-sm);
+        font-size: 0.875rem;
+    }
+    
+    #left-sidebar, #right-sidebar {
+        width: 200px;
+    }
+    
+    .build-buttons, .unit-buttons {
+        grid-template-columns: 1fr;
+        gap: var(--space-sm);
+    }
+    
+    .build-btn, .unit-btn {
+        padding: var(--space-sm);
+    }
+    
+    .build-icon, .unit-icon {
+        font-size: 1.5rem;
+    }
+    
+    #minimap-container {
+        width: 160px;
+        height: 120px;
     }
     
     .hint-container {
-        font-size: 14px;
-        padding: 12px 24px;
+        font-size: 0.8rem;
+        padding: var(--space-sm) var(--space-md);
         max-width: 400px;
     }
+    
+    .game-over-content {
+        min-width: 280px;
+        padding: var(--space-lg);
+    }
+    
+    .game-over-content h2 {
+        font-size: 1.25rem;
+    }
+}
+
+/* Touch-friendly adjustments for tablets/mobile */
+@media (hover: none) and (pointer: coarse) {
+    .build-btn, .unit-btn, .action-btn, .camera-btn, .sound-btn {
+        min-height: 44px;
+        min-width: 44px;
+    }
+    
+    .control-group {
+        min-height: 48px;
+    }
+    
+    #language-select {
+        min-height: 44px;
+        padding: var(--space-sm);
+    }
 }