/**
 * Confirm dialog, the in-game replacement for window.confirm. Load order is significant: keep this file's <link> position in index.html.
 */

.modal-panel--confirm {
    max-width: min(440px, 92vw);
}

.confirm-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.confirm-message {
    color: var(--text);
    font-size: 17px;
    line-height: 1.4;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.confirm-cancel,
.confirm-accept {
    padding: 9px 22px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.confirm-cancel {
    border: 3px solid var(--btn-edge);
    background: linear-gradient(var(--btn-top), var(--btn-bottom));
    color: var(--text);
}

.confirm-accept {
    border: 3px solid var(--danger);
    background: linear-gradient(var(--danger), var(--danger));
    color: #fff;
}

.confirm-cancel:focus-visible,
.confirm-accept:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}