/* The Your Data modal: its tools in front, and the "are you sure" screen on the back (the flip itself is in history.css). */

.data-dialog .face { display: flex; flex-direction: column; }
.data-dialog .face .dialog-buttons { margin-top: 18px; }
.data-dialog .back-face { justify-content: center; }   /* the back is as tall as the front; its content sits in the middle */

.data-info { margin-top: 2px; text-align: center; }
.data-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 40px 0 6px; }   /* Export and Import side by side, Clear under them */
.data-buttons .button { width: 100%; }
.data-buttons .danger { grid-column: 1 / -1; }

.button.danger { color: var(--player-1-color); border-color: var(--player-1-color); }
.button.danger.fill { background: var(--player-1-color); border-color: var(--player-1-color); color: #fff; }
.link-button { background: none; border: 0; padding: 0; color: var(--text-color); font-size: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.data-dialog .back-face .dialog-buttons { margin-top: 22px; flex-direction: column; }
.data-dialog .back-face .dialog-buttons .button { width: 100%; }