From 0b5fa3f6978674cfc57e1c7160d598210bbf5903 Mon Sep 17 00:00:00 2001
From: Frank Schwenk <frank@frank-schwenk.de>
Date: Tue, 24 Jun 2025 10:10:38 +0200
Subject: [PATCH] style(ui): make 'Neues Spiel' button visually prominent

- Increased size, padding, and border radius of the button
- Changed background to bold orange with white text
- Added a plus icon before the text
- Added drop shadow and modern hover effect for emphasis

Refs #26
---
 src/styles/index.css | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/styles/index.css b/src/styles/index.css
index 0334055..8159edb 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -37,22 +37,37 @@ input, select {
 /* Utility button for new game (global, not component-specific) */
 .new-game-button {
     width: 100%;
-    background: #222;
+    background: #ff9800;
     color: #fff;
     border: none;
-    border-radius: 0;
-    font-size: 1.4rem;
-    font-weight: 600;
-    padding: 20px 0;
-    margin-bottom: 16px;
+    border-radius: 12px;
+    font-size: 2rem;
+    font-weight: 700;
+    padding: 28px 0;
+    margin-bottom: 24px;
     cursor: pointer;
-    transition: background 0.2s, color 0.2s;
+    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
     text-align: center;
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 24px rgba(255, 152, 0, 0.25), 0 1.5px 6px rgba(0,0,0,0.12);
+    letter-spacing: 0.5px;
+    gap: 16px;
+}
+
+.new-game-button::before {
+    content: '+';
+    font-size: 2.2rem;
+    font-weight: 900;
+    margin-right: 12px;
+    display: inline-block;
+    line-height: 1;
 }
 
 .new-game-button:hover {
-    background: #333;
+    background: #ffa726;
+    box-shadow: 0 6px 32px rgba(255, 152, 0, 0.35), 0 2px 8px rgba(0,0,0,0.16);
 }
 
 /* Shared utility classes for buttons and layout */