#game-completion-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; display: flex; justify-content: center; align-items: center; } .modal-content { background-color: #222; padding: 32px 24px 24px 24px; border-radius: 16px; width: 90vw; max-width: 480px; box-shadow: 0 4px 32px rgba(0,0,0,0.7); position: relative; margin: auto; transform: none; } .final-scores { margin: 20px 0; } .final-score { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; margin-bottom: 8px; background: #333; border-radius: 8px; font-size: 1.2rem; color: #fff; } .final-score .player-name { font-size: 1.2rem; font-weight: bold; color: #fff; } .final-score .score { font-size: 1.2rem; font-weight: bold; color: #fff; } .winner-announcement { text-align: center; margin: 20px 0 0 0; padding: 18px 8px; background: #43a047; border-radius: 8px; font-size: 1.2rem; color: #fff; font-weight: 700; } .winner-announcement h3 { font-size: 1.2rem; margin: 0; color: #fff; } .modal-footer { display: flex; flex-direction: row; gap: 16px; margin-top: 24px; width: 100%; justify-content: center; } .btn { flex: 1; padding: 18px 0; font-size: 1.1rem; border: none; border-radius: 8px; cursor: pointer; color: #fff; background: #333; font-weight: 600; transition: background 0.2s; } .btn--warning { background: #f44336; } .btn:not(.btn--warning):hover { background: #444; } .btn--warning:hover { background: #d32f2f; } .close-button { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #aaa; font-size: 2rem; cursor: pointer; z-index: 2; } .close-button:hover { color: #fff; } @media (max-width: 600px) { .modal-content { padding: 16px 4px 16px 4px; max-width: 98vw; } .btn { font-size: 1rem; padding: 14px 0; } }