diff --git a/experimental/2nub/.claude/settings.local.json b/experimental/2nub/.claude/settings.local.json
index 466fe3b..e1b4c77 100644
--- a/experimental/2nub/.claude/settings.local.json
+++ b/experimental/2nub/.claude/settings.local.json
@@ -15,7 +15,10 @@
       "Bash(npm run:*)",
       "Bash(npx tsc:*)",
       "Bash(npm install)",
-      "WebFetch(domain:socket.io)"
+      "WebFetch(domain:socket.io)",
+      "Bash(timeout 10s npm run dev:client)",
+      "Bash(rm:*)",
+      "Bash(timeout 8s npm run dev:client)"
     ],
     "deny": [],
     "ask": []
diff --git a/experimental/2nub/package-lock.json b/experimental/2nub/package-lock.json
index 34f4e7e..d58ba5a 100644
--- a/experimental/2nub/package-lock.json
+++ b/experimental/2nub/package-lock.json
@@ -17,6 +17,7 @@
         "socket.io-client": "^4.7.5"
       },
       "devDependencies": {
+        "@parcel/transformer-sass": "^2.16.1",
         "@types/cors": "^2.8.19",
         "@types/express": "^5.0.6",
         "@types/jest": "^29.5.0",
@@ -2480,6 +2481,26 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@parcel/transformer-sass": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-sass/-/transformer-sass-2.16.1.tgz",
+      "integrity": "sha512-ypLLM+d8YTZveUEoXiCtk+J9Q1sHtjhq9kFANTbAgEvJB4dp2hZNHEQ63Y49Mh9m4IdnBQ1L5oAvUtYzVujFEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@parcel/plugin": "2.16.1",
+        "@parcel/source-map": "^2.1.1",
+        "sass": "^1.88.0"
+      },
+      "engines": {
+        "node": ">= 16.0.0",
+        "parcel": "^2.16.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@parcel/transformer-svg": {
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/@parcel/transformer-svg/-/transformer-svg-2.16.1.tgz",
@@ -3915,6 +3936,22 @@
         "node": ">=10"
       }
     },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
@@ -5218,6 +5255,13 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/immutable": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
+      "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/import-local": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
@@ -7272,6 +7316,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -7396,6 +7454,27 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/sass": {
+      "version": "1.94.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz",
+      "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -7788,6 +7867,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
diff --git a/experimental/2nub/package.json b/experimental/2nub/package.json
index 6cc1336..df2e9f4 100644
--- a/experimental/2nub/package.json
+++ b/experimental/2nub/package.json
@@ -22,6 +22,7 @@
     "socket.io-client": "^4.7.5"
   },
   "devDependencies": {
+    "@parcel/transformer-sass": "^2.16.1",
     "@types/cors": "^2.8.19",
     "@types/express": "^5.0.6",
     "@types/jest": "^29.5.0",
diff --git a/experimental/2nub/src/client/App.tsx b/experimental/2nub/src/client/App.tsx
index c3c02f1..93d7986 100644
--- a/experimental/2nub/src/client/App.tsx
+++ b/experimental/2nub/src/client/App.tsx
@@ -7,6 +7,7 @@ import { SocketEventProvider } from './contexts/SocketEventContext';
 import { GameState, GameStateClient } from '../types';
 import { buildApiUrl } from './config/api';
 import { sessionStorage } from './utils/sessionStorage';
+import './styles/main.scss';
 
 const App: React.FC = () => {
   const [games, setGames] = useState<GameState[]>([]);
@@ -224,59 +225,21 @@ const App: React.FC = () => {
 
   return (
     <SocketEventProvider eventHandlers={socketEventHandlers}>
-      <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
-        <header style={{ marginBottom: '30px' }}>
-          <h1 style={{ color: '#333', marginBottom: '10px' }}>2nub Game Boilerplate</h1>
-          <div style={{ 
-            display: 'flex', 
-            alignItems: 'center', 
-            gap: '15px', 
-            marginBottom: '10px' 
-          }}>
-            <div style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '8px',
-              padding: '4px 8px',
-              borderRadius: '4px',
-              backgroundColor: isConnected ? '#d4edda' : '#f8d7da',
-              color: isConnected ? '#155724' : '#721c24',
-              border: isConnected ? '1px solid #c3e6cb' : '1px solid #f5c6cb',
-              fontSize: '12px'
-            }}>
-              <div style={{
-                width: '8px',
-                height: '8px',
-                borderRadius: '50%',
-                backgroundColor: isConnected ? '#28a745' : '#dc3545'
-              }} />
+      <div className="app">
+        <header className="header">
+          <h1>2nub Game Boilerplate</h1>
+          <div className="connection-bar">
+            <div className={`connection-status ${isConnected ? 'connected' : 'disconnected'}`}>
+              <div className={`status-dot ${isConnected ? 'connected' : 'disconnected'}`} />
               {isConnected ? 'Connected' : 'Disconnected'}
             </div>
             {!isConnected && (
-              <button
-                onClick={connect}
-                style={{
-                  padding: '4px 8px',
-                  fontSize: '12px',
-                  backgroundColor: '#007bff',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '4px',
-                  cursor: 'pointer'
-                }}
-              >
+              <button onClick={connect} className="button--primary button--small">
                 Reconnect
               </button>
             )}
             {view === 'game' && (
-              <button onClick={leaveGame} style={{
-                padding: '5px 15px',
-                backgroundColor: '#dc3545',
-                color: 'white',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer'
-              }}>
+              <button onClick={leaveGame} className="button--danger">
                 Leave Game
               </button>
             )}
@@ -284,7 +247,7 @@ const App: React.FC = () => {
         </header>
 
         {view === 'list' ? (
-          <div style={{ display: 'grid', gap: '30px', gridTemplateColumns: '1fr 2fr' }}>
+          <div className="main-grid">
             <CreateGame onCreateGame={createGame} />
             <GameList games={games} onJoinGame={joinGame} onRejoinGame={attemptRejoin} onRefresh={fetchGames} />
           </div>
diff --git a/experimental/2nub/src/client/components/CreateGame.tsx b/experimental/2nub/src/client/components/CreateGame.tsx
index 65d6d24..539eba2 100644
--- a/experimental/2nub/src/client/components/CreateGame.tsx
+++ b/experimental/2nub/src/client/components/CreateGame.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import '../styles/main.scss';
 
 interface CreateGameProps {
   onCreateGame: (name: string) => void;
@@ -16,16 +17,11 @@ export const CreateGame: React.FC<CreateGameProps> = ({ onCreateGame }) => {
   };
 
   return (
-    <div style={{
-      backgroundColor: 'white',
-      padding: '20px',
-      borderRadius: '8px',
-      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-    }}>
-      <h2 style={{ marginTop: 0, color: '#333' }}>Create New Game</h2>
-      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+    <div className="create-game">
+      <h2>Create New Game</h2>
+      <form onSubmit={handleSubmit} className="form">
         <div>
-          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+          <label className="label">
             Game Name:
           </label>
           <input
@@ -33,28 +29,11 @@ export const CreateGame: React.FC<CreateGameProps> = ({ onCreateGame }) => {
             value={gameName}
             onChange={(e) => setGameName(e.target.value)}
             placeholder="Enter game name..."
-            style={{
-              padding: '8px 12px',
-              border: '1px solid #ddd',
-              borderRadius: '4px',
-              fontSize: '16px'
-            }}
+            className="input"
             required
           />
         </div>
-        <button
-          type="submit"
-          style={{
-            padding: '12px',
-            backgroundColor: '#007bff',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            fontSize: '16px',
-            fontWeight: 'bold',
-            cursor: 'pointer'
-          }}
-        >
+        <button type="submit" className="button--primary button--large">
           Create Game
         </button>
       </form>
diff --git a/experimental/2nub/src/client/components/GameBoard.tsx b/experimental/2nub/src/client/components/GameBoard.tsx
index 7901df9..5a257ed 100644
--- a/experimental/2nub/src/client/components/GameBoard.tsx
+++ b/experimental/2nub/src/client/components/GameBoard.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { GameStateClient } from '../../types';
 import { Onub } from './Onub';
+import '../styles/main.scss';
 
 interface GameBoardProps {
   game: GameStateClient | null;
@@ -27,39 +28,11 @@ export const GameBoard: React.FC<GameBoardProps> = ({ game, gameId, currentPlaye
     // If we have a gameId but no game data, show loading state
     if (gameId) {
       return (
-        <div style={{
-          backgroundColor: 'white',
-          padding: '40px',
-          borderRadius: '8px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-          textAlign: 'center'
-        }}>
+        <div className="loading-state">
           <h2>Loading game...</h2>
           <p>Connecting to game and loading data...</p>
-          <div style={{
-            margin: '20px auto',
-            width: '40px',
-            height: '40px',
-            border: '4px solid #f3f3f3',
-            borderTop: '4px solid #007bff',
-            borderRadius: '50%',
-            animation: 'spin 1s linear infinite'
-          }} />
-          <style>{`
-            @keyframes spin {
-              0% { transform: rotate(0deg); }
-              100% { transform: rotate(360deg); }
-            }
-          `}</style>
-          <button onClick={onLeave} style={{
-            padding: '10px 20px',
-            backgroundColor: '#6c757d',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            marginTop: '20px'
-          }}>
+          <div className="loading-spinner" />
+          <button onClick={onLeave} className="button--secondary">
             Cancel
           </button>
         </div>
@@ -68,23 +41,10 @@ export const GameBoard: React.FC<GameBoardProps> = ({ game, gameId, currentPlaye
     
     // No gameId means the game doesn't exist
     return (
-      <div style={{
-        backgroundColor: 'white',
-        padding: '40px',
-        borderRadius: '8px',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-        textAlign: 'center'
-      }}>
+      <div className="not-found">
         <h2>Game not found</h2>
         <p>The game you were in no longer exists.</p>
-        <button onClick={onLeave} style={{
-          padding: '10px 20px',
-          backgroundColor: '#007bff',
-          color: 'white',
-          border: 'none',
-          borderRadius: '4px',
-          cursor: 'pointer'
-        }}>
+        <button onClick={onLeave} className="button--primary">
           Back to Game List
         </button>
       </div>
@@ -97,32 +57,14 @@ export const GameBoard: React.FC<GameBoardProps> = ({ game, gameId, currentPlaye
   const isCurrentPlayerDisconnected = currentPlayer && !currentPlayer.connected;
 
   return (
-    <div style={{
-      backgroundColor: 'white',
-      padding: '30px',
-      borderRadius: '8px',
-      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-    }}>
-      <div style={{ 
-        display: 'flex', 
-        justifyContent: 'space-between', 
-        alignItems: 'center', 
-        marginBottom: '30px',
-        paddingBottom: '20px',
-        borderBottom: '2px solid #eee'
-      }}>
+    <div className="game-board">
+      <div className="header">
         <div>
-          <h1 style={{ margin: '0 0 8px 0', color: '#333' }}>{game.name}</h1>
-          <div style={{ display: 'flex', gap: '20px', fontSize: '14px', color: '#666' }}>
+          <h1>{game.name}</h1>
+          <div className="game-meta">
             <span>Game ID: <strong>{gameId}</strong></span>
             <span>Players: <strong>{game.players.length}</strong></span>
-            <span style={{ 
-              padding: '2px 8px', 
-              borderRadius: '12px', 
-              backgroundColor: game.state.state === 'lobby' ? '#28a745' : '#ffc107',
-              color: 'white',
-              textTransform: 'capitalize'
-            }}>
+            <span className={`status-badge ${game.state.state === 'lobby' ? 'waiting' : 'in-progress'}`}>
               {game.state.state === 'lobby' ? 'Waiting' : game.state.state}
             </span>
           </div>
@@ -130,24 +72,12 @@ export const GameBoard: React.FC<GameBoardProps> = ({ game, gameId, currentPlaye
       </div>
 
       {isCurrentPlayerDisconnected && (
-        <div style={{
-          backgroundColor: '#f8d7da',
-          border: '2px solid #f5c6cb',
-          borderRadius: '6px',
-          padding: '15px',
-          marginBottom: '20px',
-          color: '#721c24'
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-            <div style={{
-              width: '20px',
-              height: '20px',
-              borderRadius: '50%',
-              backgroundColor: '#dc3545'
-            }} />
-            <div>
+        <div className="alert alert--danger">
+          <div className="alert-content">
+            <div className="status-indicator disconnected" />
+            <div className="alert-text">
               <strong>You are currently disconnected</strong>
-              <p style={{ margin: '5px 0 0 0', fontSize: '14px' }}>
+              <p>
                 Trying to reconnect... You can refresh the page or use the rejoin feature if needed.
               </p>
             </div>
@@ -156,59 +86,36 @@ export const GameBoard: React.FC<GameBoardProps> = ({ game, gameId, currentPlaye
       )}
 
       {currentPlayer && (
-        <div style={{
-          backgroundColor: '#f8f9fa',
-          padding: '15px',
-          borderRadius: '6px',
-          marginBottom: '25px',
-          border: '2px solid #007bff'
-        }}>
-          <h3 style={{ margin: '0 0 8px 0', color: '#007bff' }}>You are:</h3>
-          <p style={{ margin: 0, fontSize: '16px' }}>
+        <div className="current-player">
+          <h3>You are:</h3>
+          <p>
             <strong>{currentPlayer.name}</strong> (Seat {game.players.indexOf(currentPlayer) + 1})
           </p>
         </div>
       )}
 
-      <div style={{ marginBottom: '25px' }}>
-        <h3 style={{ marginBottom: '15px', color: '#333' }}>Players in Game:</h3>
+      <div className="players-section">
+        <h3>Players in Game:</h3>
         {playerList.length === 0 ? (
-          <p style={{ fontStyle: 'italic', color: '#666' }}>No players in the game yet.</p>
+          <p className="empty-state">No players in the game yet.</p>
         ) : (
-          <div style={{ display: 'grid', gap: '10px', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))' }}>
+          <div className="players-grid">
             {playerList.map((player) => (
-              <div key={player.id} style={{
-                padding: '12px',
-                border: `2px solid ${player.id === currentPlayerId ? '#007bff' : '#ddd'}`,
-                borderRadius: '6px',
-                backgroundColor: player.id === currentPlayerId ? '#f0f8ff' : '#fff',
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center'
-              }}>
-                <div>
-                  <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
+              <div key={player.id} className={`player-card ${player.id === currentPlayerId ? 'current' : ''}`}>
+                <div className="player-info">
+                  <div className="player-name">
                     {player.name} {player.id === currentPlayerId && '(You)'}
                   </div>
-                  <div style={{ fontSize: '14px', color: '#666' }}>
+                  <div className="player-seat">
                     Seat {game.players.indexOf(player) + 1}
                   </div>
                 </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                <div className="player-actions">
                   {player.connected && player.id !== currentPlayerId && (
                     <button
                       onClick={() => handleForceDisconnect(player.id, player.name)}
                       disabled={disconnectingPlayerId === player.id}
-                      style={{
-                        padding: '4px 8px',
-                        fontSize: '12px',
-                        backgroundColor: disconnectingPlayerId === player.id ? '#6c757d' : '#dc3545',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: disconnectingPlayerId === player.id ? 'not-allowed' : 'pointer',
-                        opacity: disconnectingPlayerId === player.id ? 0.7 : 1
-                      }}
+                      className="disconnect-btn"
                       title="Force disconnect this player"
                     >
                       {disconnectingPlayerId === player.id ? '...' : 'Disconnect'}
@@ -216,12 +123,7 @@ export const GameBoard: React.FC<GameBoardProps> = ({ game, gameId, currentPlaye
                   )}
                   <div 
                     title={player.connected ? 'Connected' : 'Disconnected'}
-                    style={{
-                      width: '12px',
-                      height: '12px',
-                      borderRadius: '50%',
-                      backgroundColor: player.connected ? '#28a745' : '#dc3545'
-                    }} 
+                    className={`status-indicator ${player.connected ? 'connected' : 'disconnected'}`}
                   />
                 </div>
               </div>
diff --git a/experimental/2nub/src/client/components/GameList.tsx b/experimental/2nub/src/client/components/GameList.tsx
index 770bf58..5f858d4 100644
--- a/experimental/2nub/src/client/components/GameList.tsx
+++ b/experimental/2nub/src/client/components/GameList.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { GameState } from '../../types';
+import '../styles/main.scss';
 
 interface GameListProps {
   games: GameState[];
@@ -67,83 +68,55 @@ export const GameList: React.FC<GameListProps> = ({ games, onJoinGame, onRejoinG
     }
   };
 
+  const getStatusClass = (state: string) => {
+    switch (state) {
+      case 'lobby': return 'waiting';
+      case 'night':
+      case 'day':
+      case 'voting': return 'night';
+      case 'finished': return 'finished';
+      default: return 'finished';
+    }
+  };
+
   return (
-    <div style={{
-      backgroundColor: 'white',
-      padding: '20px',
-      borderRadius: '8px',
-      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-    }}>
-      <div style={{ 
-        display: 'flex', 
-        justifyContent: 'space-between', 
-        alignItems: 'center', 
-        marginBottom: '20px' 
-      }}>
-        <h2 style={{ margin: 0, color: '#333' }}>Available Games</h2>
-        <button
-          onClick={onRefresh}
-          style={{
-            padding: '8px 16px',
-            backgroundColor: '#6c757d',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer'
-          }}
-        >
+    <div className="game-list">
+      <div className="header">
+        <h2>Available Games</h2>
+        <button onClick={onRefresh} className="button--secondary">
           Refresh
         </button>
       </div>
 
       {games.length === 0 ? (
-        <p style={{ textAlign: 'center', color: '#666', fontStyle: 'italic' }}>
+        <p className="empty-state">
           No games available. Create one to get started!
         </p>
       ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+        <div className="games-container">
           {games.map((game) => (
-            <div key={game.id} style={{
-              border: '1px solid #ddd',
-              borderRadius: '4px',
-              padding: '15px',
-              backgroundColor: '#f8f9fa'
-            }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
-                <div style={{ flex: 1 }}>
-                  <h3 style={{ margin: '0 0 8px 0', color: '#333' }}>{game.name}</h3>
-                  <div style={{ display: 'flex', gap: '15px', marginBottom: '10px' }}>
-                    <span style={{ fontSize: '14px', color: '#666' }}>
+            <div key={game.id} className="game-card">
+              <div className="game-content">
+                <div className="game-info">
+                  <h3>{game.name}</h3>
+                  <div className="game-meta">
+                    <span>
                       ID: <strong>{game.id}</strong>
                     </span>
-                    <span style={{ fontSize: '14px', color: '#666' }}>
+                    <span>
                       Players: <strong>{game.players.length}</strong>
                     </span>
-                    <span style={{ 
-                      fontSize: '12px', 
-                      padding: '2px 8px', 
-                      borderRadius: '12px', 
-                      backgroundColor: getStatusColor(game.state.state),
-                      color: 'white',
-                      textTransform: 'capitalize'
-                    }}>
+                    <span className={`status-badge ${getStatusClass(game.state.state)}`}>
                       {getStatusDisplayName(game.state.state)}
                     </span>
                   </div>
                   
                   {game.players.length > 0 && (
-                    <div style={{ marginBottom: '10px' }}>
-                      <strong style={{ fontSize: '14px' }}>Players:</strong>
-                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '5px', marginTop: '5px' }}>
+                    <div className="players-section">
+                      <strong>Players:</strong>
+                      <div className="player-badges">
                         {game.players.map((player) => (
-                          <span key={player.id} style={{
-                            fontSize: '12px',
-                            padding: '2px 6px',
-                            backgroundColor: player.connected ? '#d4edda' : '#f8d7da',
-                            color: player.connected ? '#155724' : '#721c24',
-                            borderRadius: '4px',
-                            border: `1px solid ${player.connected ? '#c3e6cb' : '#f5c6cb'}`
-                          }}>
+                          <span key={player.id} className={`player-badge ${player.connected ? 'connected' : 'disconnected'}`}>
                             {player.name} (Seat {game.players.indexOf(player) + 1})
                           </span>
                         ))}
@@ -152,21 +125,21 @@ export const GameList: React.FC<GameListProps> = ({ games, onJoinGame, onRejoinG
                   )}
                 </div>
 
-                <div style={{ marginLeft: '20px' }}>
+                <div className="game-actions">
                   {joiningGameId === game.id ? (
-                    <div style={{ minWidth: '300px' }}>
+                    <div className="join-form">
                       {(() => {
                         const disconnectedPlayers = game.players.filter(p => !p.connected);
                         return (
-                          <form onSubmit={(e) => handleJoinSubmit(e, game.id)} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                          <form onSubmit={(e) => handleJoinSubmit(e, game.id)} className="form">
                             {disconnectedPlayers.length > 0 && (
-                              <div style={{ marginBottom: '8px' }}>
-                                <div style={{ fontSize: '14px', fontWeight: 'bold', marginBottom: '4px' }}>
+                              <div className="existing-players">
+                                <div className="section-title">
                                   Join as disconnected player:
                                 </div>
-                                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                                <div className="radio-group">
                                   {disconnectedPlayers.map((player) => (
-                                    <label key={player.id} style={{ display: 'flex', alignItems: 'center', gap: '6px', cursor: 'pointer' }}>
+                                    <label key={player.id} className="radio-option">
                                       <input
                                         type="radio"
                                         name="joinOption"
@@ -174,7 +147,7 @@ export const GameList: React.FC<GameListProps> = ({ games, onJoinGame, onRejoinG
                                         checked={selectedExistingPlayer === player.id}
                                         onChange={() => handleExistingPlayerSelect(player.id)}
                                       />
-                                      <span style={{ fontSize: '14px' }}>
+                                      <span>
                                         {player.name} (Seat {game.players.indexOf(player) + 1})
                                       </span>
                                     </label>
@@ -183,8 +156,8 @@ export const GameList: React.FC<GameListProps> = ({ games, onJoinGame, onRejoinG
                               </div>
                             )}
                             
-                            <div style={{ borderTop: disconnectedPlayers.length > 0 ? '1px solid #ddd' : 'none', paddingTop: disconnectedPlayers.length > 0 ? '8px' : '0' }}>
-                              <label style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '8px', cursor: 'pointer' }}>
+                            <div className={disconnectedPlayers.length > 0 ? 'new-player-section divider' : 'new-player-section'}>
+                              <label className="radio-option">
                                 <input
                                   type="radio"
                                   name="joinOption"
@@ -192,7 +165,7 @@ export const GameList: React.FC<GameListProps> = ({ games, onJoinGame, onRejoinG
                                   checked={selectedExistingPlayer === null}
                                   onChange={handleNewPlayerSelect}
                                 />
-                                <span style={{ fontSize: '14px', fontWeight: 'bold' }}>
+                                <span>
                                   Join as new player:
                                 </span>
                               </label>
@@ -202,31 +175,16 @@ export const GameList: React.FC<GameListProps> = ({ games, onJoinGame, onRejoinG
                                 onChange={(e) => setPlayerName(e.target.value)}
                                 placeholder="Your name"
                                 disabled={selectedExistingPlayer !== null}
-                                style={{
-                                  padding: '6px 10px',
-                                  border: '1px solid #ddd',
-                                  borderRadius: '4px',
-                                  fontSize: '14px',
-                                  width: '200px',
-                                  backgroundColor: selectedExistingPlayer !== null ? '#f5f5f5' : 'white'
-                                }}
+                                className="input"
                                 required={selectedExistingPlayer === null}
                               />
                             </div>
                             
-                            <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
+                            <div className="form-buttons">
                               <button
                                 type="submit"
                                 disabled={!selectedExistingPlayer && !playerName.trim()}
-                                style={{
-                                  padding: '6px 12px',
-                                  backgroundColor: (!selectedExistingPlayer && !playerName.trim()) ? '#6c757d' : '#28a745',
-                                  color: 'white',
-                                  border: 'none',
-                                  borderRadius: '4px',
-                                  fontSize: '14px',
-                                  cursor: (!selectedExistingPlayer && !playerName.trim()) ? 'not-allowed' : 'pointer'
-                                }}
+                                className={(!selectedExistingPlayer && !playerName.trim()) ? 'button--secondary button--small' : 'button--success button--small'}
                               >
                                 Join
                               </button>
@@ -237,15 +195,7 @@ export const GameList: React.FC<GameListProps> = ({ games, onJoinGame, onRejoinG
                                   setSelectedExistingPlayer(null);
                                   setPlayerName('');
                                 }}
-                                style={{
-                                  padding: '6px 12px',
-                                  backgroundColor: '#6c757d',
-                                  color: 'white',
-                                  border: 'none',
-                                  borderRadius: '4px',
-                                  fontSize: '14px',
-                                  cursor: 'pointer'
-                                }}
+                                className="button--secondary button--small"
                               >
                                 Cancel
                               </button>
@@ -258,15 +208,7 @@ export const GameList: React.FC<GameListProps> = ({ games, onJoinGame, onRejoinG
                     <button
                       onClick={() => handleJoinClick(game.id)}
                       disabled={game.state.state !== 'lobby'}
-                      style={{
-                        padding: '8px 16px',
-                        backgroundColor: game.state.state !== 'lobby' ? '#6c757d' : '#28a745',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        fontSize: '14px',
-                        cursor: game.state.state !== 'lobby' ? 'not-allowed' : 'pointer'
-                      }}
+                      className={game.state.state !== 'lobby' ? 'button--secondary' : 'button--success'}
                     >
                       {game.state.state !== 'lobby' ? 'In Progress' : 'Join'}
                     </button>
diff --git a/experimental/2nub/src/client/components/Onub.tsx b/experimental/2nub/src/client/components/Onub.tsx
index 1110f7c..42e1a0b 100644
--- a/experimental/2nub/src/client/components/Onub.tsx
+++ b/experimental/2nub/src/client/components/Onub.tsx
@@ -8,23 +8,17 @@ interface OnubProps {
 }
 
 export const Onub: React.FC<OnubProps> = ({ game, currentPlayerId }) => {
-	let content = <div>
-		<p style={{ margin: '0 0 15px 0', color: '#666' }}>
+	let content = <div className="game-area__placeholder">
+		<p>
 			This is where the actual game would be implemented. The boilerplate provides:
 		</p>
-		<ul style={{ textAlign: 'left', color: '#666', margin: '0 0 20px 0', paddingLeft: '20px' }}>
+		<ul>
 			<li>Real-time player connection status</li>
 			<li>Game state synchronization via WebSockets</li>
 			<li>CRUD operations for games and players</li>
 			<li>Clean separation of server and client logic</li>
 		</ul>
-		<div style={{
-			padding: '15px',
-			backgroundColor: '#d1ecf1',
-			borderRadius: '4px',
-			color: '#0c5460',
-			border: '1px solid #bee5eb'
-		}}>
+		<div className="alert--info">
 			<strong>Ready for your game logic!</strong> Add your game mechanics, rules, and UI components here.
 		</div>
 	</div>;
@@ -37,12 +31,8 @@ export const Onub: React.FC<OnubProps> = ({ game, currentPlayerId }) => {
 	}
 
 	return (
-		<div style={{
-			backgroundColor: '#f8f9fa',
-			padding: '20px',
-			borderRadius: '6px',
-		}}>
-			<h3 style={{ margin: '0 0 10px 0', color: '#333' }}>Game Area</h3>
+		<div className="game-area">
+			<h3>Game Area</h3>
 			{content}
 		</div>
 	);
diff --git a/experimental/2nub/src/client/components/OnubLobby.tsx b/experimental/2nub/src/client/components/OnubLobby.tsx
index e3fcff5..e1a60d1 100644
--- a/experimental/2nub/src/client/components/OnubLobby.tsx
+++ b/experimental/2nub/src/client/components/OnubLobby.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { GameStateClient, RoleId, ROLES, StateLobby } from '../../types';
 import { useSocketEvents } from '../hooks/useSocketEvents';
+import '../styles/main.scss';
 
 interface OnubLobbyProps {
     stateLobby: StateLobby;
@@ -69,78 +70,95 @@ export const OnubLobby: React.FC<OnubLobbyProps> = ({ stateLobby, playerCount, c
         throw new Error('Not implemented: handleSubmit in OnubLobby');
     }
 
-    return <div>
-        <h1>Lobby</h1>
-        <p>
-            Waiting for players to join...
-        </p>
-        <form onSubmit={handleSubmit}>
-            <h2>Roles Available to be Added</h2>
-            <ul>
-                {ROLES.map(roleId => (
-                    <li key={roleId}>
-                        {roleId}{" "}
-                        <button onClick={makeRoleAddHandler(roleId)}>Add</button>
-                    </li>
-                ))}
-            </ul>
-            <h2>Order of Roles</h2>
-            <ol>
-                {stateLobby.ruleset.roleOrder.map((roleId, index) => (
-                    <li key={index}>
-                        <button onClick={makeRoleMoveUpHandler(index)}>⬆️</button>
-                        <button onClick={makeRoleMoveDownHandler(index)}>⬇️</button>
-                        <button onClick={makeRoleDeleteHandler(index)}>❌</button>
-                        {roleId}
-                    </li>
-                ))}
-            </ol>
-            <h2>Special Rules</h2>
-            <label>
-                <input
-                    type="checkbox"
-                    checked={stateLobby.ruleset.special.maybeAllTanners.enabled}
-                    onChange={e => {
-                        const newRuleset = {
-                            ...stateLobby.ruleset,
-                            special: {
-                                ...stateLobby.ruleset.special,
-                                maybeAllTanners: {
-                                    ...stateLobby.ruleset.special.maybeAllTanners,
-                                    enabled: e.target.checked,
-                                },
-                            }
-                        };
-                        updateRuleset(newRuleset);
-                    }}
-                />
-                Everyone is Tanner (with probability <input
-                    type="number"
-                    value={stateLobby.ruleset.special.maybeAllTanners.probability}
-                    min={0}
-                    max={1}
-                    step={0.01}
-                    onChange={e => {
-                        const value = parseFloat(e.target.value);
-                        if (isNaN(value) || !isFinite(value)) return;
-                        const newRuleset = {
-                            ...stateLobby.ruleset,
-                            special: {
-                                ...stateLobby.ruleset.special,
-                                maybeAllTanners: {
-                                    ...stateLobby.ruleset.special.maybeAllTanners,
-                                    probability: value,
-                                },
-                            }
-                        };
-                        updateRuleset(newRuleset);
-                    }}
-                />)
-            </label>
-            <h2>Start Game</h2>
-            <button type="submit" disabled={stateLobby.ruleset.roleOrder.length !== playerCount}>
-                {stateLobby.ruleset.roleOrder.length === playerCount ? 'Start Game' : 'Role count and player count must match'}
-            </button>
-        </form>
-    </div>;
+    return (
+        <div className="lobby">
+            <h1>Lobby</h1>
+            <p>Waiting for players to join...</p>
+            <form onSubmit={handleSubmit} className="form">
+                <div className="roles-section">
+                    <h2>Roles Available to be Added</h2>
+                    <ul className="roles-list">
+                        {ROLES.map(roleId => (
+                            <li key={roleId}>
+                                {roleId}{" "}
+                                <button onClick={makeRoleAddHandler(roleId)}>Add</button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+                
+                <div className="role-order">
+                    <h2>Order of Roles</h2>
+                    <ol className="role-list">
+                        {stateLobby.ruleset.roleOrder.map((roleId, index) => (
+                            <li key={index} className="role-item">
+                                <button onClick={makeRoleMoveUpHandler(index)}>⬆️</button>
+                                <button onClick={makeRoleMoveDownHandler(index)}>⬇️</button>
+                                <button onClick={makeRoleDeleteHandler(index)}>❌</button>
+                                {roleId}
+                            </li>
+                        ))}
+                    </ol>
+                </div>
+                
+                <div className="special-rules">
+                    <h2>Special Rules</h2>
+                    <label className="rule-option">
+                        <input
+                            type="checkbox"
+                            checked={stateLobby.ruleset.special.maybeAllTanners.enabled}
+                            onChange={e => {
+                                const newRuleset = {
+                                    ...stateLobby.ruleset,
+                                    special: {
+                                        ...stateLobby.ruleset.special,
+                                        maybeAllTanners: {
+                                            ...stateLobby.ruleset.special.maybeAllTanners,
+                                            enabled: e.target.checked,
+                                        },
+                                    }
+                                };
+                                updateRuleset(newRuleset);
+                            }}
+                        />
+                        Everyone is Tanner (with probability
+                        <input
+                            type="number"
+                            value={stateLobby.ruleset.special.maybeAllTanners.probability}
+                            min={0}
+                            max={1}
+                            step={0.01}
+                            onChange={e => {
+                                const value = parseFloat(e.target.value);
+                                if (isNaN(value) || !isFinite(value)) return;
+                                const newRuleset = {
+                                    ...stateLobby.ruleset,
+                                    special: {
+                                        ...stateLobby.ruleset.special,
+                                        maybeAllTanners: {
+                                            ...stateLobby.ruleset.special.maybeAllTanners,
+                                            probability: value,
+                                        },
+                                    }
+                                };
+                                updateRuleset(newRuleset);
+                            }}
+                            className="input"
+                        />)
+                    </label>
+                </div>
+                
+                <div className="start-section">
+                    <h2>Start Game</h2>
+                    <button 
+                        type="submit" 
+                        disabled={stateLobby.ruleset.roleOrder.length !== playerCount}
+                        className="button--primary button--large"
+                    >
+                        {stateLobby.ruleset.roleOrder.length === playerCount ? 'Start Game' : 'Role count and player count must match'}
+                    </button>
+                </div>
+            </form>
+        </div>
+    );
 }
\ No newline at end of file
diff --git a/experimental/2nub/src/client/styles/main.scss b/experimental/2nub/src/client/styles/main.scss
new file mode 100644
index 0000000..60d86e0
--- /dev/null
+++ b/experimental/2nub/src/client/styles/main.scss
@@ -0,0 +1,1083 @@
+// ===== VARIABLES =====
+
+// Colors
+$color-primary: #007bff;
+$color-success: #28a745;
+$color-warning: #ffc107;
+$color-danger: #dc3545;
+$color-secondary: #6c757d;
+$color-light: #f8f9fa;
+$color-dark: #333;
+$color-white: #fff;
+
+// Status colors
+$color-connected: #28a745;
+$color-disconnected: #dc3545;
+
+// Background colors
+$bg-connected: #d4edda;
+$bg-disconnected: #f8d7da;
+$bg-info: #d1ecf1;
+$bg-warning: #fff3cd;
+
+// Border colors
+$border-light: #ddd;
+$border-connected: #c3e6cb;
+$border-disconnected: #f5c6cb;
+$border-info: #bee5eb;
+
+// Text colors
+$text-dark: #333;
+$text-muted: #666;
+$text-connected: #155724;
+$text-disconnected: #721c24;
+$text-info: #0c5460;
+
+// Spacing
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 12px;
+$spacing-lg: 15px;
+$spacing-xl: 20px;
+$spacing-2xl: 30px;
+$spacing-3xl: 40px;
+
+// Border radius
+$border-radius-sm: 4px;
+$border-radius-md: 6px;
+$border-radius-lg: 8px;
+$border-radius-xl: 12px;
+$border-radius-circle: 50%;
+
+// Shadows
+$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
+$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+// Typography
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-md: 16px;
+$font-size-lg: 18px;
+
+// Breakpoints
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+
+// CSS Custom Properties for theming
+:root {
+  --color-primary: #{$color-primary};
+  --color-success: #{$color-success};
+  --color-danger: #{$color-danger};
+  --color-warning: #{$color-warning};
+  --color-secondary: #{$color-secondary};
+  --color-dark: #{$color-dark};
+  --color-white: #{$color-white};
+  
+  --spacing-sm: #{$spacing-sm};
+  --spacing-md: #{$spacing-md};
+  --spacing-lg: #{$spacing-lg};
+  --spacing-xl: #{$spacing-xl};
+  
+  --border-radius-sm: #{$border-radius-sm};
+  --border-radius-md: #{$border-radius-md};
+  --border-radius-lg: #{$border-radius-lg};
+  
+  --shadow-sm: #{$shadow-sm};
+}
+
+
+// ===== MIXINS =====
+
+// Button mixins
+@mixin button-base {
+  padding: $spacing-sm $spacing-md;
+  border: none;
+  border-radius: $border-radius-sm;
+  cursor: pointer;
+  font-size: $font-size-sm;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  display: inline-block;
+  
+  &:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+  
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+    transform: none !important;
+  }
+  
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  }
+}
+
+@mixin button-primary {
+  @include button-base;
+  background-color: $color-primary;
+  color: $color-white;
+  
+  &:hover:not(:disabled) {
+    background-color: darken($color-primary, 10%);
+  }
+}
+
+@mixin button-success {
+  @include button-base;
+  background-color: $color-success;
+  color: $color-white;
+  
+  &:hover:not(:disabled) {
+    background-color: darken($color-success, 10%);
+  }
+}
+
+@mixin button-danger {
+  @include button-base;
+  background-color: $color-danger;
+  color: $color-white;
+  
+  &:hover:not(:disabled) {
+    background-color: darken($color-danger, 10%);
+  }
+}
+
+@mixin button-secondary {
+  @include button-base;
+  background-color: $color-secondary;
+  color: $color-white;
+  
+  &:hover:not(:disabled) {
+    background-color: darken($color-secondary, 10%);
+  }
+}
+
+// Card/Panel mixins
+@mixin card {
+  background-color: $color-white;
+  padding: $spacing-xl;
+  border-radius: $border-radius-lg;
+  box-shadow: $shadow-sm;
+}
+
+@mixin card-compact {
+  background-color: $color-white;
+  padding: $spacing-lg;
+  border-radius: $border-radius-md;
+  box-shadow: $shadow-sm;
+}
+
+// Status indicator mixins
+@mixin status-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: $border-radius-circle;
+}
+
+@mixin status-badge {
+  padding: 2px $spacing-sm;
+  border-radius: $border-radius-xl;
+  font-size: $font-size-xs;
+  text-transform: capitalize;
+  color: $color-white;
+}
+
+// Form element mixins
+@mixin input-base {
+  padding: $spacing-sm $spacing-md;
+  border: 1px solid $border-light;
+  border-radius: $border-radius-sm;
+  font-size: $font-size-md;
+  
+  &:focus {
+    outline: none;
+    border-color: $color-primary;
+  }
+}
+
+// Layout mixins
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+// Loading animation
+@mixin loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid $color-primary;
+  border-radius: $border-radius-circle;
+  animation: spin 1s linear infinite;
+  margin: $spacing-xl auto;
+}
+
+
+// ===== BASE STYLES =====
+
+// Reset and base styles
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  background-color: #f5f5f5;
+  color: $text-dark;
+}
+
+// Common utility classes
+.button {
+  &--primary {
+    @include button-primary;
+  }
+  
+  &--success {
+    @include button-success;
+  }
+  
+  &--danger {
+    @include button-danger;
+  }
+  
+  &--secondary {
+    @include button-secondary;
+  }
+  
+  &--large {
+    padding: $spacing-md $spacing-xl;
+    font-size: $font-size-md;
+    font-weight: bold;
+  }
+  
+  &--small {
+    padding: $spacing-xs $spacing-sm;
+    font-size: $font-size-xs;
+  }
+}
+
+.card {
+  @include card;
+  
+  &--compact {
+    @include card-compact;
+  }
+  
+  &--light {
+    background-color: $color-light;
+    padding: $spacing-lg;
+    border-radius: $border-radius-md;
+  }
+  
+  &--bordered {
+    border: 2px solid $border-light;
+    
+    &.current-player {
+      border-color: $color-primary;
+    }
+  }
+}
+
+.status {
+  &--connected {
+    @include status-badge;
+    background-color: $color-connected;
+  }
+  
+  &--disconnected {
+    @include status-badge;
+    background-color: $color-danger;
+  }
+  
+  &--waiting {
+    @include status-badge;
+    background-color: $color-success;
+  }
+  
+  &--in-progress {
+    @include status-badge;
+    background-color: $color-warning;
+    color: $text-dark;
+  }
+  
+  &--finished {
+    @include status-badge;
+    background-color: $color-secondary;
+  }
+}
+
+.indicator {
+  &--connected {
+    @include status-indicator;
+    background-color: $color-connected;
+  }
+  
+  &--disconnected {
+    @include status-indicator;
+    background-color: $color-danger;
+  }
+}
+
+.alert {
+  padding: $spacing-lg;
+  border-radius: $border-radius-md;
+  margin-bottom: $spacing-xl;
+  
+  &--info {
+    background-color: $bg-info;
+    color: $text-info;
+    border: 1px solid $border-info;
+  }
+  
+  &--warning {
+    background-color: $bg-warning;
+    color: $color-dark;
+    border: 1px solid #ffeaa7;
+  }
+  
+  &--danger {
+    background-color: $bg-disconnected;
+    color: $text-disconnected;
+    border: 2px solid $border-disconnected;
+  }
+}
+
+.loading-spinner {
+  @include loading-spinner;
+}
+
+// Layout utilities
+.flex {
+  display: flex;
+  
+  &--center {
+    @include flex-center;
+  }
+  
+  &--between {
+    @include flex-between;
+  }
+  
+  &--column {
+    @include flex-column;
+  }
+  
+  &--wrap {
+    flex-wrap: wrap;
+  }
+}
+
+.grid {
+  display: grid;
+  
+  &--gap-sm {
+    gap: $spacing-sm;
+  }
+  
+  &--gap-md {
+    gap: $spacing-md;
+  }
+  
+  &--gap-lg {
+    gap: $spacing-lg;
+  }
+  
+  &--auto-fit {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+  
+  &--auto-fill {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+  
+  &--two-columns {
+    grid-template-columns: 1fr 2fr;
+    
+    @media (max-width: $breakpoint-md) {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+.text {
+  &--center {
+    text-align: center;
+  }
+  
+  &--muted {
+    color: $text-muted;
+    font-style: italic;
+  }
+  
+  &--small {
+    font-size: $font-size-sm;
+  }
+  
+  &--bold {
+    font-weight: bold;
+  }
+}
+
+.input {
+  @include input-base;
+  
+  &:disabled {
+    background-color: #f5f5f5;
+  }
+}
+
+// Utility classes for common patterns
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.sr-only {
+  @extend .visually-hidden;
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.empty-state {
+  text-align: center;
+  color: $text-muted;
+  font-style: italic;
+}
+
+
+// ===== APP COMPONENT =====
+
+.app {
+  padding: $spacing-xl;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.header {
+  margin-bottom: $spacing-2xl;
+  
+  h1 {
+    color: $text-dark;
+    margin-bottom: $spacing-sm;
+  }
+}
+
+.connection-bar {
+  @include flex-between;
+  margin-bottom: $spacing-sm;
+}
+
+.connection-status {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-xs $spacing-sm;
+  border-radius: $border-radius-sm;
+  font-size: $font-size-xs;
+  
+  &.connected {
+    background-color: $bg-connected;
+    color: $text-connected;
+    border: 1px solid $border-connected;
+  }
+  
+  &.disconnected {
+    background-color: $bg-disconnected;
+    color: $text-disconnected;
+    border: 1px solid $border-disconnected;
+  }
+}
+
+.status-dot {
+  @include status-indicator;
+  width: 8px;
+  height: 8px;
+  
+  &.connected {
+    background-color: $color-connected;
+  }
+  
+  &.disconnected {
+    background-color: $color-danger;
+  }
+}
+
+.main-grid {
+  display: grid;
+  gap: $spacing-2xl;
+  grid-template-columns: 1fr 2fr;
+  
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: 1fr;
+  }
+}
+
+
+// ===== CREATE GAME COMPONENT =====
+
+.create-game {
+  @include card;
+  
+  h2 {
+    margin-top: 0;
+    color: $text-dark;
+  }
+}
+
+.form {
+  @include flex-column;
+  gap: $spacing-lg;
+}
+
+.label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+
+// ===== GAME LIST COMPONENT =====
+
+.game-list {
+  @include card;
+}
+
+.games-container {
+  @include flex-column;
+  gap: $spacing-lg;
+}
+
+.game-card {
+  border: 1px solid $border-light;
+  border-radius: $border-radius-sm;
+  padding: $spacing-lg;
+  background-color: $color-light;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    border-color: $color-primary;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.game-content {
+  @include flex-between;
+  align-items: flex-start;
+}
+
+.game-info {
+  flex: 1;
+  
+  h3 {
+    margin: 0 0 $spacing-sm 0;
+    color: $text-dark;
+  }
+}
+
+.game-meta {
+  display: flex;
+  gap: $spacing-lg;
+  margin-bottom: $spacing-sm;
+  font-size: $font-size-sm;
+  color: $text-muted;
+  
+  strong {
+    color: $text-dark;
+  }
+}
+
+.status-badge {
+  font-size: $font-size-xs;
+  padding: 2px $spacing-sm;
+  border-radius: $border-radius-xl;
+  text-transform: capitalize;
+  color: $color-white;
+  
+  &.waiting {
+    background-color: $color-success;
+  }
+  
+  &.night, &.day, &.voting {
+    background-color: $color-warning;
+    color: $text-dark;
+  }
+  
+  &.finished {
+    background-color: $color-secondary;
+  }
+  
+  &.in-progress {
+    background-color: $color-warning;
+    color: $text-dark;
+  }
+}
+
+.players-section {
+  margin-bottom: $spacing-sm;
+  
+  strong {
+    font-size: $font-size-sm;
+  }
+}
+
+.player-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 5px;
+}
+
+.player-badge {
+  font-size: $font-size-xs;
+  padding: 2px 6px;
+  border-radius: $border-radius-sm;
+  
+  &.connected {
+    background-color: $bg-connected;
+    color: $text-connected;
+    border: 1px solid $border-connected;
+  }
+  
+  &.disconnected {
+    background-color: $bg-disconnected;
+    color: $text-disconnected;
+    border: 1px solid $border-disconnected;
+  }
+}
+
+.game-actions {
+  margin-left: $spacing-xl;
+}
+
+.join-form {
+  min-width: 300px;
+  
+  .form {
+    @include flex-column;
+    gap: $spacing-sm;
+    
+    @media (max-width: $breakpoint-sm) {
+      min-width: auto;
+      width: 100%;
+    }
+  }
+}
+
+.existing-players {
+  margin-bottom: $spacing-sm;
+}
+
+.section-title {
+  font-size: $font-size-sm;
+  font-weight: bold;
+  margin-bottom: $spacing-xs;
+}
+
+.radio-group {
+  @include flex-column;
+  gap: $spacing-xs;
+}
+
+.radio-option {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  
+  span {
+    font-size: $font-size-sm;
+  }
+}
+
+.new-player-section {
+  &.divider {
+    border-top: 1px solid $border-light;
+    padding-top: $spacing-sm;
+  }
+  
+  label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: $spacing-sm;
+    cursor: pointer;
+    
+    span {
+      font-size: $font-size-sm;
+      font-weight: bold;
+    }
+  }
+  
+  input[type="text"] {
+    @include input-base;
+    width: 200px;
+    
+    &:disabled {
+      background-color: #f5f5f5;
+    }
+  }
+}
+
+.form-buttons {
+  display: flex;
+  gap: $spacing-sm;
+  margin-top: $spacing-sm;
+}
+
+
+// ===== GAME BOARD COMPONENT =====
+
+.game-board {
+  @include card;
+  padding: $spacing-2xl;
+  
+  .header {
+    @include flex-between;
+    margin-bottom: $spacing-2xl;
+    padding-bottom: $spacing-xl;
+    border-bottom: 2px solid #eee;
+    
+    h1 {
+      margin: 0 0 $spacing-sm 0;
+      color: $text-dark;
+    }
+  }
+}
+
+.loading-state {
+  @include card;
+  text-align: center;
+  
+  h2 {
+    margin-bottom: $spacing-sm;
+  }
+  
+  p {
+    margin-bottom: $spacing-xl;
+  }
+}
+
+.not-found {
+  @include card;
+  text-align: center;
+  
+  h2 {
+    margin-bottom: $spacing-sm;
+  }
+  
+  p {
+    margin-bottom: $spacing-xl;
+  }
+}
+
+.alert-content {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.status-indicator {
+  @include status-indicator;
+  
+  &.connected {
+    background-color: $color-connected;
+  }
+  
+  &.disconnected {
+    background-color: $color-danger;
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.alert-text {
+  strong {
+    display: block;
+  }
+  
+  p {
+    margin: 5px 0 0 0;
+    font-size: $font-size-sm;
+  }
+}
+
+.current-player {
+  @include card-compact;
+  background-color: $color-light;
+  border: 2px solid $color-primary;
+  margin-bottom: $spacing-xl * 1.25;
+  
+  h3 {
+    margin: 0 0 $spacing-sm 0;
+    color: $color-primary;
+  }
+  
+  p {
+    margin: 0;
+    font-size: $font-size-md;
+    
+    strong {
+      color: $text-dark;
+    }
+  }
+}
+
+.players-grid {
+  display: grid;
+  gap: $spacing-sm;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.player-card {
+  padding: $spacing-md;
+  border-radius: $border-radius-md;
+  border: 2px solid $border-light;
+  background-color: $color-white;
+  @include flex-between;
+  
+  &.current {
+    border-color: $color-primary;
+    background-color: #f0f8ff;
+  }
+}
+
+.player-info {
+  .player-name {
+    font-weight: bold;
+    margin-bottom: $spacing-xs;
+  }
+  
+  .player-seat {
+    font-size: $font-size-sm;
+    color: $text-muted;
+  }
+}
+
+.player-actions {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.disconnect-btn {
+  @include button-base;
+  padding: $spacing-xs $spacing-sm;
+  font-size: $font-size-xs;
+  background-color: $color-danger;
+  color: $color-white;
+  
+  &:hover:not(:disabled) {
+    background-color: darken($color-danger, 10%);
+  }
+  
+  &:disabled {
+    background-color: $color-secondary;
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+}
+
+
+// ===== ONUB LOBBY COMPONENT =====
+
+.lobby {
+  @include card-compact;
+  background-color: $color-light;
+  
+  h1 {
+    margin: 0 0 $spacing-sm 0;
+    color: $text-dark;
+  }
+  
+  p {
+    margin: 0 0 $spacing-lg 0;
+    color: $text-muted;
+  }
+  
+  .form {
+    h2 {
+      color: $text-dark;
+      margin-bottom: $spacing-md;
+    }
+  }
+}
+
+.roles-section {
+  margin-bottom: $spacing-xl;
+}
+
+.roles-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  
+  li {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    margin-bottom: $spacing-sm;
+    
+    button {
+      @include button-success;
+      @include button-base;
+      padding: $spacing-xs $spacing-sm;
+      font-size: $font-size-xs;
+    }
+  }
+}
+
+.role-order {
+  margin-bottom: $spacing-xl;
+}
+
+.role-list {
+  list-style: decimal;
+  padding-left: $spacing-xl;
+  margin: 0;
+}
+
+.role-item {
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+  margin-bottom: $spacing-xs;
+  
+  button {
+    @include button-base;
+    padding: 2px 6px;
+    font-size: $font-size-xs;
+    background-color: $color-light;
+    color: $text-dark;
+    border: 1px solid $border-light;
+    
+    &:hover:not(:disabled) {
+      background-color: darken($color-light, 10%);
+    }
+  }
+}
+
+.special-rules {
+  margin-bottom: $spacing-xl;
+}
+
+.rule-option {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  font-size: $font-size-sm;
+  
+  input[type="checkbox"] {
+    margin-right: $spacing-xs;
+  }
+  
+  input[type="number"] {
+    @include input-base;
+    width: 80px;
+    margin: 0 $spacing-xs;
+  }
+}
+
+.start-section {
+  button {
+    @include button-primary;
+    @include button-base;
+    padding: $spacing-md $spacing-xl;
+    font-size: $font-size-md;
+    font-weight: bold;
+    
+    &:disabled {
+      background-color: $color-secondary;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.game-area {
+  @include card-compact;
+  background-color: $color-light;
+  
+  h3 {
+    margin: 0 0 $spacing-sm 0;
+    color: $text-dark;
+  }
+}
+
+.game-area__placeholder {
+  p {
+    margin: 0 0 $spacing-lg 0;
+    color: $text-muted;
+  }
+  
+  ul {
+    text-align: left;
+    color: $text-muted;
+    margin: 0 0 $spacing-xl 0;
+    padding-left: $spacing-xl;
+  }
+  
+  .alert--info {
+    padding: $spacing-lg;
+    background-color: $bg-info;
+    border-radius: $border-radius-sm;
+    color: $text-info;
+    border: 1px solid $border-info;
+    
+    strong {
+      display: block;
+      margin-bottom: $spacing-xs;
+    }
+  }
+}
+
+
+// ===== ANIMATIONS =====
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
\ No newline at end of file