:root {
    --anim-yellow: #ffff6a;
    --anim-pink: #ffd0d3;
    --anim-black: #000000;
}

body {
    color: var(--anim-black);
    background: #ffffff;
}

.focus-ring:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 4px solid var(--anim-pink);
    outline-offset: 2px;
}

.btn-yellow {
    background: var(--anim-yellow);
    color: #000;
}

.btn-pink {
    background: var(--anim-pink);
    color: #000;
}

.mission-urgent { background: var(--anim-pink); }
.mission-standard { background: var(--anim-yellow); }
.mission-obsolete { opacity: .52; filter: grayscale(1); }

.modal-backdrop {
    background: rgba(0, 0, 0, .48);
}

@media (max-width: 640px) {
    .modal-panel {
        align-self: end;
        width: 100%;
        max-height: 92vh;
        border-radius: 1.5rem 1.5rem 0 0;
    }
}