Style title screen with gradient, bordered frame, and New Game button

Gradient background spans the full window on body; the 1rem-inset frame
provides the black border and rounded corners as a transparent overlay.
"Black" and "7" are typographically separated, with "7" oversized.
New Game button is full-width, light blue, pinned to the bottom.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/index.css

@@ -0,0 +1,7 @@
+*, *::before, *::after { box-sizing: border-box; }
+html, body, #root { margin: 0; height: 100%; }
+body {
+  font-family: sans-serif;
+  background: linear-gradient(to bottom, #a8d5e8, #4a9e6a);
+  min-height: 100vh;
+}

src/main.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import './index.css'
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(

src/pages/TitleScreen.module.css

@@ -0,0 +1,52 @@
+.frame {
+  position: fixed;
+  inset: 1rem;
+  border: 2px solid black;
+  border-radius: 2rem;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1;
+}
+
+.titleWord {
+  font-size: 2.5rem;
+  font-weight: 300;
+  letter-spacing: 0.1em;
+  color: #1a1a1a;
+}
+
+.titleNumber {
+  font-size: 8rem;
+  font-weight: 700;
+  color: #1a1a1a;
+  line-height: 0.9;
+}
+
+.buttonRow {
+  position: absolute;
+  bottom: 2rem;
+  left: 1.5rem;
+  right: 1.5rem;
+}
+
+.newGameButton {
+  width: 100%;
+  padding: 1rem;
+  background: #a8d5e8;
+  border: none;
+  border-radius: 1rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}

src/pages/TitleScreen.tsx

@@ -1,12 +1,21 @@
+import styles from './TitleScreen.module.css'
+
 interface Props {
   onNewGame: () => void
 }
 
 export default function TitleScreen({ onNewGame }: Props) {
   return (
-    <div>
+    <div className={styles.frame}>
-      <h1>Black 7</h1>
+      <div className={styles.title}>
-      <button onClick={onNewGame}>New Game</button>
+        <span className={styles.titleWord}>Black</span>
+        <span className={styles.titleNumber}>7</span>
+      </div>
+      <div className={styles.buttonRow}>
+        <button className={styles.newGameButton} onClick={onNewGame}>
+          New Game
+        </button>
+      </div>
     </div>
   )
 }

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />