modulariza css e refina paleta do snake game

src/features/home/HomePage.tsx

@@ -6,9 +6,9 @@ const SnakeGame = lazy(() =>
 
 export function HomePage() {
   return (
-    <div className="h-full relative overflow-hidden">
-      <div className="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-20">
-        <div className="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center">
+    <div className="min-h-full relative">
+      <div className="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10 lg:py-16">
+        <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center">
           <div className="space-y-8 lg:space-y-12">
             <div className="space-y-4">
               <p className="font-['Fira_Code',sans-serif] text-[#90a1b9] text-lg">

src/features/snake-game/SnakeGame.tsx

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import './styles/snake-game.css';
 import { useSnakeGame } from './hooks/useSnakeGame';
 import { BOLT_VARIANTS } from './constants';
 import type { Direction } from './types';
@@ -52,7 +53,7 @@ export function SnakeGame({ className = '' }: SnakeGameProps) {
 
   return (
     <div
-      className={`backdrop-blur-[32px] content-stretch flex flex-col lg:flex-row gap-4 sm:gap-6 items-start p-4 sm:p-6 relative rounded-lg min-w-0 max-w-full ${className}`}
+      className={`backdrop-blur-[32px] content-stretch flex flex-col lg:flex-row gap-4 sm:gap-8 items-start p-4 sm:p-6 relative rounded-lg min-w-0 max-w-full ${className}`}
       style={{
         backgroundImage:
           'linear-gradient(152.11deg, rgba(52, 3, 78, 0.7) 1.7049%, rgba(33, 2, 60, 0.09) 81.819%)',
@@ -70,7 +71,7 @@ export function SnakeGame({ className = '' }: SnakeGameProps) {
       <div className="absolute inset-[-1px] pointer-events-none rounded-[inherit] shadow-[inset_0px_2px_0px_0px_rgba(255,255,255,0.3)]" />
 
       <div className="relative flex flex-col gap-3 w-full lg:w-auto">
-        <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center justify-between gap-2 pl-2 sm:pl-4">
           <GameTabs
             difficulty={difficulty}
             mode={mode}
@@ -105,10 +106,7 @@ export function SnakeGame({ className = '' }: SnakeGameProps) {
 
           {status === 'idle' && (
             <div className="absolute bottom-8 sm:bottom-12 left-1/2 -translate-x-1/2">
-              <button
-                onClick={handleStartClick}
-                className="bg-[#ffb86a] hover:bg-[#ffb86a]/90 transition-colors px-6 py-2.5 rounded-lg font-['Fira_Code',sans-serif] font-[450] text-[#020618] text-sm focus-visible:outline-2 focus-visible:outline-[#f8fafc] focus-visible:outline-offset-2"
-              >
+              <button onClick={handleStartClick} className="snake-btn snake-btn-primary">
                 iniciar
               </button>
             </div>
@@ -123,10 +121,7 @@ export function SnakeGame({ className = '' }: SnakeGameProps) {
           <ScoreDisplay score={score} mode={mode} combo={combo} lastEatTime={lastEatTime} />
         </div>
 
-        <button
-          onClick={actions.resetGame}
-          className="border border-[#f8fafc] hover:bg-[#f8fafc]/10 transition-colors px-3 py-2 rounded-lg font-['Fira_Code',sans-serif] text-[#f8fafc] text-xs w-full focus-visible:outline-2 focus-visible:outline-[#ffb86a] focus-visible:outline-offset-2"
-        >
+        <button onClick={actions.resetGame} className="snake-btn snake-btn-ghost snake-btn-compact w-full">
           pular
         </button>
       </div>

src/features/snake-game/components/Countdown.tsx

@@ -23,8 +23,8 @@ export function Countdown({ onFinish }: CountdownProps) {
     <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
       <div
         key={String(value)}
-        className="font-['Fira_Code',sans-serif] font-bold text-[#ffb86a] text-7xl countdown-pop"
-        style={{ textShadow: '0 0 20px rgba(255, 184, 106, 0.6)' }}
+        className="font-['Fira_Code',sans-serif] font-bold text-[#c490f7] text-7xl countdown-pop"
+        style={{ textShadow: '0 0 24px rgba(196, 144, 247, 0.7)' }}
       >
         {value === 'go' ? 'GO!' : value}
       </div>

src/features/snake-game/components/GameControls.tsx

@@ -18,7 +18,7 @@ export const GameControls = memo(function GameControls({ status, onDirection }:
   const disabled = status !== 'playing';
 
   const buttonClass =
-    'bg-[#0a0a0a] border border-[#314158] hover:border-[#43D9AD] disabled:hover:border-[#314158] disabled:opacity-50 transition-colors rounded-lg w-11 h-11 sm:w-10 sm:h-10 flex items-center justify-center';
+    'snake-arrow-btn w-11 h-11 sm:w-10 sm:h-10 flex items-center justify-center';
 
   return (
     <div className="bg-[#1d293d] rounded-lg p-3">

src/features/snake-game/components/GameOverlay.tsx

@@ -53,7 +53,7 @@ export const GameOverlay = memo(function GameOverlay({
         </p>
 
         {isCompetitive && (
-          <p className="font-['Fira_Code',sans-serif] text-[#ffb86a] text-lg">
+          <p className="font-['Fira_Code',sans-serif] text-[#46ECD5] text-lg">
             pontos: {score}
           </p>
         )}
@@ -76,7 +76,7 @@ export const GameOverlay = memo(function GameOverlay({
               <button
                 onClick={handleSave}
                 disabled={!playerName.trim()}
-                className="bg-[#43D9AD] hover:bg-[#43D9AD]/80 disabled:opacity-40 px-3 py-1.5 rounded font-['Fira_Code',sans-serif] text-[#020618] text-sm transition-colors"
+                className="snake-btn snake-btn-success snake-btn-compact"
               >
                 salvar
               </button>
@@ -136,10 +136,7 @@ export const GameOverlay = memo(function GameOverlay({
           </div>
         )}
 
-        <button
-          onClick={handleRestart}
-          className="bg-[#ffb86a] hover:bg-[#ffb86a]/90 transition-colors px-6 py-2.5 rounded-lg font-['Fira_Code',sans-serif] font-[450] text-[#020618] text-sm focus-visible:outline-2 focus-visible:outline-[#f8fafc] focus-visible:outline-offset-2"
-        >
+        <button onClick={handleRestart} className="snake-btn snake-btn-primary">
           {buttonLabel}
         </button>
       </div>

src/features/snake-game/components/GameTabs.tsx

@@ -21,32 +21,24 @@ export const GameTabs = memo(function GameTabs({
   onMode,
 }: GameTabsProps) {
   return (
-    <div className="flex gap-1 font-['Fira_Code',sans-serif] text-xs">
+    <div className="flex gap-1 items-center">
       {DIFFICULTIES.map((d) => (
         <button
           key={d}
           onClick={() => onDifficulty(d)}
           disabled={disabled}
-          className={`px-2.5 py-1.5 rounded transition-colors ${
-            difficulty === d
-              ? 'bg-[#43D9AD] text-[#020618]'
-              : 'text-[#90a1b9] hover:text-[#f8fafc] disabled:opacity-40'
-          }`}
+          className={`snake-tab ${difficulty === d ? 'snake-tab-active-green' : ''}`}
         >
           {DIFFICULTY_LABELS[d]}
         </button>
       ))}
-      <div className="w-px bg-[#314158] mx-1" />
+      <div className="w-px h-5 bg-[#314158] mx-1" />
       {MODES.map((m) => (
         <button
           key={m}
           onClick={() => onMode(m)}
           disabled={disabled}
-          className={`px-2.5 py-1.5 rounded transition-colors ${
-            mode === m
-              ? 'bg-[#9d4edd] text-[#f8fafc]'
-              : 'text-[#90a1b9] hover:text-[#f8fafc] disabled:opacity-40'
-          }`}
+          className={`snake-tab ${mode === m ? 'snake-tab-active-purple' : ''}`}
         >
           {MODE_LABELS[m]}
         </button>

src/features/snake-game/components/HighScoreBadge.tsx

@@ -4,7 +4,7 @@ interface HighScoreBadgeProps {
 
 export function HighScoreBadge({ highScore }: HighScoreBadgeProps) {
   return (
-    <div className="font-['Fira_Code',sans-serif] text-[11px] text-[#ffb86a] bg-[#020618]/80 border border-[#ffb86a]/40 px-2 py-1 rounded">
+    <div className="font-['Fira_Code',sans-serif] text-[11px] text-[#46ECD5] bg-[#020618]/80 border border-[#46ECD5]/40 px-2 py-1 rounded whitespace-nowrap shrink-0">
       best: {highScore}
     </div>
   );

src/features/snake-game/components/PauseOverlay.tsx

@@ -9,23 +9,17 @@ export const PauseOverlay = memo(function PauseOverlay({ onResume, onQuit }: Pau
   return (
     <div className="absolute inset-0 bg-[#0a1628]/90 backdrop-blur-sm rounded-lg flex items-center justify-center z-20">
       <div className="text-center space-y-5 p-4">
-        <p className="font-['Fira_Code',sans-serif] text-[#ffb86a] text-2xl font-bold">
+        <p className="font-['Fira_Code',sans-serif] text-[#c490f7] text-2xl font-bold">
           pausado
         </p>
         <p className="font-['Fira_Code',sans-serif] text-[#90a1b9] text-xs">
           // pressione espaco para continuar
         </p>
         <div className="flex flex-col gap-2 items-center">
-          <button
-            onClick={onResume}
-            className="bg-[#43D9AD] hover:bg-[#43D9AD]/80 transition-colors px-6 py-2 rounded-lg font-['Fira_Code',sans-serif] text-[#020618] text-sm w-40 focus-visible:outline-2 focus-visible:outline-[#ffb86a] focus-visible:outline-offset-2"
-          >
+          <button onClick={onResume} className="snake-btn snake-btn-success w-40">
             continuar
           </button>
-          <button
-            onClick={onQuit}
-            className="border border-[#90a1b9] hover:border-[#f8fafc] hover:text-[#f8fafc] transition-colors px-6 py-2 rounded-lg font-['Fira_Code',sans-serif] text-[#90a1b9] text-sm w-40 focus-visible:outline-2 focus-visible:outline-[#ffb86a] focus-visible:outline-offset-2"
-          >
+          <button onClick={onQuit} className="snake-btn snake-btn-ghost w-40">
             sair
           </button>
         </div>

src/features/snake-game/constants/index.ts

@@ -23,7 +23,7 @@ export const DIFFICULTY_LABELS: Record<Difficulty, string> = {
 
 export const FOOD_TYPES: Record<FoodType, { points: number; color: string; label: string; weight: number }> = {
   function: { points: 1, color: '#46ECD5', label: 'function()', weight: 70 },
-  class: { points: 2, color: '#ffb86a', label: 'class{}', weight: 22 },
+  class: { points: 2, color: '#ffa1ad', label: 'class{}', weight: 22 },
   async: { points: 3, color: '#b14eff', label: 'async()', weight: 8 },
 };