✨ Enhance UI styling and add file size check with error handling for large raw gamemaster files

code/websites/pokedex.online/src/views/GamemasterExplorer.vue

@@ -450,6 +450,16 @@ async function loadFile() {
     loading.value = true;
     error.value = null;
 
+    // Check if raw file is too large (> 50MB)
+    if (selectedFile.value === 'raw') {
+      const rawFile = status.value.available?.find(f => f.filename.includes('raw'));
+      if (rawFile && rawFile.size > 50 * 1024 * 1024) {
+        error.value = '⚠️ Raw gamemaster file is very large (' + formatSize(rawFile.size) + '). It may be slow to load. Try a specific file type instead (Pokemon, All Forms, or Moves).';
+        loading.value = false;
+        return;
+      }
+    }
+
     let data;
     switch (selectedFile.value) {
       case 'pokemon':
@@ -726,11 +736,17 @@ onMounted(() => {
 <style scoped>
 .gamemaster-explorer {
   min-height: 100vh;
-  background: var(--bg-primary, #ffffff);
-  color: var(--text-primary, #1a1a1a);
-  padding: 1rem;
-  max-width: 1600px;
+  padding: 2rem 1rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.explorer-container {
+  max-width: 1200px;
   margin: 0 auto;
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }
 
 /* Loading & Error States */
@@ -767,36 +783,32 @@ onMounted(() => {
 /* Header */
 .explorer-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-  border-bottom: 2px solid #e0e0e0;
   gap: 1rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
 }
 
 .explorer-header h1 {
   margin: 0;
-  font-size: 1.75rem;
-  flex: 1;
+  font-size: 2.5rem;
+  color: #333;
 }
 
 .back-button {
   padding: 0.5rem 1rem;
-  border-radius: 8px;
-  background: #f5f5f5;
-  border: 1px solid #ccc;
+  background: #667eea;
+  color: white;
   text-decoration: none;
-  color: #1a1a1a;
-  cursor: pointer;
-  font-size: 0.9rem;
-  white-space: nowrap;
-  transition: all 0.2s ease;
+  border-radius: 6px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  display: inline-block;
 }
 
 .back-button:hover {
-  background: #e0e0e0;
-  border-color: #999;
+  background: #5568d3;
+  transform: translateX(-2px);
 }
 
 .header-controls {
@@ -808,17 +820,20 @@ onMounted(() => {
   width: 44px;
   height: 44px;
   border-radius: 8px;
-  border: 1px solid #ccc;
-  background: white;
+  border: none;
+  background: #f8f9fa;
   cursor: pointer;
   font-size: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.3s ease;
+  border: 1px solid #e9ecef;
 }
 
 .btn-icon:hover {
-  background: #f5f5f5;
+  background: #e9ecef;
+  border-color: #dee2e6;
 }
 
 /* Help & Settings Panels */
@@ -1184,20 +1199,31 @@ onMounted(() => {
 /* Primary button styles */
 .btn-primary,
 .btn-retry {
-  display: inline-block;
   padding: 0.75rem 1.5rem;
-  background: #2980b9;
-  color: #ffffff;
+  background: #667eea;
+  color: white;
   text-decoration: none;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 1rem;
+  font-weight: 600;
   min-height: 44px;
+  transition: all 0.3s ease;
+  display: inline-block;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
-.btn-primary:hover,
-.btn-retry:hover {
-  background: #21618c;
+.btn-primary:hover:not(:disabled),
+.btn-retry:hover:not(:disabled) {
+  background: #5568d3;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 </style>