.player { align-items: flex-start; }
.player .avatar { flex-shrink: 0; margin-top: 2px; }
.player-info { display: block; min-width: 120px; max-width: 230px; }
.player-name { overflow-wrap: anywhere; }
.player-lead { display: inline-block; margin-left: 7px; font-size: 8px; color: var(--sage); border: 1px solid #5a6a50; border-radius: 10px; padding: 0 5px; vertical-align: 1px; }
.player.rose .player-lead { color: var(--rose); border-color: #745e5c; }
.contribution-bar { display: block; width: 100%; height: 5px; border: 0; border-radius: 4px; overflow: hidden; margin-top: 6px; background: #3b4438; color: var(--sage); appearance: none; }
.contribution-bar::-webkit-progress-bar { background: #3b4438; border-radius: 4px; }
.contribution-bar::-webkit-progress-value { background: var(--sage); border-radius: 4px; }
.contribution-bar::-moz-progress-bar { background: var(--sage); border-radius: 4px; }
.rose .contribution-bar { color: var(--rose); }
.rose .contribution-bar::-webkit-progress-value { background: var(--rose); }
.rose .contribution-bar::-moz-progress-bar { background: var(--rose); }
.complete-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.complete-dialog .completion-result { color: #293226; font: 22px/1.4 var(--serif); margin-bottom: 8px; }
.completion-scores { list-style: none; padding: 0; margin: 22px 0; text-align: left; }
.completion-scores li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 15px; padding: 12px 0; border-top: 1px solid #c8ccbe; }
.completion-scores strong { overflow-wrap: anywhere; font-size: 13px; }
.completion-scores li > span { font-size: 12px; color: #59654f; }
.completion-scores .contribution-bar { grid-column: 1 / -1; height: 6px; background: #d3d5c9; }
.completion-scores .contribution-bar::-webkit-progress-bar { background: #d3d5c9; }
.completion-scores .contribution-bar::-webkit-progress-value { background: #627b4f; }
.completion-scores .contribution-bar::-moz-progress-bar { background: #627b4f; }
.completion-scores .rose .contribution-bar::-webkit-progress-value { background: #a46b69; }
.completion-scores .rose .contribution-bar::-moz-progress-bar { background: #a46b69; }
@media (max-width: 760px) {
  .session-bar .players { flex: 1 1 100%; gap: 14px 20px; }
  .player { flex: 1 1 calc(50% - 20px); min-width: 0; }
  .player-info { min-width: 0; flex: 1; }
  .player-lead { margin-left: 4px; }
  .session-bar .connection { width: auto; order: 0; margin-left: 0; }
  .session-bar .progress-label { margin-left: auto; }
}