diff --git a/index.html b/index.html
index e690fd9..3b1fd15 100644
--- a/index.html
+++ b/index.html
@@ -767,6 +767,137 @@
font-size: 14px;
}
}
+
+ /* Game detail styles */
+ .game-detail {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ padding: 20px;
+ background-color: #2a2a2a;
+ border-radius: 10px;
+ margin-top: 20px;
+ min-height: 0; /* Allow content to shrink */
+ }
+
+ .scores-container {
+ display: flex;
+ justify-content: space-between;
+ gap: 20px;
+ min-height: 0; /* Allow content to shrink */
+ }
+
+ .player-score {
+ flex: 1;
+ text-align: center;
+ padding: 20px;
+ background-color: #333;
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ min-height: 0; /* Allow content to shrink */
+ }
+
+ .player-name {
+ font-size: 24px;
+ margin-bottom: 10px;
+ color: #fff;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .score {
+ font-size: 48px;
+ font-weight: bold;
+ margin: 10px 0;
+ line-height: 1;
+ }
+
+ .score-buttons {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ margin-top: auto; /* Push buttons to bottom */
+ }
+
+ .score-button {
+ background-color: #333;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ padding: 10px 20px;
+ font-size: 18px;
+ cursor: pointer;
+ transition: background-color 0.2s;
+ min-width: 80px; /* Ensure buttons have minimum width */
+ }
+
+ /* Responsive styles */
+ @media screen and (max-width: 480px) {
+ .game-detail {
+ padding: 15px;
+ margin-top: 10px;
+ }
+
+ .scores-container {
+ flex-direction: column;
+ gap: 15px;
+ }
+
+ .player-score {
+ padding: 15px;
+ min-height: 200px; /* Ensure minimum height for score display */
+ }
+
+ .player-name {
+ font-size: 20px;
+ }
+
+ .score {
+ font-size: 36px;
+ }
+
+ .score-buttons {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .score-button {
+ padding: 8px 16px;
+ font-size: 16px;
+ min-width: 70px;
+ }
+ }
+
+ @media screen and (min-width: 481px) and (max-width: 768px) {
+ .game-detail {
+ padding: 20px;
+ }
+
+ .scores-container {
+ gap: 15px;
+ }
+
+ .player-score {
+ padding: 15px;
+ min-height: 180px; /* Ensure minimum height for score display */
+ }
+
+ .player-name {
+ font-size: 22px;
+ }
+
+ .score {
+ font-size: 42px;
+ }
+
+ .score-button {
+ padding: 8px 16px;
+ font-size: 16px;
+ min-width: 70px;
+ }
+ }