fix: exclude css from biome and revert css changes

Author: Subham-KRLX

.pre-commit-config.yaml

@@ -118,7 +118,8 @@ repos:
     hooks:
       - id: biome-check
         name: run biome-check
-        description: Run Biome linter and formatter for JS, CSS, and JSON files
+        description: Run Biome linter and formatter for JS and JSON files
+        types_or: [javascript, json]
         additional_dependencies: ["@biomejs/biome"]
 
   - repo: https://github.com/igorshubovych/markdownlint-cli

biome.json

@@ -10,5 +10,8 @@
     "enabled": true,
     "indentStyle": "space",
     "indentWidth": 2
+  },
+  "files": {
+    "includes": ["**/*.js", "**/*.json"]
   }
 }

src/assets/css/style.css

@@ -66,7 +66,7 @@ body {
 .user-card h2,
 .profile-link,
 .user-card a {
-  color: var(--accent);
+  color: var(--accent) !important;
   font-weight: 800;
   text-decoration: none;
   /* Animate ONLY the color property when theme changes */
@@ -88,16 +88,16 @@ body {
 
 /* Button to trigger Screenshot Mode in the Dev Panel */
 .screenshot-btn {
-  border-color: var(--text-muted);
-  color: var(--text-muted);
-  font-size: 0.6rem;
+  border-color: var(--text-muted) !important;
+  color: var(--text-muted) !important;
+  font-size: 0.6rem !important;
   margin-top: 10px;
 }
 
 /* If your links look like tags/pills */
 .link-pill {
-  background-color: var(--accent-light);
-  color: var(--accent);
+  background-color: var(--accent-light) !important;
+  color: var(--accent) !important;
   padding: 0.2rem 0.6rem;
   border-radius: 6px;
   font-size: 0.8rem;
@@ -110,8 +110,8 @@ body {
 
 /* If you have a specific button-style profile link */
 .profile-btn {
-  background-color: var(--accent-light);
-  color: var(--accent);
+  background-color: var(--accent-light) !important;
+  color: var(--accent) !important;
   border: 1px solid var(--accent);
   padding: 0.5rem 1rem;
   border-radius: 8px;
@@ -120,8 +120,8 @@ body {
 }
 
 .profile-btn:hover {
-  background-color: var(--accent);
-  color: #ffffff;
+  background-color: var(--accent) !important;
+  color: #ffffff !important;
   box-shadow: 0 4px 15px var(--accent-light);
 }
 
@@ -133,8 +133,8 @@ body {
   justify-content: center;
   gap: 0.4rem;
   padding: 0.4rem 0.9rem;
-  background-color: var(--accent-light);
-  color: var(--accent);
+  background-color: var(--accent-light) !important;
+  color: var(--accent) !important;
   border: 1px solid rgba(var(--accent-rgb), 0.2);
   border-radius: 9999px;
   font-size: 0.7rem;
@@ -146,8 +146,8 @@ body {
 }
 
 .skill-item:hover {
-  background-color: var(--accent);
-  color: #ffffff;
+  background-color: var(--accent) !important;
+  color: #ffffff !important;
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
 }
@@ -156,9 +156,9 @@ body {
  * 3. BUTTONS & SHIMMER EFFECTS
  */
 .surprise-btn {
-  background-color: #2563eb;
-  color: #ffffff;
-  display: inline-flex;
+  background-color: #2563eb !important;
+  color: #ffffff !important;
+  display: inline-flex !important;
   align-items: center;
   justify-content: center;
   padding: 0.6rem 1.5rem;
@@ -175,7 +175,7 @@ body {
 }
 
 .dark .surprise-btn {
-  background-color: var(--accent);
+  background-color: var(--accent) !important;
 }
 
 .surprise-btn:hover {
@@ -211,7 +211,7 @@ body {
  * 4. DEVELOPER TOOLS - INDESTRUCTIBLE VIEWPORT PANEL
  */
 #dev-tools {
-  position: fixed;
+  position: fixed !important;
   top: 1rem;
   right: 1rem;
   width: 280px;
@@ -225,24 +225,24 @@ body {
   padding: 1.25rem;
   border-radius: 12px;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
-  z-index: 2147483647;
+  z-index: 2147483647 !important;
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transform: translateZ(0); /* Force layer isolation */
 }
 
 /* NUCLEAR LOCK: Forces stability during page-wide glitches */
 #dev-tools[data-lock="true"],
 html body #dev-tools[data-lock="true"] {
-  display: block;
-  visibility: visible;
-  opacity: 1;
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  transform: none;
-  animation: none;
-  border-left-color: #ef4444;
-  box-shadow: 0 0 40px rgba(239, 68, 68, 0.6);
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  position: fixed !important;
+  top: 1rem !important;
+  right: 1rem !important;
+  transform: none !important;
+  animation: none !important;
+  border-left-color: #ef4444 !important;
+  box-shadow: 0 0 40px rgba(239, 68, 68, 0.6) !important;
 }
 
 #dev-tools button {
@@ -268,16 +268,16 @@ html body #dev-tools[data-lock="true"] {
 
 /* Console Neon Overrides */
 #dev-tools button[onclick*="matrix"] {
-  color: #00ff41;
+  color: #00ff41 !important;
 }
 #dev-tools button[onclick*="konami"] {
-  color: #ffcc00;
+  color: #ffcc00 !important;
 }
 #dev-tools button[onclick*="gravity"] {
-  color: #ff3333;
+  color: #ff3333 !important;
 }
 #dev-tools button[onclick*="badge_click"] {
-  color: #bc13fe;
+  color: #bc13fe !important;
 }
 
 /**
@@ -302,8 +302,8 @@ html body #dev-tools[data-lock="true"] {
 }
 
 #repair-btn {
-  background-color: #2563eb; /* Restore to Blue */
-  color: #fff;
+  background-color: #2563eb !important; /* Restore to Blue */
+  color: #fff !important;
   border: 4px solid #fff;
   border-radius: 9999px;
   padding: 1.5rem 3rem;
@@ -375,7 +375,7 @@ html body #dev-tools[data-lock="true"] {
 /* Ensure the card can show the trace glow */
 .user-card.selected-fancy {
   z-index: 50;
-  overflow: visible;
+  overflow: visible !important;
   transform: scale(1.02);
   transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
@@ -420,8 +420,8 @@ html body #dev-tools[data-lock="true"] {
 
 /* Special styling for those who have reached Level 5 (Data Miner) */
 body[data-level="5"] .skill-item {
-  border-color: #06b6d4; /* Data Miner Cyan */
-  background: rgba(6, 182, 212, 0.1);
+  border-color: #06b6d4 !important; /* Data Miner Cyan */
+  background: rgba(6, 182, 212, 0.1) !important;
   position: relative;
   overflow: hidden;
 }
@@ -466,8 +466,8 @@ body[data-level="5"] .skill-item::before {
 /* Level 5 Specific Visual Perk */
 .level-architect .skill-item,
 body[data-level="5"] .skill-item {
-  border-color: #06b6d4;
-  background: rgba(6, 182, 212, 0.1);
+  border-color: #06b6d4 !important;
+  background: rgba(6, 182, 212, 0.1) !important;
   box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
 }
 
@@ -496,7 +496,7 @@ body[data-level="6"]::after {
 /* Added via JS when XP increases */
 .xp-pulse {
   transform: scale(1.3);
-  color: white;
+  color: white !important;
 }
 #jump-lvl {
   font-family: "Courier New", monospace;
@@ -505,18 +505,18 @@ body[data-level="6"]::after {
 #jump-lvl {
   appearance: textfield; /* Removes default arrows */
   -webkit-appearance: none;
-  line-height: 30px;
+  line-height: 30px !important;
 }
 
 #jump-lvl::placeholder {
-  color: rgba(0, 255, 204, 0.3);
+  color: rgba(0, 255, 204, 0.3) !important;
 }
 
 /* Force standard text color even on focus */
 #jump-lvl:focus {
-  outline: 2px solid #00ffcc;
-  background-color: #000;
-  color: #00ffcc;
+  outline: 2px solid #00ffcc !important;
+  background-color: #000 !important;
+  color: #00ffcc !important;
 }
 /* Base Force Aura Animation */
 @keyframes force-pulse {
@@ -536,7 +536,7 @@ body[data-level="6"]::after {
 
 /* Ensure the parent container has a background so you can see the 'empty' part */
 #game-stats .bg-black\/10 {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.1) !important;
   min-width: 80px; /* Ensure it hasn't collapsed to 0 width */
   height: 6px;
 }
@@ -545,8 +545,8 @@ body[data-level="6"]::after {
 #level-progress {
   height: 100%;
   background-color: var(--accent); /* This is the level color */
-  transition: width 0.3s ease-in-out; /* Make it smooth */
-  display: block;
+  transition: width 0.3s ease-in-out !important; /* Make it smooth */
+  display: block !important;
 }
 
 /* Force Glow for the Badge */
@@ -571,7 +571,7 @@ body[data-level="6"]::after {
   letter-spacing: 0.02em;
 
   /* Remove any existing filters that cause fuzziness */
-  filter: none;
+  filter: none !important;
   transition: color 0.3s ease;
 }
 
@@ -814,12 +814,12 @@ a:hover {
 }
 /* Maximize State */
 .console-maximized {
-  width: 90vw;
-  height: auto;
-  bottom: 5vh;
-  right: 5vw;
-  left: 5vw;
-  z-index: 2000;
+  width: 90vw !important;
+  height: auto !important;
+  bottom: 5vh !important;
+  right: 5vw !important;
+  left: 5vw !important;
+  z-index: 2000 !important;
 }
 
 #matrix-console-output {
@@ -860,9 +860,9 @@ a:hover {
 
 /* Full-screen Force Field */
 .force-field-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 999999;
+  position: fixed !important;
+  inset: 0 !important;
+  z-index: 999999 !important;
   background: radial-gradient(
     circle,
     rgba(0, 150, 255, 0.1) 0%,
@@ -912,17 +912,3 @@ a:hover {
     opacity: 0;
   }
 }
-#phaser-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 9999; /* Ensures it sits ABOVE your website content */
-  pointer-events: none; /* Let's start with none so it doesn't block the heart */
-}
-
-/* Ensure the canvas itself fills the container */
-#phaser-container canvas {
-  display: block;
-}