.game-mode-completion-summary {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
}


.game-mode-completion-body {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}


/* Shared modal shell: .motivation-modal (overlay) > .motivation-modal-backdrop + .motivation-modal-card.card
   (surface) > .motivation-modal-head (title + .field-help body) / .motivation-modal-actions.
   Themes assign --modal-backdrop; the surface follows each theme's card family and the
   title/body follow the shared --read-text-* text layer. */
.motivation-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: end center;
}


.motivation-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--modal-backdrop, rgba(10, 16, 20, 0.5));
}


.motivation-modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  max-height: calc(100vh - 24px);
  margin: 12px;
  padding: 14px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  display: grid;
  gap: 12px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  animation: slideUp 0.18s ease;
}


.motivation-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}


.motivation-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  margin-bottom: 0;
}


.motivation-modal-actions .primary-btn {
  min-width: 120px;
}


.motivation-modal-open .bottom-nav {
  display: none;
}


.motivation-modal-open .hamburger-fab-wrapper {
  display: none !important;
}


/* ── GAME MODE COMPLETION DISPLAY ──────────────────────────── */

[data-theme="graphite"] .game-mode-completion-body {
  color: var(--text);
}


[data-theme="graphite"] .game-mode-completion-body strong {
  color: var(--graphite-gold-light);
  font-size: 1.25rem;
}


[data-theme="graphite"] .game-mode-completion-summary {
  color: var(--text-soft);
}
