feat: implement modern Minecraft-inspired dark theme

[madawei2699]

Implements a modern, clean Minecraft-inspired dark theme by leveraging standard sans-serif typography with Minecraft-themed colors (Netherite darks, Cobblestone gray borders, Slime green buttons, and Gold branding highlights) and blocky rounded shapes.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[gemini-code-assist]

Code Review

This pull request updates globals.css to apply a Minecraft-themed design, introducing new color variables, custom scrollbars, and styled GUI panels, buttons, and inputs. However, the review feedback highlights critical issues caused by the aggressive use of !important and broad substring attribute selectors (such as [class*="Panel"], [class*="btn"], [class*="input"], and [class*="header"]). These global overrides break specific component styles, layouts, and form controls across the application. Additionally, there is a styling conflict for .glow-btn that overrides its hover states, and the global h1 styling disrupts page-specific headers. It is recommended to remove !important and broad selectors in favor of specific classes or CSS variables to maintain proper component encapsulation.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Including .glow-btn in both the general button style (line 110) and the primary green button style (line 150) causes a conflict. Since both rules use !important on background-color, the second rule (line 150) will always override the first. As a result, all .glow-btn buttons (such as 'Launch Planner' or 'Remix & Preview') will be styled with the green theme, and their gold hover states (line 129) will be overridden by the green hover state (line 156).

To fix this, remove .glow-btn from the primary green button selector list, and instead use a more specific class (e.g., .glow-btn-primary or .glow-btn.primary) for green buttons.

Suggested change

	.glow-btn, [class*="verifyBtn"], [class*="downloadBtn"], button[class*="primary"] {
	background-color: #388e3c !important; /* Minecraft dark green */
	border-color: #4caf50 !important;
	color: #ffffff !important;
	}
	.glow-btn:hover, [class*="verifyBtn"]:hover, [class*="downloadBtn"]:hover, button[class*="primary"]:hover {
	background-color: #4caf50 !important;
	border-color: var(--accent-green) !important;
	color: #ffffff !important;
	}
	[class*="verifyBtn"], [class*="downloadBtn"], button[class*="primary"] {
	background-color: #388e3c !important; /* Minecraft dark green */
	border-color: #4caf50 !important;
	color: #ffffff !important;
	}
	[class*="verifyBtn"]:hover, [class*="downloadBtn"]:hover, button[class*="primary"]:hover {
	background-color: #4caf50 !important;
	border-color: var(--accent-green) !important;
	color: #ffffff !important;
	}

[gemini-code-assist]

Using !important on the global h1 selector overrides the inline styles defined in components, such as the 64px font size for the hero title in src/app/page.tsx (which gets shrunk to 32px). This breaks the intended layout and visual hierarchy of the home page.

Avoid using !important on generic element selectors like h1, h2, h3, and body. Instead, refactor the inline styles into CSS classes or CSS modules, or use more specific class selectors in the global stylesheet to apply the Minecraft theme without overriding intentional page-specific styles.

[gemini-code-assist]

Using extremely broad substring attribute selectors like [class*="Panel"] and [class*="Sidebar"] combined with !important globally overrides and breaks specific component styles in CSS modules.

For example, in src/app/playground/playground.module.css:

• .leftSidebar and .rightSidebar have their specific padding (24px), background (rgba(15, 22, 36, 0.4)), and borders overridden by these global rules.
• .codePanel has its background (rgba(0, 0, 0, 0.4)), padding (12px), and border-radius (8px) overridden.

This completely breaks the layout and visual design of the playground. Avoid using broad substring selectors and !important in global stylesheets. Instead, define a standard class (e.g., .gui-panel) and apply it explicitly to elements that need the Minecraft panel style, or use CSS variables to share theme values without forcing layout properties.

[gemini-code-assist]

Using the global substring selectors [class*="btn"] and [class*="Btn"] with !important overrides and breaks specific button styles across the application.

For example, in src/app/playground/playground.module.css:

• .importBtn and .verifyBtn are designed to have a distinct cyan theme (background: rgba(0, 240, 255, 0.08), color: var(--accent-cyan), etc.). However, these global rules override their background, border, color, border-radius, and padding, turning them into standard dark grey buttons.
• Any other button with a class containing btn or Btn will lose its custom layout and styling.

Avoid using broad substring selectors and !important for button styling. Instead, style the base button element with default theme properties (without !important), and let specific classes or CSS modules override them naturally using standard CSS specificity.

[gemini-code-assist]

Using the global substring selectors [class*="input"] and [class*="select"] with !important overrides and breaks specific form control styles.

For example, in src/app/examples/examples.module.css:

• .searchInput has its custom padding (12px 18px), font-size (15px), and border-radius (8px) overridden by these global rules, shrinking the search bar and altering its appearance.

Instead of using broad substring selectors and !important, style the base input, select, and textarea elements with default theme properties (without !important), allowing CSS modules to override them naturally.

[gemini-code-assist]

Using the global substring selector [class*="header"] with !important causes a severe visual bug on the examples page.

In src/app/examples/page.tsx, the page header section uses <header className={styles.header}>. Because of the [class*="header"] selector, this text container (which is meant to be transparent and centered) will be styled with a solid background, bottom border, box shadow, and backdrop filter. This completely ruins the layout of the examples page.

Avoid using broad substring selectors like [class*="header"]. If you want to style the main site navigation header, target it specifically using a unique ID or class (e.g., #site-header or .site-header) instead of matching any class containing 'header'.