From 634d01209734b592f21c5ce844854cbf7f3f5820 Mon Sep 17 00:00:00 2001
From: Frank Schwenk <frank@frank-schwenk.de>
Date: Thu, 30 Oct 2025 10:50:24 +0100
Subject: [PATCH] fix(ui): prevent winner modal icons from clipping

Increase top padding, set overflow visible, and position decorative icons inside container so emojis are fully visible.

Refs #26
---
 src/components/GameCompletionModal.module.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/GameCompletionModal.module.css b/src/components/GameCompletionModal.module.css
index 02631c7..645f294 100644
--- a/src/components/GameCompletionModal.module.css
+++ b/src/components/GameCompletionModal.module.css
@@ -26,7 +26,7 @@
 .winner-announcement {
     text-align: center;
     margin: 20px 0 0 0;
-    padding: 24px 16px;
+    padding: 32px 16px 24px 16px; /* extra top padding to keep icons inside */
     background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%);
     border-radius: 16px;
     font-size: 1.2rem;
@@ -35,13 +35,13 @@
     box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
     animation: celebrationPulse 2s ease-in-out infinite;
     position: relative;
-    overflow: hidden;
+    overflow: visible; /* avoid clipping decorative icons */
 }
 
 .winner-announcement::before {
     content: '🎉';
     position: absolute;
-    top: -10px;
+    top: 6px;
     left: 20px;
     font-size: 24px;
     animation: bounce 1s ease-in-out infinite;
@@ -50,7 +50,7 @@
 .winner-announcement::after {
     content: '🏆';
     position: absolute;
-    top: -10px;
+    top: 6px;
     right: 20px;
     font-size: 24px;
     animation: bounce 1s ease-in-out infinite 0.5s;