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 */