From 7d4cc30e9740acd246248c6ec528420b98c92075 Mon Sep 17 00:00:00 2001
From: Frank Schwenk <frank@frank-schwenk.de>
Date: Tue, 24 Jun 2025 10:17:58 +0200
Subject: [PATCH] style(new-game): restrict player color backgrounds to player
 input steps

- Only player input containers use the new color backgrounds, borders, and shadows
- Game type selection and other steps are visually unaffected
- Ensures clear, consistent player association without UI side effects

Refs #26
---
 src/components/NewGame.jsx        |  6 +++---
 src/components/NewGame.module.css | 26 ++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/NewGame.jsx b/src/components/NewGame.jsx
index 3866736..c2fae4f 100644
--- a/src/components/NewGame.jsx
+++ b/src/components/NewGame.jsx
@@ -85,7 +85,7 @@ const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' })
         <span className={styles['progress-dot']} />
         <span className={styles['progress-dot']} />
       </div>
-      <div className={styles['player-input']} style={{ marginBottom: 32, position: 'relative' }}>
+      <div className={styles['player-input'] + ' ' + styles['player1-input']} style={{ marginBottom: 32, position: 'relative' }}>
         <label htmlFor="player1-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 1</label>
         <div style={{ position: 'relative', width: '100%' }}>
           <input
@@ -244,7 +244,7 @@ const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' })
         <span className={styles['progress-dot']} />
         <span className={styles['progress-dot']} />
       </div>
-      <div className={styles['player-input']} style={{ marginBottom: 32, position: 'relative' }}>
+      <div className={styles['player-input'] + ' ' + styles['player2-input']} style={{ marginBottom: 32, position: 'relative' }}>
         <label htmlFor="player2-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 2</label>
         <div style={{ position: 'relative', width: '100%' }}>
           <input
@@ -380,7 +380,7 @@ const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' })
         <span className={styles['progress-dot']} />
         <span className={styles['progress-dot']} />
       </div>
-      <div className={styles['player-input']} style={{ marginBottom: 32, position: 'relative' }}>
+      <div className={styles['player-input'] + ' ' + styles['player3-input']} style={{ marginBottom: 32, position: 'relative' }}>
         <label htmlFor="player3-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 3 (optional)</label>
         <div style={{ position: 'relative', width: '100%' }}>
           <input
diff --git a/src/components/NewGame.module.css b/src/components/NewGame.module.css
index 63dbf15..e1b5ddb 100644
--- a/src/components/NewGame.module.css
+++ b/src/components/NewGame.module.css
@@ -274,4 +274,30 @@
 
 .endlos-btn {
     width: 100%;
+}
+
+.player1-input.player-input {
+    background: #43a047;
+    color: #fff;
+    border: 2px solid #388e3c;
+    box-shadow: 0 2px 12px rgba(67,160,71,0.12);
+}
+.player2-input.player-input {
+    background: #1565c0;
+    color: #fff;
+    border: 2px solid #0d47a1;
+    box-shadow: 0 2px 12px rgba(21,101,192,0.12);
+}
+.player3-input.player-input {
+    background: #333;
+    color: #fff;
+    border: 2px solid #222;
+    box-shadow: 0 2px 12px rgba(51,51,51,0.12);
+}
+.player1-input.player-input input,
+.player2-input.player-input input,
+.player3-input.player-input input {
+    background: #fff;
+    color: #222;
+    border: 1px solid #ccc;
 } 
\ No newline at end of file